Fixed mobile responsiveness and some text issues

Everything but audit log related sections are mobile responsive.
Fixed some text issues with Customers being called Companies and Vendors being called Drivers

22 files changed, 269 insertions, 123 deletions

diff --git a/app/dispatch/templates/dispatch/base.html b/app/dispatch/templates/dispatch/base.html
index cac1b18..d1dde8c 100644
--- a/app/dispatch/templates/dispatch/base.html
+++ b/app/dispatch/templates/dispatch/base.html
@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!--Import materialize.css-->
   <link type="text/css" rel="stylesheet" href="{% static 'materialize/css/materialize.min.css' %}"  media="screen,projection"/>
-  <link type="text/css" rel="stylesheet" href="{% static 'style.css' %}"  media="screen,projection"/>
+  <link type="text/css" rel="stylesheet" href="{% static 'style.css' %}?1"  media="screen,projection"/>
 
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -22,9 +22,6 @@
       font-size: 1.75rem;
 
     }
-    main {
-      padding: 16px;
-    }
     .helptext{
       display: none;
     }
@@ -34,7 +31,7 @@
 
   <nav class="brown darken-3" role="navigation">
     <div class="nav-wrapper container">
-      <a id="logo-container" href="{% url 'home' %}" class="brand-logo">{{template_vars.app_name}}</a>
+      <a href="{% url 'home' %}" class="brand-logo">{{template_vars.app_name}}</a>
       <ul class="right hide-on-med-and-down">
         {% include "dispatch/nav.html" %}
       </ul>
diff --git a/app/dispatch/templates/dispatch/companies/create.html b/app/dispatch/templates/dispatch/companies/create.html
index fb6030e..5aba0ae 100644
--- a/app/dispatch/templates/dispatch/companies/create.html
+++ b/app/dispatch/templates/dispatch/companies/create.html
@@ -4,12 +4,12 @@
 {% block content %}
 <div class="row">
     <div class="col s12 m6">
-        <h1>New Company</h1>
+        <h1>New Customer</h1>
     </div>
 </div> 
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn green" value="Save" />
+    <input type="submit" class="btn btn-block-sm green" value="Save" />
 </form>
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/companies/detail.html b/app/dispatch/templates/dispatch/companies/detail.html
index ffd3c09..7ce73f3 100644
--- a/app/dispatch/templates/dispatch/companies/detail.html
+++ b/app/dispatch/templates/dispatch/companies/detail.html
@@ -5,15 +5,22 @@
 {% block content %}
 
 <div class="row">
-    <div class="col s12 m9">
-        <h1>Company: {{ object.name }}</h1>
-        <h2>Loads for {{week_dates.start_date|date:"l, F, d"}} to {{week_dates.end_date|date:"l, F, d"}}</h2>
+    <div class="col s12 m7">
+        <h1>Customer: {{ object.name }}</h1>
+        <h2>
+            <span class="hide-on-small-only">
+                Loads for {{week_dates.start_date|date:"l, F, d"}} to {{week_dates.end_date|date:"l, F, d"}}
+            </span>
+            <span class="show-on-small" style="font-size: 24px;">
+                Loads for {{week_dates.start_date|date:"D, M d"}} to {{week_dates.end_date|date:"D, M d"}}
+            </span>
+        </h2>
     </div>
     {% load dynamic_key %}
-    {% if object|customer_has_load_for_datetime:week_dates.start_date %}
-    <div class="col s12 m3">
+    {% if not object|customer_has_load_for_datetime:week_dates.start_date %}
+    <div class="col s12 m5">
       <div class="right-align">
-        <a class="btn blue" href="{% url 'customer_download' object.id %}?date={{week_dates.start_date|date:"m/d/Y"}}">Download Paperwork</a>
+        <a class="btn btn-block-sm blue" href="{% url 'customer_download' object.id %}?date={{week_dates.start_date|date:"m/d/Y"}}">Download Paperwork</a>
       </div>
     </div>
     {% endif %}
@@ -21,23 +28,23 @@
 
 <div class="row">
     <div class="col s6 left-align">
-        <a href="{% url 'customer_detail' object.id %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons left">arrow_back</i> Prev</a>
+        <a href="{% url 'customer_detail' object.id %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons left">arrow_back</i> Prev</a>
     </div>
     <div class="col s6 right-align">
-        <a href="{% url 'customer_detail' object.id %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons right">arrow_forward</i>  Next</a>
+        <a href="{% url 'customer_detail' object.id %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons right">arrow_forward</i>  Next</a>
     </div>
 </div>
 
 {% load custom_tags %}
-{% listForCommaString "Driver,Amount,Description" as load_headers %}
+{% listForCommaString "Vendor,Amount,Description" as load_headers %}
 {% include "dispatch/generic_load_listing.html" %}
-
+<br />
 <div class="row">
     <div class="col s6 left-align">
