First pass at mobile-ising the generic list

RIGS/static/scss/_custom-variables.scss

@@ -3,5 +3,6 @@ $font-family-sans-serif:  "Open Sans", sans-serif;
 $font-size-base: 0.875rem;
 $theme-colors: (
   "warning": #ffd351,
+  "yellow": #ffd351,
   "info": #53bbcc
 );

templates/partials/generic_list.html

@@ -13,7 +13,7 @@
     <a href="{% url create %}" class="btn btn-success">New <span
             class="fas fa-plus"></span></a>
 </div>
-<div class="row">
+    <div class="d-none d-md-block">
         <div class="table-responsive">
             <table class="table table-striped">
                 <thead class="thead-dark">
@@ -58,7 +58,10 @@
                 </tbody>
             </table>
         </div>
-</div>
+    </div>
+    <div class="d-xs-block d-sm-block d-md-none">
+    {% include 'partials/generic_list_mobile.html' %}
+    </div>
 {% if is_paginated %}
 <div class="row justify-content-center">
         {% paginator %}

templates/partials/generic_list_mobile.html

@@ -0,0 +1,19 @@
+<div class="card">
+{% for object in object_list %}
+    <div class="card-header">
+        <a href="{% url detail object.pk %}">{{ object.pk }} | {{ object.name }}</a>
+    </div>
+    <div class="card-body">
+        <ul>
+            <li><strong>Email:</strong> {{ object.email }}</li>
+            <li><strong>Phone:</strong> {% if object.phone %}<a href="tel:{{ object.phone }}">{%endif%}{{ object.phone }}{% if object.phone %}</a>{%endif%}</li>
+            <li><strong>Notes:</strong>{{ object.notes|yesno|capfirst }}</li>
+            {% if union_account %}
+            <li>strong>Union Account:</strong> {{ object.union_account|yesno|capfirst }}</li>
+            {% endif %}
+       </ul>
+       <a href="{% url edit object.pk %}" class="btn btn-warning btn-sm"><i
+                                        class="fas fa-edit"></i> Edit</a>
+   </div>
+{% endfor %}
+</div>