Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solidifying frontend #42

Merged
merged 1 commit into from
Mar 8, 2024
Merged

Solidifying frontend #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion nad_ch/controllers/web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion nad_ch/controllers/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion nad_ch/controllers/web/routes/data_submissions.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)


Expand Down
7 changes: 7 additions & 0 deletions nad_ch/controllers/web/sass/components/_usa-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.usa-header {
border-bottom: 2px solid #dfe1e2;

.usa-logo {
font-size: 40px;
}
}
14 changes: 14 additions & 0 deletions nad_ch/controllers/web/sass/components/_usa-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
44 changes: 24 additions & 20 deletions nad_ch/controllers/web/sass/components/_usa-sidenav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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 {
Expand Down
6 changes: 6 additions & 0 deletions nad_ch/controllers/web/sass/components/_usa-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.usa-table {
tbody th,
td {
border-bottom: 1px solid var(--Primary-primary-lighter, #d9e8f6);
}
}
2 changes: 2 additions & 0 deletions nad_ch/controllers/web/sass/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
12 changes: 12 additions & 0 deletions nad_ch/controllers/web/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
5 changes: 0 additions & 5 deletions nad_ch/controllers/web/src/index.tsx
View file
Open in desktop

This file was deleted.

8 changes: 5 additions & 3 deletions nad_ch/controllers/web/templates/_layouts/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
44 changes: 24 additions & 20 deletions nad_ch/controllers/web/templates/_layouts/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
81 changes: 37 additions & 44 deletions nad_ch/controllers/web/templates/data_submissions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Loading
Loading