-        <a href="{% url 'customer_detail' object.id %}?date={{previous_week}}" class="btn blue"><i class="material-icons left">arrow_back</i> Prev</a>
+        <a href="{% url 'customer_detail' object.id %}?date={{previous_week}}" class="btn btn-block-sm blue"><i class="material-icons left">arrow_back</i> Prev</a>
     </div>
     <div class="col s6 right-align">
-        <a href="{% url 'customer_detail' object.id %}?date={{next_week}}" class="btn blue"><i class="material-icons right">arrow_forward</i>  Next</a>
+        <a href="{% url 'customer_detail' object.id %}?date={{next_week}}" class="btn btn-block-sm blue"><i class="material-icons right">arrow_forward</i>  Next</a>
     </div>
 </div>
 
diff --git a/app/dispatch/templates/dispatch/companies/edit.html b/app/dispatch/templates/dispatch/companies/edit.html
index 154ac1d..3213d7a 100644
--- a/app/dispatch/templates/dispatch/companies/edit.html
+++ b/app/dispatch/templates/dispatch/companies/edit.html
@@ -11,6 +11,6 @@
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn blue" value="Update" />
+    <input type="submit" class="btn btn-block-sm blue" value="Update" />
 </form>
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/companies/list.html b/app/dispatch/templates/dispatch/companies/list.html
index 2dc4f7c..c3be2f5 100644
--- a/app/dispatch/templates/dispatch/companies/list.html
+++ b/app/dispatch/templates/dispatch/companies/list.html
@@ -9,37 +9,66 @@
         <h1>Customers</h1>
     </div>
     <div class="col s12 m6 right-align">
-        <a href="{% url 'customer_new' %}" class="btn green">Add Customer</a>
+        <br class="show-on-small" />
+        <a href="{% url 'customer_new' %}" class="btn btn-block-sm green">Add Customer</a>
     </div>
 </div>
 
 <div class="row">
 <div class="col s12">
-  <table class="striped bordered">
+  <table class="striped bordered additional">
       <thead>
           <tr>
-              <th>Name</th>
-              <th>Email</th>
-              <th>Total Loads</th>
-              <th>Last Week</th>
-              <th>This Week</th>
+              <th class="hide-on-med-and-down">Name</th>
+              <th class="hide-on-med-and-down">Email</th>
+              <th class="hide-on-med-and-down">Total Loads</th>
+              <th class="hide-on-med-and-down">Last Week</th>
+              <th class="hide-on-med-and-down">This Week</th>
+              <th class="show-on-medium-and-down">Customer</th>
+              <th class="show-on-medium-and-down">Loads</th>
+              <th class="hide-on-small-only"></th>
           </tr>
       </thead>
       <tbody>
   	    {% for customer in object_list %}
               <tr>
-                  <td>{{ customer.name }}</td>
-                  <td>{{ customer.email_address }}</td>
-                  <td>{{ customer|customer_loads }}</td>
-                  <td>{{ customer|customer_loads_last_week }}</td>
-                  <td>{{ customer|customer_loads_this_week }}</td>
-                  <td class="right-align">
+                  <td class="hide-on-med-and-down">{{ customer.name }}</td>
+                  <td class="hide-on-med-and-down"><a href="mailto:{{ customer.email_address }}">{{ customer.email_address }}</a></td>
+                  <td class="hide-on-med-and-down">{{ customer|customer_loads }}</td>
+                  <td class="hide-on-med-and-down">{{ customer|customer_loads_last_week }}</td>
+                  <td class="hide-on-med-and-down">{{ customer|customer_loads_this_week }}</td>
+                  <td class="show-on-medium-and-down half">
+                    <div><strong>Name:</strong> {{ customer.name }}</div>
+                    <div><strong>Email:</strong> <a href="mailto:{{ customer.email_address }}">{{ customer.email_address }}</a></div>
+                  </td>
+                  <td class="show-on-medium-and-down">
+                    <div><strong>Total:</strong> {{ customer|customer_loads }}</div>
+                    <div><strong>Last Week:</strong> {{ customer|customer_loads_last_week }}</div>
+                    <div><strong>This Week:</strong> {{ customer|customer_loads_last_week }}</div>
+                  </td>
+                  <td class="right-align hide-on-small-only" >
                       {% if user.is_superuser %}
                       <a href="{% url 'customer_edit' customer.id %}" class="btn orange">Edit</a>
                       {% endif %}
                       <a href="{% url 'customer_detail' customer.id %}" class="btn blue">View</a>
                   </td>
               </tr>
+              <tr class="show-on-small additional-row">
+                <td colspan="2">
+                      {% if user.is_superuser %}
+                        <div class="row">
+                          <div class="col s6"><a href="{% url 'customer_edit' customer.id %}" class="btn btn-block orange">Edit</a></div>
+                          <div class="col s6"><a href="{% url 'customer_detail' customer.id %}" class="btn btn-block blue">View</a></div>
+                        </div>
+                      {% else %}
+                      <div class="row">
+                        <div class="col s12">
+                          <a href="{% url 'customer_detail' customer.id %}" class="btn btn-block blue">View</a>
+                        </div>
+                      </div>
+                      {% endif %}
+                </td>
+              </tr>
           {% empty %}
               <tr><td colspan="4">No customers yet.</td></tr>
           {% endfor %}
