mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-03 00:12:16 +02:00
Merge pull request #385 from cisagov/ik/style-dashboard-edits
Dashboard style edits
This commit is contained in:
Igor Korenfeld
GitHub
commit
92fd84c7d9
3 changed files with 195 additions and 85 deletions
|
|
@ -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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
//TODO: Revisit
|
||||
// &: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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,90 +6,92 @@
|
|||
|
||||
{% 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">
|
||||
<h2>Registered domains</h2>
|
||||
{% if domains %}
|
||||
{% for domain in domains %}
|
||||
{{ domain }}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
You don't have any registered domains yet
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<h2>Active domain requests</h2>
|
||||
{% if domain_applications %}
|
||||
<table class="usa-table usa-table--borderless">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for application in domain_applications %}
|
||||
<tr>
|
||||
<th th scope="row" role="rowheader">
|
||||
{{ application.requested_domain.name|default:"New domain request" }}
|
||||
</th>
|
||||
<td data-sort-value="{{ application.created_at|date:"U" }}">{{ application.created_at|date }}</td>
|
||||
<td>{{ 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
|
||||
|
||||
{% else %}
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#settings"></use>
|
||||
</svg>
|
||||
Manage
|
||||
{% endif %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% 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>
|
||||
|
||||
<section class="dashboard">
|
||||
<h2>Archived domains</h2>
|
||||
{% if archived_domains %}
|
||||
{% for domain in archived_domains %}
|
||||
<section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
|
||||
<h2>Registered domains</h2>
|
||||
{% if domains %}
|
||||
{% for domain in domains %}
|
||||
{{ domain }}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>You don't have any registered domains yet</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<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 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 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" data-label="Domain name">
|
||||
{{ application.requested_domain.name|default:"New domain request" }}
|
||||
</th>
|
||||
<td data-sort-value="{{ application.created_at|date:"U" }}" data-label="Date created">{{ application.created_at|date }}</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 <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 <span class="usa-sr-only">{{application.requested_domain.name}} </span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% 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>
|
||||
|
||||
<section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
|
||||
<h2>Archived domains</h2>
|
||||
{% if archived_domains %}
|
||||
{% for domain in archived_domains %}
|
||||
{{ domain }}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>You don't have any archived domains</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% else %}
|
||||
<p>You don't have any archived domains</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<h2 class="padding-top-3"> Export domains</h2>
|
||||
<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>
|
||||
<section class="tablet:grid-col-11 desktop:grid-col-10">
|
||||
<h2 class="padding-top-1 mobile-lg:padding-top-3"> Export domains</h2>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{% else %} {# not user.is_authenticated #}
|
||||
{# complete logged out page here #}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue