Merge pull request #385 from cisagov/ik/style-dashboard-edits

Dashboard style edits

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -19,7 +19,8 @@ i.e.
 @include u-padding-right('05');
 ----------------------------------------
 */
-// USWDS tokens are a bit too coarse in their letter-spacing steps
+
+// Finer grained letterspacing adjustments
 $letter-space--xs: .0125em; 
 
 @use "uswds-core" as *;
@@ -37,6 +38,7 @@ $letter-space--xs: .0125em;
  h1 {
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
+  color: color('primary-darker');
  }
 
  h2 {
@@ -56,13 +58,15 @@ $letter-space--xs: .0125em;
   margin-bottom: 0;
 }
 
-.register-form-step p {
+.register-form-step p,
+.dashboard p {
   @include typeset('sans', 'sm', 5);
   max-width: measure(5);
 
-  &:last-of-type {
+  //TODO: Revisit
-    margin-bottom: 0;
+  // &:last-of-type {
-  }
+  //   margin-bottom: 0;
+  // }
 }
 
 .register-form-step a {
@@ -114,25 +118,117 @@ a.breadcrumb__back {
   font-weight: font-weight('semibold');
 }
 
+
+/** ---- DASHBOARD ---- */
+
+#wrapper.dashboard {
+  background-color: color('primary-lightest');
+}
+
 section.dashboard {
   background-color: color('white');
   border: 1px solid color('base-lighter');
   border-radius: 4px;
   padding: 0 units(2) units(3);
-  margin-top: units(5);
+  margin-top: units(3);
 
   h2 {
-    padding-bottom: units(3);
+    margin-bottom: units(2);
   }
 
   p {
     margin-bottom: 0;
   }
+
+  .usa-table {
+    width: 100%;
+
+    a {
+      display: flex;
+      align-items: flex-start;
+      color: color('primary');
+
+      &:visited {
+        color: color('primary');
+      }
+      .usa-icon {
+        // align icon with x height
+        margin-top: units(0.5);
+        margin-right: units(0.5);
+      }
+    }
+  }
+
+  // Table on small mobile
+  .usa-table--stacked {
+    td, th {
+      padding: units(1) units(2) units(2px) 0;
+      border: none;
+    }
+
+    tr:first-child th:first-child {
+      border-top: none;
+    }
+
+    tr {
+      border-bottom: none;
+      border-top: 2px solid color('base-light');
+      margin-top: units(2);
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    td[data-label]:before, 
+    th[data-label]:before {
+      color: color('primary-darker');
+      padding-bottom: units(2px);
+    }
+  }
+  
+  @include at-media(mobile-lg) {
+    margin-top: units(5);
+
+    h2 {
+      margin-bottom: units(3);
+    }
+
+    .usa-table tr {
+      border: none;
+    }
+
+    .usa-table {
+      td, th {
+        border-bottom: 1px solid color('base-light');
+      }
+
+      thead th {
+        color: color('primary-darker');
+        border-bottom: 2px solid color('base-light');
+      }
+
+      tbody tr:last-of-type {
+        td, th {
+          border-bottom: 0;
+        }
+      }
+
+      td, th {
+        padding: units(2);
+      }
+
+      th:first-of-type {
+        padding-left: 0;
+      }
+
+      thead tr:first-child th:first-child {
+        border-top: none;
+      }
+    }
+  }
 }
 
-#wrapper.dashboard {
-  background-color: color('primary-lightest');
-}
 
 main {
   //Workaround because USWDS units jump from 10 to 15

src/registrar/assets/sass/_theme/_uswds-theme.scss

@@ -94,6 +94,8 @@ in the form $setting: value,
   $theme-color-accent-cool: $dhs-light-blue-60,
   $theme-color-accent-cool-dark: $dhs-light-blue-70,
   $theme-color-accent-cool-light: $dhs-light-blue-40,
+  $theme-color-accent-cool-lighter: $dhs-light-blue-30,
+  $theme-color-accent-cool-lightest: $dhs-light-blue-15,
 
   /*---------------------------
   ## Error state
@@ -119,4 +121,14 @@ in the form $setting: value,
   ----------------------------*/ 
   $theme-input-line-height: 5,
 
+
+  /*---------------------------
+  # Component settings 
+  ----------------------------- 
+  ## Sorted Table
+  ----------------------------*/ 
+  $theme-table-sorted-header-background-color: "accent-cool-lighter",
+  $theme-table-sorted-background-color: "accent-cool-lightest",
+  $theme-table-sorted-icon-color: "primary-darker",
+  $theme-table-unsorted-icon-color: "primary",
 );

src/registrar/templates/home.html

@@ -6,59 +6,59 @@
 
 {% block content %}
 <main id="main-content" class="grid-container">
-
 {% if user.is_authenticated %}
 {# complete logged in page together here #}
 
-<h1>Manage your domains</h2>
+<div class="tablet:grid-offset-1 desktop:grid-offset-2">
+  <h1>Manage your domains</h2>
 
-<p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
+  <p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
 
-<section class="dashboard">
+  <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
     <h2>Registered domains</h2>
     {% if domains %}
       {% for domain in domains %}
       {{ domain }}
       {% endfor %}
     {% else %}
-		You don't have any registered domains yet
+      <p>You don't have any registered domains yet</p>
     {% endif %}
-</section>
+  </section>
 
-<section class="dashboard">
+  <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
     <h2>Active domain requests</h2>
     {% if domain_applications %}
-  <table class="usa-table usa-table--borderless">
+    <table class="usa-table usa-table--borderless usa-table--stacked">
       <caption class="sr-only">Your domain applications</caption>
       <thead>
         <tr>
           <th data-sortable scope="col" role="columnheader">Domain name</th>
           <th data-sortable scope="col" role="columnheader">Date created</th>
           <th data-sortable scope="col" role="columnheader">Status</th>
-    <th></th>
+          <th role="columnheader"><span class="usa-sr-only">Action</span></th>
         </tr>
       </thead>
       <tbody>
         {% for application in domain_applications %}
         <tr>
-      <th th scope="row" role="rowheader">
+          <th th scope="row" role="rowheader" data-label="Domain name">
             {{ application.requested_domain.name|default:"New domain request" }}
           </th>
-      <td data-sort-value="{{ application.created_at|date:"U" }}">{{ application.created_at|date }}</td>
+          <td data-sort-value="{{ application.created_at|date:"U" }}" data-label="Date created">{{ application.created_at|date }}</td>
-      <td>{{ application.status|title }}</td>
+          <td data-label="Status">{{ application.status|title }}</td>
           <td>
             <a href="{% url 'edit-application' application.pk %}">
               {% if application.status == "started" %}
               <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
                 <use xlink:href="{%static 'img/sprite.svg'%}#edit"></use>
               </svg>
-		  Edit
+              Edit <span class="usa-sr-only">{{application.requested_domain.name}} </span>
 
               {% else %}
               <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
                 <use xlink:href="{%static 'img/sprite.svg'%}#settings"></use>
               </svg>
-		  Manage
+              Manage <span class="usa-sr-only">{{application.requested_domain.name}} </span>
               {% endif %}
             </a>
           </td>
@@ -69,11 +69,10 @@
     {% else %}
     <p>You don't have any active domain requests right now</p> 
     {% endif %}
+    <p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
+  </section>
 
-<p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
+  <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
-</section>
-
-<section class="dashboard">
     <h2>Archived domains</h2>
     {% if archived_domains %}
     {% for domain in archived_domains %}
@@ -82,14 +81,17 @@
     {% else %}
     <p>You don't have any archived domains</p> 
     {% endif %}
-</section>
+  </section>
 
-<h2 class="padding-top-3"> Export domains</h2>
+  <section class="tablet:grid-col-11 desktop:grid-col-10">
-<p>If you would like to analyze your list of domains further, you can download the list of domains and their statuses as csv file</p>
+    <h2 class="padding-top-1 mobile-lg:padding-top-3"> Export domains</h2>
-<a href="{% url 'todo' %}" class="usa-button usa-button--outline">
+    <p>If you would like to analyze your list of domains further, you can download the list of domains and their statuses as csv file</p>
+    <a href="{% url 'todo' %}" class="usa-button usa-button--outline">
       Export domains as csv
-</a>
+    </a>
+  </section>
 
+</div>
 
 {% else %} {# not user.is_authenticated #}
 {# complete logged out page here #}