diff --git a/app/dispatch/templates/dispatch/drivers/detail.html b/app/dispatch/templates/dispatch/drivers/detail.html
index e8ffb99..0f8cb7b 100644
--- a/app/dispatch/templates/dispatch/drivers/detail.html
+++ b/app/dispatch/templates/dispatch/drivers/detail.html
@@ -6,19 +6,19 @@
 <div class="row">
     <div class="col s12">
         <h1>
-          User: {{object.first_name}} {{object.last_name}} ( {{object.email}} )
+          User: {{object.first_name}} {{object.last_name}} <span class="hide-on-small-only">( {{object.email}} )</span>
         </h1>
     </div>
 </div> 
 
 <div class="row">
-  <div class="col s6">
+  <div class="col s12 m6">
     <h5>General Information</h5>
   </div>
-  <div class="col s6">
+  <div class="col s12 m6">
     <div class="right-align">
-      <a class="btn blue" href="{% url 'driver_summary' object.pk %}">View Summary</a>
-      <a class="btn green" href="{% url 'driver_edit' object.pk %}">Edit</a>
+      <a class="btn btn-block-sm blue" href="{% url 'driver_summary' object.pk %}">View Summary</a>
+      <a class="btn btn-block-sm green" href="{% url 'driver_edit' object.pk %}">Edit</a>
     </div>
   </div>
 </div>
@@ -45,16 +45,16 @@
 
 {% if ident is not None %}
 <div class="row">
-  <div class="col s6">
+  <div class="col s12 m6">
     <h5>Invoice Identity</h5>
   </div>
-  <div class="col s6">
+  <div class="col s12 m6">
     <div class="right-align">
       {% if request.user.is_superuser %}
-        <a class="btn orange" href="{% url 'identity_default' object.pk ident.pk %}">Make Default Bill To</a>
+        <a class="btn btn-block-sm orange" href="{% url 'identity_default' object.pk ident.pk %}">Make Default Bill To</a>
       {% else %}
       {% endif %}
-      <a class="btn green" href="{% url 'identity_edit' object.pk ident.pk %}">
+      <a class="btn btn-block-sm green" href="{% url 'identity_edit' object.pk ident.pk %}">
         Edit
       </a>
     </div>
@@ -102,7 +102,7 @@
 <div class="row">
   <div class="col s12">
     <div class="right-align">
-      <a class="btn green" href="{% url 'identity_create' object.pk %}">Create New Identity</a>
+      <a class="btn btn-block-sm green" href="{% url 'identity_create' object.pk %}">Create New Identity</a>
     </div>
   </div>
 </div>
@@ -115,14 +115,14 @@
 
 
 <div class="row">
-  <div class="col s6">
+  <div class="col s12 m6">
   <h5>
     Current Invoice Number
   </h5>
   </div>
-  <div class="col s6">
+  <div class="col s12 m6">
     <div class="right-align">
-      <a class="btn green" href="{% url 'userinvoicenumber_edit' object.pk invoice_number.pk %}">
+      <a class="btn btn-block-sm green" href="{% url 'userinvoicenumber_edit' object.pk invoice_number.pk %}">
         Edit
       </a>
     </div>
diff --git a/app/dispatch/templates/dispatch/drivers/edit.html b/app/dispatch/templates/dispatch/drivers/edit.html
index 35dc15f..047c379 100644
--- a/app/dispatch/templates/dispatch/drivers/edit.html
+++ b/app/dispatch/templates/dispatch/drivers/edit.html
@@ -15,6 +15,6 @@
     {{field.label_tag}} {{field}}
     </p>
   {% endfor %}
-    <input type="submit" class="btn blue" value="Update" />
+    <input type="submit" class="btn btn-block-sm blue" value="Update" />
 </form>
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/drivers/list.html b/app/dispatch/templates/dispatch/drivers/list.html
index a5db74a..aaa0ed5 100644
--- a/app/dispatch/templates/dispatch/drivers/list.html
+++ b/app/dispatch/templates/dispatch/drivers/list.html
@@ -11,7 +11,7 @@
 
 <div class="row">
   <div class="col s12 right-align">
-    <a href="{% url 'invite_user' %}" class="btn blue">Invite User</a>  </div>
+    <a href="{% url 'invite_user' %}" class="btn btn-block-sm blue">Invite User</a>  </div>
 </div>
 
 <div class="row">
@@ -19,24 +19,33 @@
   <table class="striped bordered">
       <thead>
           <tr>
-              <th>First Name</th>
-              <th>Last Name</th>
-              <th>Email</th>
+              <th class="hide-on-small-only">Name</th>
+              <th class="hide-on-small-only">Email</th>
+              <th class="show-on-small">Vendor/User</th>
           </tr>
       </thead>
       <tbody>
   	    {% for driver in object_list %}
               <tr>
