Merge pull request #42 from GSA-TTS/frontend-cleanup

Solidifying frontend
GSA-TTS · Mar 8, 2024 · 493bf9b · 493bf9b
2 parents 24eacc3 + 75aff55
commit 493bf9b
Show file tree

Hide file tree

Showing 16 changed files with 240 additions and 179 deletions.
diff --git a/nad_ch/controllers/web/package-lock.json b/nad_ch/controllers/web/package-lock.json
diff --git a/nad_ch/controllers/web/package.json b/nad_ch/controllers/web/package.json
@@ -9,9 +9,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@uswds/uswds": "3.7.1"
+    "@uswds/uswds": "3.7.1",
+    "alpinejs": "^3.13.6"
   },
   "devDependencies": {
+    "@types/alpinejs": "^3.13.6",
     "css-loader": "^6.10.0",
     "mini-css-extract-plugin": "^2.8.0",
     "node-sass": "^9.0.0",

diff --git a/nad_ch/controllers/web/routes/data_submissions.py b/nad_ch/controllers/web/routes/data_submissions.py
@@ -23,7 +23,7 @@ def home():
 @login_required
 def reports():
     # For demo purposes, hard-code the producer name
-    view_model = list_data_submissions_by_producer(g.ctx, "NJ")
+    view_model = list_data_submissions_by_producer(g.ctx, "New Jersey")
     return render_template("data_submissions/index.html", submissions=view_model)
 
 

diff --git a/nad_ch/controllers/web/sass/components/_usa-header.scss b/nad_ch/controllers/web/sass/components/_usa-header.scss
@@ -0,0 +1,7 @@
+.usa-header {
+  border-bottom: 2px solid #dfe1e2;
+
+  .usa-logo {
+    font-size: 40px;
+  }
+}
diff --git a/nad_ch/controllers/web/sass/components/_usa-nav.scss b/nad_ch/controllers/web/sass/components/_usa-nav.scss
@@ -20,3 +20,17 @@
     }
   }
 }
