zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-05 17:28:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

WIP styling

Browse source
This commit is contained in:
Neil Martinsen-Burrell 2023-01-26 15:41:56 -06:00
parent 34c3ca54a0
commit c2ff580167
No known key found for this signature in database
GPG key ID: 6A3C818CC10D0184
5 changed files with 112 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,9 +29,14 @@ $letter-space--xs: .0125em;
@include sr-only;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
@include typeset('sans', '2xl', 2);
margin: 0 0 units(1);
margin: 0 0 units(2);
}
h2 {
@ -43,7 +48,7 @@ $letter-space--xs: .0125em;
margin-top: units(2);
}
}
.register-form-step h3 {
color: color('primary-dark');
letter-spacing: $letter-space--xs;
@ -92,9 +97,9 @@ a.breadcrumb__back {
.usa-icon {
flex-shrink: 0;
//align lock body to x-height
margin: units('2px') units(1) 0 0;
margin: units('2px') units(1) 0 0;
}
}
}
}
.stepnav {
@ -109,11 +114,41 @@ a.breadcrumb__back {
font-weight: font-weight('semibold');
}
footer {
//Workaround because USWDS units jump from 10 to 15
margin-top: units(10) + units(2);
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);
h2 {
padding-bottom: units(3);
}
p {
margin-bottom: 0;
}
}
#wrapper {
background-color: color('primary-lightest');
}
main {
//Workaround because USWDS units jump from 10 to 15
padding-bottom: units(10) + units(2);
padding-top: units(5);
}
footer {
border-top: 1px solid color('primary-darker');
}
.usa-footer__secondary-section {
background-color: color('primary-lightest');
}
abbr[title] {
// workaround for underlining abbr element
border-bottom: none;

11
src/registrar/assets/sass/_theme/_uswds-theme.scss
View file

@ -26,8 +26,15 @@ in the form $setting: value,
/*----------------------------
# Banner Settings
-----------------------------*/
$theme-banner-background-color: "primary-darker",
$theme-banner-link-color: "primary-lighter",
$theme-banner-background-color: "primary-dark",
$theme-banner-link-color: default,
/*
# Footer Settings
*/
$theme-identifier-background-color: 'primary-darker',
$theme-identifier-identity-domain-color: 'base-lighter',
$theme-identifier-secondary-link-color: 'base-lighter',
/*----------------------------

10
src/registrar/templates/base.html
View file

@ -128,11 +128,11 @@
<div class="usa-navbar">
{% block logo %}
<div class="usa-logo" id="extended-logo">
<em class="usa-logo__text">
<a href="{% url 'home' %}" title="Home" aria-label="Home">
{% block site_name %}Home{% endblock %}
</a>
</em>
<img
src="{% static 'img/dottedgov-round.svg' %}"
alt="Home"
width="48px"
/>
</div>
{% endblock %}
<button type="button" class="usa-menu-btn">Menu</button>

92
src/registrar/templates/home.html
View file

@ -1,59 +1,77 @@
{% extends 'base.html' %}
{% block title %} Hello {% endblock %}
{% block hero %}
<section class="usa-hero">
<div class="usa-grid">
<div class="usa-hero-callout usa-section-dark">
<h1>
<span class="usa-hero-callout-alt">Welcome to the .gov registrar</span>
</h1>
</div>
</section>
{% endblock %}
{% block content %}
<main id="main-content" class="grid-container">
<p>This is the .gov registrar.</p>
{% if user.is_authenticated %}
{# complete logged in page together here #}
{% if domain_applications %}
<h2>Your domain applications</h2>
<table class="usa-table usa-table--borderless">
<h1>Manage your domains</h2>
<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>Name</th>
<th>Status</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for application in domain_applications %}
<tr>
<th>
<a href="{% url 'edit-application' application.pk %}">
{{ application.requested_domain.name|default:"New domain request" }}
</a>
</th>
<td>{{ application.status }}</td>
</tr>
<tr>
<th>
<a href="{% url 'edit-application' application.pk %}">
{{ application.requested_domain.name|default:"New domain request" }}
</a>
</th>
<td>{{ application.status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</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 %}
{{ domain }}
{% endfor %}
{% else %}
<p>You don't have any archived domains</p>
{% endif %}
</section>
{% else %} {# not user.is_authenticated #}
{# complete logged out page here #}
<p><a class="usa-button" href="{% url 'login' %}">
Sign in
</a></p>
{% endif %}
<p><a href="{% url 'application:' %}" class="usa-button">Apply</a></p>
<p><a href="{% url 'edit-profile' %}">Edit profile</a></p>
{% if user.is_staff %}
<p><a href="{% url 'admin:index' %}">CISA admin panel</a></p>
{% endif %}
<p><a href="{% url 'logout' %}">Click here to log out.</a></p>
{% else %}
<p><a href="{% url 'login' %}">Click here to log in.</a></p>
{% endif %}
</main>
{% endblock %}

2
src/registrar/templates/includes/footer.html
View file

@ -16,7 +16,7 @@
class="usa-footer__logo-img"
src="{% static 'img/dottedgov-round.svg' %}"
alt="dot gov registrar logo"
width="50px"
width="64px"
/>
</div>
</div>