-                  <td>{{ driver.first_name }}</td>
-                  <td>{{ driver.last_name }}</td>
-                  <td>{{ driver.email }}</td>
+                  <td class="hide-on-small-only">{{ driver.first_name }} {{ driver.last_name }}</td>
+                  <td class="hide-on-small-only">{{ driver.email }}</td>
+                  <td class="show-on-small">
+                    <div><strong>Name:</strong> {{ driver.first_name }} {{ driver.last_name }}</div>
+                    <div><strong>Email:</strong> {{ driver.email }}</div>
+                  </td>
                   <td class="right-align">
-                      <a href="{% url 'driver_details' driver.id %}" class="btn orange">Edit</a>
-                      <a href="{% url 'driver_summary' driver.id %}" class="btn blue">View</a>
+                    <div class="row no-margin">
+                      <div class="col s12 m6 l3 push-l6">
+                        <a href="{% url 'driver_details' driver.id %}" class="btn btn-block orange">Edit</a>
+                      </div>
+                      <div class="col s12 m6 l3 push-l6">
+                        <a href="{% url 'driver_summary' driver.id %}" class="btn btn-block blue">View</a>
+                      </div>
+                    </div>
                   </td>
               </tr>
           {% empty %}
-              <tr><td colspan="4">No drivers yet.</td></tr>
+              <tr><td colspan="4">No vendors yet.</td></tr>
           {% endfor %}
       </tbody>
   </table>       
diff --git a/app/dispatch/templates/dispatch/drivers/summary.html b/app/dispatch/templates/dispatch/drivers/summary.html
index 55d0854..a7a87bd 100644
--- a/app/dispatch/templates/dispatch/drivers/summary.html
+++ b/app/dispatch/templates/dispatch/drivers/summary.html
@@ -6,7 +6,14 @@
 <div class="row">
     <div class="col s12">
         <h1>Summary for {{ object.first_name }} {{ object.last_name }}</h1>
-        <h2>Loads for {{week_dates.start_date|date:"l, F, d"}} to {{week_dates.end_date|date:"l, F, d"}}</h2>
+        <h2>
+            <span class="hide-on-small-only">
+                Loads for {{week_dates.start_date|date:"l, F, d"}} to {{week_dates.end_date|date:"l, F, d"}}
+            </span>
+            <span class="show-on-small" style="font-size: 24px;">
+                Loads for {{week_dates.start_date|date:"D, M d"}} to {{week_dates.end_date|date:"D, M d"}}
+            </span>
+        </h2>
     </div>
 </div>
 
@@ -16,12 +23,12 @@
   <div class="col s12">
     <div class="right-align">
       {% if request.user.is_superuser %}
-      <a class="btn blue" href="{% url 'driver_download' object.id %}?date={{week_dates.start_date|date:"m/d/Y"}}">Download Paperwork</a>
+      <a class="btn btn-block-sm blue" href="{% url 'driver_download' object.id %}?date={{week_dates.start_date|date:"m/d/Y"}}">Download Paperwork</a>
       {% endif %}
       {% if can_invoice  %}
-      <a class="btn orange" href="{% url 'invoice_generate' object.pk%}?date={{week_dates.start_date|date:"m/d/Y"}}">Generate Invoice For Listing</a>
+      <a class="btn btn-block-sm orange" href="{% url 'invoice_generate' object.pk%}?date={{week_dates.start_date|date:"m/d/Y"}}">Generate Invoice For Listing</a>
       {% else %}
-      <a class="btn orange disabled">Generate Invoice For Listing</a>
+      <a class="btn btn-block-sm orange disabled">Generate Invoice For Listing</a>
       {% endif %}
     </div>
   </div>
@@ -136,10 +143,10 @@
 
 <div class="row">
     <div class="col s6 left-align">
-        <a href="{% url 'driver_summary' object.id %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons left">arrow_back</i> Prev</a>
+        <a href="{% url 'driver_summary' object.id %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons left">arrow_back</i> Prev</a>
     </div>
     <div class="col s6 right-align">
-        <a href="{% url 'driver_summary' object.id %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons right">arrow_forward</i>  Next</a>
+        <a href="{% url 'driver_summary' object.id %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons right">arrow_forward</i>  Next</a>
     </div>
 </div>
 
diff --git a/app/dispatch/templates/dispatch/generic_load_listing.html b/app/dispatch/templates/dispatch/generic_load_listing.html
index 152c7d9..0e73124 100644
--- a/app/dispatch/templates/dispatch/generic_load_listing.html
+++ b/app/dispatch/templates/dispatch/generic_load_listing.html
@@ -1,11 +1,11 @@
 {% load dynamic_key %}
 {% for date in loads %}
 
-<div class="row">
+<div class="row loads-container">
   <div class="col s12 card">
     <div class="card-content">
       <span class="card-title">{{date|date:"l F d"}}</span>
-      <table class="striped bordered">
+      <table class="striped bordered hide-on-small-only">
         <thead>
           <tr>
             {% for heading in load_headers %}
@@ -89,6 +89,71 @@
           {% endfor %}
         </tbody>
       </table>
