Merge pull request #111 from dod-ccpo/ui/empty-states

Ui/empty states

atst/ui_modules.py

@@ -46,3 +46,12 @@ class SidenavItem(UIModule):
           active=active,
           icon=icon,
           subnav=subnav)
+
+class EmptyState(UIModule):
+    def render(self, message, actionLabel, actionHref, icon=None):
+        return self.render_string(
+          "components/empty_state.html.to",
+          message=message,
+          actionLabel=actionLabel,
+          actionHref=actionHref,
+          icon=icon)

scss/components/_empty_state.scss

@@ -1,15 +1,27 @@
 .empty-state {
   text-align: center;
-  padding-top: 10rem;
+  padding: 6rem ($gap * 2) 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include media($medium-screen) {
+    padding: 8rem ($gap * 4) 0;
+  }
+
+  .icon {
+     @include icon-size(50);
+     @include icon-color($color-gray-light);
+  }
 
   p {
-    font-family: $font-sans;
+    @include h2;
-    font-weight: 300;
+    line-height: 1.2;
-    line-height: 10rem;
+    max-width: 15em;
-    font-size: 44px;
+    color: $color-gray;
-    line-height: 5rem;
+
-    margin: 0 auto;
+    @include media($large-screen) {
-    padding-bottom: 2rem;
+      @include h1;
-    max-width: 40%;
+    }
   }
 }

templates/components/empty_state.html.to

@@ -0,0 +1,9 @@
+<div class='empty-state'>
+  <p>{{ message }}</p>
+
+  {% if icon %}
+    {% module Icon(icon) %}
+  {% end %}
+
+  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
+</div>

templates/requests.html.to

@@ -31,12 +31,22 @@
 
 {% block content %}
 
+{% if not requests %}
 
-{% module Alert('Pending Financial Verification',
+  {% module EmptyState(
+    'There are currently no active requests for you to see.',
+    actionLabel='Create a new JEDI Cloud Request',
+    actionHref='/requests/new',
+    icon='document'
+  )%}
+
+{% else %}
+
+  {% module Alert('Pending Financial Verification',
     message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
-) %}
+  ) %}
 
-<div class="col col--grow">
+  <div class="col col--grow">
 
     <form class='search-bar'>
       <div class='usa-input search-input'>
@@ -91,7 +101,9 @@
         </tbody>
       </table>
     </div>
-</div>
+  </div>
+
+{% end %}
 
 {% end %}
 

templates/workspace_members.html.to

@@ -2,8 +2,19 @@
 
 {% block workspace_content %}
 
+{% if not members %}
 
-<form class='search-bar'>
+  {% module EmptyState(
+    'There are currently no members in this Workspace.',
+    actionLabel='Invite a new Member',
+    actionHref='/members/new',
+    icon='avatar'
+  )%}
+
+
+{% else %}
+
+  <form class='search-bar'>
     <div class='usa-input search-input'>
       <label for='members-search'>Search members by name</label>
       <input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
@@ -31,40 +42,10 @@
         <option value="">Developer</option>
       </select>
     </div>
-</form>
-
-{# <div class='panel panel__actions'>
-  <div class='row'>
-    <div class='col col--grow col--pad'>
-      <form class="usa-search usa-search-small">
-        <label class="usa-sr-only" for="search-field-small">Search small</label>
-        <input id="search-field-small" type="search" name="search" placeholder="Search by name">
-        <button type="submit">
-          <span class="usa-sr-only">Search</span>
-        </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 class='col col--grow col--pad'>
-      <select id="filter_role" name="filter_role" required="">
-        <option value="" selected disabled>Filter by role</option>
-        <option value="">Admin</option>
-        <option value="">CCPO</option>
-        <option value="">Developer</option>
-      </select>
-    </div>
-  </div>
-</div> #}
 
 
-<div class='responsive-table-wrapper'>
+  <div class='responsive-table-wrapper'>
     <table>
       <thead>
         <tr>
@@ -85,8 +66,9 @@
         {% end %}
       </tbody>
     </table>
-</div>
+  </div>
 
+{% end %}
 
 
 {% end %}

templates/workspace_projects.html.to

@@ -2,7 +2,18 @@
 
 {% block workspace_content %}
 
-{% for project in projects %}
+{% if not projects %}
+
+  {% module EmptyState(
+    'There are currently no projects set up for this Workspace.',
+    actionLabel='Create a new Project',
+    actionHref='/project/new',
+    icon='cloud'
+  )%}
+
+{% else %}
+
+  {% for project in projects %}
     <div class='block-list project-list-item'>
       <header class='block-list__header'>
         <h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
@@ -27,6 +38,8 @@
         {% end %}
       </ul>
     </div>
+  {% end %}
+
 {% end %}
 
 {% end %}