+
+.usa-header--basic .usa-navbar {
+  position: relative;
+  width: 100%;
+}
+
+.usa-nav-container {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.usa-accordion__button.usa-nav__link {
+  text-align: center;
+}
diff --git a/nad_ch/controllers/web/sass/components/_usa-sidenav.scss b/nad_ch/controllers/web/sass/components/_usa-sidenav.scss
@@ -1,30 +1,13 @@
 .usa-sidenav {
   background-color: var(--Primary-primary-darker, #162e51);
   border-bottom: none;
-  padding-left: 2em;
+  padding-left: 32px;
   position: fixed;
   top: 0;
   left: 0;
-  padding-right: 2em;
   z-index: 1000;
   overflow-y: auto;
-
-  h3 {
-    color: var(--Base-base-lightest, #f0f0f0);
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-  }
-
-  h6 {
-    color: var(--Primary-primary-lighter, #d9e8f6);
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    letter-spacing: 0.5px;
-  }
+  width: 200px;
 
   li {
     // Default state
@@ -74,7 +57,28 @@
   }
 
   .usa-sidenav__logo {
-    padding-top: 1em;
+    padding: 16px 24px 32px 0;
+
+    // Default hover state
+    &:hover {
+    }
+
+    .logo-bottom {
+      color: var(--Base-base-lightest, #f0f0f0);
+      font-size: 22px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+
+    .logo-top {
+      color: var(--Primary-primary-lighter, #d9e8f6);
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      letter-spacing: 0.5px;
+    }
   }
 
   .usa-sidenav__button {

diff --git a/nad_ch/controllers/web/sass/components/_usa-table.scss b/nad_ch/controllers/web/sass/components/_usa-table.scss
@@ -0,0 +1,6 @@
+.usa-table {
+  tbody th,
+  td {
+    border-bottom: 1px solid var(--Primary-primary-lighter, #d9e8f6);
+  }
+}
diff --git a/nad_ch/controllers/web/sass/index.scss b/nad_ch/controllers/web/sass/index.scss
@@ -1,5 +1,7 @@
 @forward "@uswds";
 @import "base/base";
 @import "base/variables";
+@import "components/usa-header";
 @import "components/usa-nav";
 @import "components/usa-sidenav";
+@import "components/usa-table";
diff --git a/nad_ch/controllers/web/src/index.ts b/nad_ch/controllers/web/src/index.ts
@@ -0,0 +1,12 @@
+import "@uswds/uswds/css/uswds.css";
+import Alpine from "alpinejs";
+
+declare global {
+  interface Window {
+    Alpine: any;
+  }
+}
+
+window.Alpine = Alpine;
+
+Alpine.start();
diff --git a/nad_ch/controllers/web/src/index.tsx b/nad_ch/controllers/web/src/index.tsx
diff --git a/nad_ch/controllers/web/templates/_layouts/base.html b/nad_ch/controllers/web/templates/_layouts/base.html
@@ -6,9 +6,11 @@
   </head>
   <body>
     <div class="grid-row minh-viewport">
-      <div class="grid-col-2">{% include "_layouts/sidebar.html" %}</div>
-      <div class="grid-col-10">
-        <main class="main" id="main-content">
+      <div class="grid-col" style="max-width: 200px">
+        {% include "_layouts/sidebar.html" %}
+      </div>
+      <div class="grid-col">
+        <main class="main grid-container" id="main-content">
           <section>{% block content %}{% endblock %}</section>
         </main>
       </div>

diff --git a/nad_ch/controllers/web/templates/_layouts/sidebar.html b/nad_ch/controllers/web/templates/_layouts/sidebar.html
@@ -1,27 +1,31 @@
 {% block sidebar %}
 <nav aria-label="Side navigation,">
   <ul class="usa-sidenav height-viewport">
-    <div class="usa-sidenav__logo">
-      <h6>National Address Database</h6>
-      <h3>Collaboration Hub</h3>
+    <div>
+      <div class="usa-sidenav__logo">
+        <a href="{{ url_for('index') }}">
+          <div class="logo-top">National Address Database</div>
+          <div class="logo-bottom">Collaboration Hub</div>
+        </a>
+      </div>
+      {% if current_user.is_authenticated %}
+      <li class="usa-sidenav__item">
+        {% if request.path.startswith('/reports') %}
+        <a href="{{ url_for('submissions.reports') }}" class="usa-current"
+          >Reports</a
+        >
+        {% else %}
+        <a href="{{ url_for('submissions.reports') }}">Reports</a>
+        {% endif %}
+      </li>
+    </div>
+    <div>
+      <li class="usa-sidenav__item">
+        <a href="{{ url_for('auth.logout_provider', provider='cloudgov') }}"
+          >Logout</a
+        >
+      </li>
     </div>
-    {% if current_user.is_authenticated %}
-    <li class="usa-sidenav__item">
-      {% if request.path.startswith('/reports') %}
-      <a href="{{ url_for('submissions.reports') }}" class="usa-current"
-        >Reports</a
-      >
-      {% else %}
-      <a href="{{ url_for('submissions.reports') }}">Reports</a>
-      {% endif %}
-    </li>
-    <li>
-      <a
-        href="{{ url_for('auth.logout_provider', provider='cloudgov') }}"
-        class="usa-button usa-button--outline usa-button--inverse usa-sidenav__button"
-        >Logout</a
-      >
-    </li>
     {% endif %}
   </ul>
 </nav>

diff --git a/nad_ch/controllers/web/templates/data_submissions/index.html b/nad_ch/controllers/web/templates/data_submissions/index.html
@@ -1,50 +1,43 @@
 {% extends "_layouts/base.html" %} {% block title %}Home Page{% endblock %}
 {%block content %}
-<div>
-  <header class="usa-header usa-header--basic">
-    <div class="usa-nav-container">
-      <div class="usa-navbar">
-        <div class="usa-logo">
-          <em class="usa-logo__text">Reports</em>
-        </div>
-      </div>
-    </div>
-  </header>
-
-  <div class="grid-container">
-    <div class="grid-row">
-      <div class="grid-col">
-        {% if submissions %}
-        <div class="usa-table-default">
-          <table class="usa-table usa-table--borderless width-full">
-            <thead class="width-full">
-              <tr>
-                <th scope="col">Name</th>
-                <th scope="col">Created</th>
-                <th scope="col"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for sub in submissions %}
-              <tr>
-                <th scope="row">{{ sub.filename }}</th>
-                <td>{{ sub.date_created }}</td>
-                <td>
-                  <a
-                    href="{{ url_for('submissions.view_report', submission_id=sub.id, _external=True) }}"
-                    >View</a
-                  >
-                </td>
-              </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-        </div>
-        {% else %}
-        <p>You haven't uploaded any data submissions yet.</p>
-        {% endif %}
+<header class="usa-header usa-header--basic">
+  <div class="usa-nav-container">
+    <div class="usa-navbar">
+      <div class="usa-logo">
+        <em class="usa-logo__text">Reports</em>
       </div>
     </div>
   </div>
+</header>
+
+{% if submissions %}
+<div class="usa-table-default width-full">
+  <table class="usa-table usa-table--borderless width-full">
+    <thead class="bg-base-lighter border-bottom-2px border-base-light">
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Created</th>
+        <th scope="col"></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for sub in submissions %}
+      <tr>
+        <th class="border-bottom-1px border-base-lightest" scope="row">
+          {{ sub.filename }}
+        </th>
+        <td>{{ sub.date_created }}</td>
+        <td>
+          <a
+            href="{{ url_for('submissions.view_report', submission_id=sub.id, _external=True) }}"
+            >View</a
+          >
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 </div>
-{% endblock %}
+{% else %}
+<p>You haven't uploaded any data submissions yet.</p>
+{% endif %} {% endblock %}