+      <table class="striped bordered show-on-small">
+        <tbody>
+          {% for load in loads|keyvalue:date %}
+            {% if load.amount <= 2 %}
+              <tr class="red lighten-4">
+            {% elif load.paperwork_set.all|length <= 0 %}
+              <tr class="orange lighten-4">
+            {% elif load.has_related_paid_invoices %}
+              <tr>
+            {% else %}
+              <tr class="green lighten-4">
+            {% endif %}
+
+            <td>
+              {% if "Customer" in load_headers %}
+                {% if request.user.is_superuser %}
+                  {% if request.GET.date %}
+                    <div><strong>Customer:</strong> <a href="{% url 'customer_detail' load.customer.id %}?date={{request.GET.date}}">{{ load.customer.name }}</a></div>
+                  {% else %}
+                    <div><strong>Customer:</strong> <a href="{% url 'customer_detail' load.customer.id %}">{{ load.customer.name }}</a></div>
+                  {% endif %}
+                {% else %}
+                  <div><strong>Customer:</strong> {{ load.customer.name }}
+                {% endif %}
+              {% endif %}
+
+              {% if "Driver" in load_headers or "Vendor" in load_headers or "Vendor/Driver" in load_headers %}
+                {% if request.GET.date %}
+                  <div><strong>Vendor: </strong><a href="{% url 'driver_summary' load.user.id %}?date={{request.GET.date}}">{{ load.user.first_name }} {{ load.user.last_name }}</a></div>
+                {% else %}
+                  <div><strong>Vendor: </strong><a href="{% url 'driver_summary' load.user.id %}">{{ load.user.first_name }} {{ load.user.last_name }}</a></div>
+                {% endif %}
+              {% endif %}
+
+              {% if "Amount" in load_headers %}
+                {% if load.amount == 0 %}
+                  <div><strong>Amount:</strong> <b><span class="red-text">{{ load.amount }}</span></b></div>
+                {% else %}
+                  <div><strong>Amount:</strong> {{ load.amount }}</div>
+                {% endif %}
+              {% endif %}
+
+              {% if "Description" in load_headers %}
+                <div><strong>Description:</strong> {{ load.description }}</div>
+              {% endif %}
+
+              {% if "Attachments" in load_headers %}
+                {% if load.paperwork_set.all %}
+                   <div><strong>Attachments:</strong> {{load.paperwork_set.all|length}}</div>
+                {% else %}
+                  <div><strong>Attachments:</strong> <b><span class="red-text">0</span></b></div>
+                {% endif %}
+              {% endif %}
+            </td>
+
+
+            <td class="right-align">
+              <a href="{% url 'load_detail' load.id %}" class="btn blue">View</a>
+            </td>
+          </tr>
+          {% empty %}
+          <tr class="yellow lighten-4"><td colspan="5">No loads.</td></tr>
+          {% endfor %}
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
diff --git a/app/dispatch/templates/dispatch/identity/create.html b/app/dispatch/templates/dispatch/identity/create.html
index ab7b805..9af7f43 100644
--- a/app/dispatch/templates/dispatch/identity/create.html
+++ b/app/dispatch/templates/dispatch/identity/create.html
@@ -18,6 +18,6 @@
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn green" value="Save" />
+    <input type="submit" class="btn btn-block-sm green" value="Save" />
 </form>
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/identity/edit.html b/app/dispatch/templates/dispatch/identity/edit.html
index a48a8d1..e987b1e 100644
--- a/app/dispatch/templates/dispatch/identity/edit.html
+++ b/app/dispatch/templates/dispatch/identity/edit.html
@@ -13,6 +13,6 @@
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn blue" value="Update" />
+    <input type="submit" class="btn btn-block-sm blue" value="Update" />
 </form>
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/invite_user.html b/app/dispatch/templates/dispatch/invite_user.html
index 86dab40..0e4e226 100644
--- a/app/dispatch/templates/dispatch/invite_user.html
+++ b/app/dispatch/templates/dispatch/invite_user.html
@@ -14,7 +14,7 @@
       {{field.label_tag}} {{field}}
       </p>
       {% endfor %}
-      <input type="submit" class="btn blue" value="Update" />
+      <input type="submit" class="btn btn-block-sm blue" value="Update" />
     </form>
 
   </div>
diff --git a/app/dispatch/templates/dispatch/invoice/detail.html b/app/dispatch/templates/dispatch/invoice/detail.html
index a16b8a3..a84102f 100644
--- a/app/dispatch/templates/dispatch/invoice/detail.html
+++ b/app/dispatch/templates/dispatch/invoice/detail.html
@@ -8,23 +8,24 @@
       <h1>Invoice for {{object.invoice_date}} by <a href="{% url 'driver_summary' object.user.pk %}">{{object.owner}}</a></h1>
     </div>
     <div class="col s12 m6">
+      <br class="show-on-small" />
       <div class="right-align">
         <form action="{% url 'invoice_delete' object.pk %}" id="invoice_delete" method="POST">
           <!-- <input type="submit" class="btn red" value="Delete" /> -->
           {% csrf_token %}
