Merge pull request #92 from dod-ccpo/ui/responsive-tables

Assorted table and layout fixes

scss/components/_global_navigation.scss

@@ -4,7 +4,7 @@
   .sidenav__link {
     padding-right: $gap;
 
-    @include media($medium-screen) {
+    @include media($large-screen) {
       padding-right: $gap * 2;
     }
   }
@@ -12,7 +12,7 @@
   .sidenav__link-label {
     @include hide;
 
-    @include media($medium-screen) {
+    @include media($large-screen) {
       @include unhide;
       padding-left: $gap;
     }

scss/components/_layout.scss

@@ -26,7 +26,7 @@ body {
   .global-panel-container {
     margin: $gap;
     max-width: $site-max-width;
-    overflow: auto;
+    overflow-x: hidden;
 
     @include media($medium-screen) {
       margin: $gap * 2;

scss/elements/_tables.scss

@@ -39,5 +39,42 @@
     .table-cell--expand {
       width: 100%;
     }
+
+    .table-cell--hide-small {
+      display: none;
+
+      @include media($medium-screen) {
+        display: table-cell;
+      }
+    }
+  }
+
+  @at-root .panel #{&} {
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.responsive-table-wrapper {
+  overflow-x: auto;
+  @include panel-margin;
+
+  table {
+    margin-bottom: 0;
+  }
+
+  @at-root .panel #{&} {
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }

templates/requests.html.to

@@ -20,36 +20,28 @@
           </button>
         </form>
       </div>
-      <div class='col col--grow col--pad'>
-        <select id="filter_status" name="filter_status" required="">
-          <option value="" selected disabled>Filter by status</option>
-          <option value="">Active</option>
-          <option value="">Pending</option>
-          <option value="">Denied</option>
-        </select>
-      </div>
     </div>
   </div>
   
   <div class="panel">
-
+    <div class='responsive-table-wrapper'>
       <table>
         <thead>
           <tr>
-          <th>Order ID</th>
+            <th scope="col">Order ID</th>
-          <th>Request Date</th>
+            <th scope="col">Request Date</th>
-          <th>Requester</th>
+            <th scope="col">Requester</th>
-          <th>Total Apps</th>
+            <th scope="col">Total Apps</th>
-          <th>Status</th>
+            <th scope="col">Status</th>
-          <th>Actions</th>
+            <th scope="col">Actions</th>
           </tr>
         </thead>
         <tbody>
           {% for r in requests %}
           <tr>
-          <td><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
+            <th scope="row"><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
               {% if r['is_new'] %}<span class="usa-label">New</span>
-          </td>
+            </th>
             {% end %}
             <td>{{ r['date'] }}</td>
             <td>{{ r['full_name'] }}</td>
@@ -61,6 +53,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </div>
 
 {% end %}

templates/styleguide.html.to

@@ -175,11 +175,12 @@
     </ul>
   </section>
 
-  <table class='col--grow'>
+  <div class='responsive-table-wrapper'>
+    <table>
       <thead>
         <tr>
           <th class='table-cell--expand'>Expanded Column</th>
-        <th>Normal Column</th>
+          <th class='table-cell--hide-small'>Hidden on Small</th>
           <th class='table-cell--align-right'>Right Aligned</th>
           <th class='table-cell--shrink'>Shrunk</th>
         </tr>
@@ -188,26 +189,27 @@
       <tbody>
         <tr>
           <td class='table-cell--expand'>Table Cell</td>
-        <td>Table Cell</td>
+          <td class='table-cell--hide-small'>Table Cell</td>
           <td class='table-cell--align-right'>1,234.56</td>
           <td class='table-cell--shrink'>Table Cell</td>
         </tr>
 
         <tr>
           <td class='table-cell--expand'>Table Cell</td>
-        <td>Table Cell</td>
+          <td class='table-cell--hide-small'>Table Cell</td>
           <td class='table-cell--align-right'>1,231,253.43</td>
           <td class='table-cell--shrink'>Table Cell</td>
         </tr>
 
         <tr>
           <td class='table-cell--expand'>Table Cell</td>
-        <td>Table Cell</td>
+          <td class='table-cell--hide-small'>Table Cell</td>
           <td class='table-cell--align-right'>564.54</td>
           <td class='table-cell--shrink'>Table Cell</td>
         </tr>
       </tbody>
     </table>
+  </div>
 
   <div class='action-group'>
     <a href='/styleguide' class='action-group__action usa-button usa-button-big'>Action Group Button</a>