-          <a class="btn red" href="#" onClick="warn_submit('Are you sure?', '#invoice_delete')">Delete</a>
+          <a class="btn btn-block-sm red" href="#" onClick="warn_submit('Are you sure?', '#invoice_delete')">Delete</a>
           {% if request.user.is_superuser %}
-          <a class="btn orange darken-3" href="{% url 'invoice_edit' object.pk %}">Edit</a>
+          <a class="btn btn-block-sm orange darken-3" href="{% url 'invoice_edit' object.pk %}">Edit</a>
           {% endif %}
-          <a class="btn green" href="#" onClick="window.print()">Print</a>
+          <a class="btn btn-block-sm green" href="#" onClick="window.print()">Print</a>
         </form>
       </div>
     </div>
 </div>
 
-<div style="padding-top:30px;" class="hide-print"></div>
+<div style="padding-top:30px;" class="hide-print hide-on-small-only"></div>
 
-<div style="padding-top:30px;" class="hide-print"></div>
+<div style="padding-top:30px;" class="hide-print hide-on-small-only"></div>
 
 <div class="z-depth-3 padding-30">
 {% include "dispatch/invoice/detail-table.html" %}
@@ -37,11 +38,11 @@
       <form action="{% url 'invoice_delete' object.pk %}" id="invoice_delete" method="POST">
         <!-- <input type="submit" class="btn red" value="Delete" /> -->
         {% csrf_token %}
-        <a class="btn red" href="#" onClick="warn_submit('Are you sure?', '#invoice_delete')">Delete</a>
+        <a class="btn btn-block-sm red" href="#" onClick="warn_submit('Are you sure?', '#invoice_delete')">Delete</a>
         {% if request.user.is_superuser %}
-        <a class="btn orange darken-3" href="{% url 'invoice_edit' object.pk %}">Edit</a>
+        <a class="btn btn-block-sm orange darken-3" href="{% url 'invoice_edit' object.pk %}">Edit</a>
         {% endif %}
-        <a class="btn green" href="#" onClick="window.print()">Print</a>
+        <a class="btn btn-block-sm green" href="#" onClick="window.print()">Print</a>
       </form>
     </div>
   </div>
diff --git a/app/dispatch/templates/dispatch/invoice/edit.html b/app/dispatch/templates/dispatch/invoice/edit.html
index c056ed9..88da6eb 100644
--- a/app/dispatch/templates/dispatch/invoice/edit.html
+++ b/app/dispatch/templates/dispatch/invoice/edit.html
@@ -15,7 +15,7 @@
     {{field.label_tag}} {{field}}
     </p>
   {% endfor %}
-    <input type="submit" class="btn blue" value="Update" />
+    <input type="submit" class="btn btn-block-sm blue" value="Update" />
 </form>
 
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/invoice/list.html b/app/dispatch/templates/dispatch/invoice/list.html
index d30c8d8..1b31a41 100644
--- a/app/dispatch/templates/dispatch/invoice/list.html
+++ b/app/dispatch/templates/dispatch/invoice/list.html
@@ -13,9 +13,9 @@
   <div class="col s12">
     <div class="right-align">
       {% if request.GET.paid == '1' %}
-      <a class="btn orange" href="?paid=0">Show Unpaid Invoices</a>
+      <a class="btn btn-block-sm orange" href="?paid=0">Show Unpaid Invoices</a>
       {% else %}
-      <a class="btn green" href="?paid=1">Show Paid Invoices</a>
+      <a class="btn btn-block-sm green" href="?paid=1">Show Paid Invoices</a>
       {% endif %}
     </div>
   </div>
@@ -27,13 +27,14 @@
       <thead>
           <tr>
             <!-- <th>User</th> -->
-              <th>Owner</th>
-              <th>Bill To</th>
-              <th>Invoice ID</th>
-              <th>Invoice Date</th>
-              <th>Due Date</th>
-              <th>Amount</th>
-              <th>Paid</th>
+              <th class="hide-on-med-and-down">Owner</th>
+              <th class="hide-on-med-and-down">Bill To</th>
+              <th class="hide-on-med-and-down">Invoice ID</th>
+              <th class="hide-on-med-and-down">Invoice Date</th>
+              <th class="hide-on-med-and-down">Due Date</th>
+              <th class="show-on-medium-and-down">Invoice Details</th>
+              <th class="hide-on-small-only">Amount</th>
+              <th class="hide-on-small-only">Paid</th>
               <th></th>
           </tr>
       </thead>
@@ -41,25 +42,27 @@
         {% for invoice in object_list %}
         <tr>
           <!-- <td>{{invoice.user}}</td> -->
-          <td>{{invoice.owner}}</td>
-          <td>{{invoice.bill_to}}</td>
-          <td>{{invoice.invoice_id}}</td>
-          <td>{{invoice.invoice_date}}</td>
-          <td>{{invoice.due_date}}</td>
-          <td>{{invoice.total}}</td>
-          <td>{{invoice.paid}}</td>
+          <td class="hide-on-med-and-down">{{invoice.owner}}</td>
+          <td class="hide-on-med-and-down">{{invoice.bill_to}}</td>
+          <td class="hide-on-med-and-down">{{invoice.invoice_id}}</td>
+          <td class="hide-on-med-and-down">{{invoice.invoice_date}}</td>
+          <td class="hide-on-med-and-down">{{invoice.due_date}}</td>
+          <td class="show-on-medium-and-down">
+            <div><strong>Owner:</strong> {{invoice.owner}}</div>
+            <div><strong>Bill To</strong> {{invoice.bill_to}}</div>
+            <div><strong>Invoice ID</strong> {{invoice.invoice_id}}</div>
+            <div><strong>Invoice Date</strong> {{invoice.invoice_date}}</div>
+            <div><strong>Due Date</strong> {{invoice.due_date}}</div>
+            <div class="show-on-small"><strong>Amount</strong> {{invoice.total}}</div>
+            <div class="show-on-small"><strong>Paid</strong> {{invoice.paid}}</div>
+          </td>
+          <td class="hide-on-small-only">{{invoice.total}}</td>
+          <td class="hide-on-small-only">{{invoice.paid}}</td>
           <td><a class="btn green" href="{% url 'invoice_detail' invoice.pk %}">View</a></td>
         </tr>
         {% empty %}
         <tr>
-          <td>No Invoices Found</td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
+          <td colspan="8">No Invoices Found</td>
         </tr>
         {% endfor %}
   
diff --git a/app/dispatch/templates/dispatch/loads/create.html b/app/dispatch/templates/dispatch/loads/create.html
index cf12440..5f03ab8 100644
--- a/app/dispatch/templates/dispatch/loads/create.html
+++ b/app/dispatch/templates/dispatch/loads/create.html
@@ -11,7 +11,7 @@
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn green" value="Save" />
+    <input type="submit" class="btn btn-block-sm green" value="Save" />
 </form>
 
 <div class="row" style="padding-top: 50px">
diff --git a/app/dispatch/templates/dispatch/loads/detail.html b/app/dispatch/templates/dispatch/loads/detail.html
index 6cdbae0..977ff46 100644
--- a/app/dispatch/templates/dispatch/loads/detail.html
+++ b/app/dispatch/templates/dispatch/loads/detail.html
@@ -5,11 +5,11 @@
 {% block content %}
 {% load dynamic_key %}
 <div class="row">
-    <div class="col s6">
+    <div class="col s12 m7 l9">
         <h1>Details for {{object.description}}</h1>
     </div>
-    <div class="col s6">
-      <div class="right-align">
+    <div class="col s12 m5 l3">
+      <div class="right-align hide-on-small-only">
         {% if request.user.is_superuser %}
         <form action="{% url 'load_delete' object.id %}" id="load_delete" method="POST">
         {% csrf_token %}
@@ -20,6 +20,25 @@
           <a class="btn blue" href="{% url 'load_edit' object.id %}">Edit</a>
         {% endif %}
       </div>
+      <div class="show-on-small">
+        <br />
+        {% if request.user.is_superuser %}
+            <div class="row">
+              <div class="col s6">
+                <a class="btn btn-block red" href="#" onClick="warn_submit('Are you sure?\nThis cannot be undone!', '#load_delete')">Delete</a>
+              </div>
+              <div class="col s6">
+                <a class="btn btn-block blue" href="{% url 'load_edit' object.id %}">Edit</a>
+              </div>
+            </div>
+        {% else %}
+          <div class="row">
+            <div class="col s6">
+              <a class="btn btn-block blue" href="{% url 'load_edit' object.id %}">Edit</a>
+            </div>
+          </div>
+        {% endif %}
+      </div>
     </div>
 </div>
 
@@ -66,15 +85,16 @@
 
 
     <div class="row">
-      <div class="col s6">
-        <h4>Attached Files:</h4>
-      </div>
-        <div class="col s6">
+        <div class="col s12 m6 push-m6">
           <h4></h4>
           <div class="right-align">
-            <a class="btn blue" href="{% url 'paperwork_upload' object.id %}">Upload</a>
+            <a class="btn blue hide-on-small-only" href="{% url 'paperwork_upload' object.id %}">Upload</a>
+            <a class="btn blue btn-block show-on-small" href="{% url 'paperwork_upload' object.id %}">Upload File</a>
           </div>
         </div>
+      <div class="col s12 m6 pull-m6">
+        <h4>Attached Files:</h4>
+      </div>
       </div>
 
 
@@ -88,12 +108,12 @@
             <tbody>
               {% for p in paperwork_list %}
               <tr>
-                <td>{{p}}</td>
+                <td class="half">{{p}}</td>
                 <td class="right-align">
                   <form action="{% url 'paperwork_delete' object.id p.id %}" id="attach_delete_{{p.pk}}" method="GET">
-                    <a class="btn red" href="#" onClick="warn_submit('Are you sure?', '#attach_delete_{{p.pk}}')">Delete</a>
+                    <a class="btn btn-block-sm red" href="#" onClick="warn_submit('Are you sure?', '#attach_delete_{{p.pk}}')">Delete</a>
                     <!-- <a class="btn green" target="_blank" href="{{p.document.url}}">Download</a> -->
-                    <a class="btn green" href="{% url 'paperwork_download' load.id p.id %}">Download</a>
+                    <a class="btn btn-block-sm green" href="{% url 'paperwork_download' load.id p.id %}">Download</a>
                   </form>
                 </td>
               </tr>
diff --git a/app/dispatch/templates/dispatch/loads/edit.html b/app/dispatch/templates/dispatch/loads/edit.html
index 3049fb6..3074eb7 100644
--- a/app/dispatch/templates/dispatch/loads/edit.html
+++ b/app/dispatch/templates/dispatch/loads/edit.html
@@ -11,7 +11,7 @@
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn blue" value="Update" />
+    <input type="submit" class="btn btn-block-sm blue" value="Update" />
 </form>
 
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/loads/list.html b/app/dispatch/templates/dispatch/loads/list.html
index 7171fe1..cd39ca9 100644
--- a/app/dispatch/templates/dispatch/loads/list.html
+++ b/app/dispatch/templates/dispatch/loads/list.html
@@ -7,19 +7,27 @@
 
 <div class="row">
     <div class="col s12 m9">
-        <h1>Loads for {{week_dates.start_date|date:"l, F, d"}} to {{week_dates.end_date|date:"l, F, d"}}</h1>
+        <h1>
+            <span class="hide-on-small-only">
+                Loads for {{week_dates.start_date|date:"l, F, d"}} to {{week_dates.end_date|date:"l, F, d"}}
+            </span>
+            <span class="show-on-small" style="font-size: 24px;">
+                Loads for {{week_dates.start_date|date:"D, M d"}} to {{week_dates.end_date|date:"D, M d"}}
+            </span>
+        </h1>
+        <br class="show-on-small" />
     </div>
     <div class="col s12 m3 right-align">
-        <a href="{% url 'load_new' %}" class="btn green">Add Load</a>
+        <a href="{% url 'load_new' %}" class="btn btn-block-sm green">Add Load</a>
     </div>
 </div>
 
 <div class="row">
     <div class="col s6 left-align">
-        <a href="{% url 'load_list' %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons left">arrow_back</i> Prev</a>
+        <a href="{% url 'load_list' %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons left">arrow_back</i> Prev</a>
     </div>
     <div class="col s6 right-align">
-        <a href="{% url 'load_list' %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons right">arrow_forward</i>  Next</a>
+        <a href="{% url 'load_list' %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons right">arrow_forward</i>  Next</a>
     </div>
 </div>
 
@@ -30,13 +38,13 @@
 {% listForCommaString "Customer,Amount,Description,Attachments" as load_headers %}
 {% endif %}
 {% include "dispatch/generic_load_listing.html" %}
-
+<br />
 <div class="row">
     <div class="col s6 left-align">
-        <a href="{% url 'load_list' %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons left">arrow_back</i> Prev</a>
+        <a href="{% url 'load_list' %}?date={{week_dates.previous_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons left">arrow_back</i> Prev</a>
     </div>
     <div class="col s6 right-align">
-        <a href="{% url 'load_list' %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn blue"><i class="material-icons right">arrow_forward</i>  Next</a>
+        <a href="{% url 'load_list' %}?date={{week_dates.next_week|date:"m/d/Y"}}" class="btn btn-block-sm blue"><i class="material-icons right">arrow_forward</i>  Next</a>
     </div>
 </div>
 
diff --git a/app/dispatch/templates/dispatch/paperwork/add.html b/app/dispatch/templates/dispatch/paperwork/add.html
index d5ec623..1c71ed2 100644
--- a/app/dispatch/templates/dispatch/paperwork/add.html
+++ b/app/dispatch/templates/dispatch/paperwork/add.html
@@ -28,7 +28,7 @@
 <form action="" method="post" enctype="multipart/form-data">{% csrf_token %}
     {{ form.as_p }}
     <div style="padding-top: 30px;"></div>
-    <input type="submit" class="btn blue" value="Upload" />
+    <input type="submit" class="btn btn-block-sm blue" value="Upload" />
 </form>
 
 {% endblock %}
diff --git a/app/dispatch/templates/dispatch/userinvoicenumber/edit.html b/app/dispatch/templates/dispatch/userinvoicenumber/edit.html
index e858d3f..7f087d5 100644
--- a/app/dispatch/templates/dispatch/userinvoicenumber/edit.html
+++ b/app/dispatch/templates/dispatch/userinvoicenumber/edit.html
@@ -13,6 +13,6 @@
 
 <form action="" method="post">{% csrf_token %}
     {{ form.as_p }}
-    <input type="submit" class="btn blue" value="Update" />
+    <input type="submit" class="btn btn-block-sm blue" value="Update" />
 </form>
 {% endblock %}