mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-13 04:59:59 +02:00
Add templates, styles, views for testing USWDS setup
This commit is contained in:
igorkorenfeld
parent
a48e84bf08
commit
65bb21ff0f
9 changed files with 303 additions and 3 deletions
BIN
src/registrar/assets/img/registrar/dotgov_banner.png
Normal file
BIN
src/registrar/assets/img/registrar/dotgov_banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1,28 @@
|
||||||
|
/*
|
||||||
|
* * * * * ==============================
|
||||||
|
* * * * * ==============================
|
||||||
|
* * * * * ==============================
|
||||||
|
* * * * * ==============================
|
||||||
|
========================================
|
||||||
|
========================================
|
||||||
|
========================================
|
||||||
|
----------------------------------------
|
||||||
|
USWDS THEME CUSTOM STYLES
|
||||||
|
----------------------------------------
|
||||||
|
!! Copy this file to your project's
|
||||||
|
sass root. Don't edit the version
|
||||||
|
in node_modules.
|
||||||
|
----------------------------------------
|
||||||
|
Custom project SASS goes here.
|
||||||
|
|
||||||
|
i.e.
|
||||||
|
@include u-padding-right('05');
|
||||||
|
----------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
// Test custom style
|
||||||
|
p {
|
||||||
|
color: color('blue-10v');
|
||||||
|
}
|
||||||
22
src/registrar/assets/sass/_theme/_uswds-theme.scss
Normal file
22
src/registrar/assets/sass/_theme/_uswds-theme.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
/*
|
||||||
|
----------------------------------------
|
||||||
|
USWDS with settings overrides
|
||||||
|
----------------------------------------
|
||||||
|
Uncomment the following lines and add a list of changed settings
|
||||||
|
in the form $setting: value,
|
||||||
|
----------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
//
|
||||||
|
// @use "uswds-core" with (
|
||||||
|
// $setting: value,
|
||||||
|
// $setting: value
|
||||||
|
// );
|
||||||
|
//
|
||||||
|
@use "uswds-core" with (
|
||||||
|
$theme-banner-background-color: "ink",
|
||||||
|
$theme-banner-link-color: "primary-light",
|
||||||
|
$theme-banner-max-width: "none",
|
||||||
|
$theme-show-notifications: false,
|
||||||
|
$theme-hero-image: "../img/registrar/dotgov_banner.png"
|
||||||
|
)
|
||||||
3
src/registrar/assets/sass/_theme/styles.scss
Normal file
3
src/registrar/assets/sass/_theme/styles.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@forward "uswds-theme";
|
||||||
|
@forward "uswds";
|
||||||
|
@forward "uswds-theme-custom-styles";
|
||||||
|
|
@ -128,7 +128,11 @@ WSGI_APPLICATION = "registrar.config.wsgi.application"
|
||||||
# will place static files for deployment.
|
# will place static files for deployment.
|
||||||
# Do not use this directory for permanent storage -
|
# Do not use this directory for permanent storage -
|
||||||
# it is for Django!
|
# it is for Django!
|
||||||
STATIC_ROOT = BASE_DIR / "static"
|
STATIC_ROOT = BASE_DIR / "public"
|
||||||
|
|
||||||
|
STATICFILES_DIRS = [
|
||||||
|
BASE_DIR / "assets",
|
||||||
|
]
|
||||||
|
|
||||||
# TODO: decide on template engine and document in ADR
|
# TODO: decide on template engine and document in ADR
|
||||||
TEMPLATES = [
|
TEMPLATES = [
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,13 @@ from django.conf import settings
|
||||||
from django.contrib import admin
|
from django.contrib import admin
|
||||||
from django.urls import include, path
|
from django.urls import include, path
|
||||||
|
|
||||||
from registrar.views import health
|
from registrar.views import health, index
|
||||||
|
|
||||||
urlpatterns = [path("admin/", admin.site.urls), path("health/", health.health)]
|
urlpatterns = [
|
||||||
|
path("admin/", admin.site.urls),
|
||||||
|
path("", index.index),
|
||||||
|
path("health/", health.health),
|
||||||
|
]
|
||||||
|
|
||||||
if settings.DEBUG:
|
if settings.DEBUG:
|
||||||
import debug_toolbar
|
import debug_toolbar
|
||||||
|
|
|
||||||
215
src/registrar/templates/base.html
Normal file
215
src/registrar/templates/base.html
Normal file
|
|
@ -0,0 +1,215 @@
|
||||||
|
<!doctype html>{# keep this on the first line #}
|
||||||
|
{% load i18n static %}
|
||||||
|
<html class="no-js" lang="{{ LANGUAGE_CODE }}">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
|
<title>
|
||||||
|
{% block title %}{% endblock %}
|
||||||
|
{{ site.name }}
|
||||||
|
{% block extra_title %}{% endblock %}
|
||||||
|
</title>
|
||||||
|
<meta name="description" content="{% block description %}{% endblock %}">
|
||||||
|
{% block viewport_meta %}
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
{% endblock %}
|
||||||
|
{% block extra_meta %}{% endblock extra_meta %}
|
||||||
|
|
||||||
|
{# TO-DO: Determine if <link rel="manifest" href="site.webmanifest"> is desirable #}
|
||||||
|
|
||||||
|
{# TO-DO: set defaults for these #}
|
||||||
|
<link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
|
||||||
|
<link rel="apple-touch-icon" href="{% static 'img/touch-icon.png' %}">
|
||||||
|
|
||||||
|
{% block css %}
|
||||||
|
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
|
||||||
|
<script src="{% static 'js/uswds-init.min.js' %}" defer></script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block canonical %}
|
||||||
|
<link rel="canonical" href="{{ current_path }}">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
|
{% block feeds %}{% endblock %}
|
||||||
|
{% block extra_head %}{% endblock %}
|
||||||
|
|
||||||
|
{# hat tip to USWDS... #}
|
||||||
|
<!-- * * * * * ======================= -->
|
||||||
|
<!-- * * * * * ======================= -->
|
||||||
|
<!-- * * * * * ======================= -->
|
||||||
|
<!-- * * * * * ======================= -->
|
||||||
|
<!-- ================================= -->
|
||||||
|
<!-- ================================= -->
|
||||||
|
<!-- ================================= -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="{% block body_id %}default{% endblock %}" class="{% block body_class %}section_front{% endblock %}">
|
||||||
|
<script src="{% static 'js/uswds.min.js' %}" defer></script>
|
||||||
|
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
|
||||||
|
|
||||||
|
<section class="usa-banner" aria-label="Official government website">
|
||||||
|
<div class="usa-accordion">
|
||||||
|
<header class="usa-banner__header">
|
||||||
|
<div class="usa-banner__inner">
|
||||||
|
<div class="grid-col-auto">
|
||||||
|
<img
|
||||||
|
class="usa-banner__header-flag"
|
||||||
|
src="{% static 'img/us_flag_small.png' %}"
|
||||||
|
alt="U.S. flag"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid-col-fill tablet:grid-col-auto">
|
||||||
|
<p class="usa-banner__header-text">
|
||||||
|
An official website of the United States government
|
||||||
|
</p>
|
||||||
|
<p class="usa-banner__header-action" aria-hidden="true">
|
||||||
|
Here’s how you know
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="usa-accordion__button usa-banner__button"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="gov-banner-default-default"
|
||||||
|
>
|
||||||
|
<span class="usa-banner__button-text">Here’s how you know</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div
|
||||||
|
class="usa-banner__content usa-accordion__content"
|
||||||
|
id="gov-banner-default-default"
|
||||||
|
>
|
||||||
|
<div class="grid-row grid-gap-lg">
|
||||||
|
<div class="usa-banner__guidance tablet:grid-col-6">
|
||||||
|
<img
|
||||||
|
class="usa-banner__icon usa-media-block__img"
|
||||||
|
src="{% static 'img/icon-dot-gov.svg' %}"
|
||||||
|
role="img"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div class="usa-media-block__body">
|
||||||
|
<p>
|
||||||
|
<strong>Official websites use .gov</strong><br />A
|
||||||
|
<strong>.gov</strong> website belongs to an official government
|
||||||
|
organization in the United States.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="usa-banner__guidance tablet:grid-col-6">
|
||||||
|
<img
|
||||||
|
class="usa-banner__icon usa-media-block__img"
|
||||||
|
src="{% static 'img/icon-https.svg' %}"
|
||||||
|
role="img"
|
||||||
|
alt=""
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div class="usa-media-block__body">
|
||||||
|
<p>
|
||||||
|
<strong>Secure .gov websites use HTTPS</strong><br />A
|
||||||
|
<strong>lock</strong> (
|
||||||
|
<span class="icon-lock"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="52"
|
||||||
|
height="64"
|
||||||
|
viewBox="0 0 52 64"
|
||||||
|
class="usa-banner__lock-image"
|
||||||
|
role="img"
|
||||||
|
aria-labelledby="banner-lock-title-default banner-lock-description-default"
|
||||||
|
focusable="false"
|
||||||
|
>
|
||||||
|
<title id="banner-lock-title-default">Lock</title>
|
||||||
|
<desc id="banner-lock-description-default">A locked padlock</desc>
|
||||||
|
<path
|
||||||
|
fill="#000000"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
|
||||||
|
/>
|
||||||
|
</svg> </span
|
||||||
|
>) or <strong>https://</strong> means you’ve safely connected to
|
||||||
|
the .gov website. Share sensitive information only on official,
|
||||||
|
secure websites.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
{% block banner %}
|
||||||
|
<header class="usa-header usa-header-extended" role="banner">
|
||||||
|
<div class="usa-navbar">
|
||||||
|
{% block logo %}
|
||||||
|
<div class="usa-logo" id="extended-logo">
|
||||||
|
<em class="usa-logo-text">
|
||||||
|
<a href="/"
|
||||||
|
title="Home"
|
||||||
|
aria-label="Home">
|
||||||
|
{% block site_name %}{{ site.name }}{% endblock %}
|
||||||
|
</a>
|
||||||
|
</em>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
<button class="usa-menu-btn">Menu</button>
|
||||||
|
</div>
|
||||||
|
{% block usa_nav %}
|
||||||
|
{% block usa_nav_secondary %}{% endblock %}
|
||||||
|
{% endblock %}
|
||||||
|
</header>
|
||||||
|
{% endblock banner %}
|
||||||
|
{% block usa_overlay %}<div class="usa-overlay"></div>{% endblock %}
|
||||||
|
<div id="wrapper">
|
||||||
|
{% block messages %}
|
||||||
|
{% if messages %}
|
||||||
|
<ul class="messages">
|
||||||
|
{% for message in messages %}
|
||||||
|
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
|
||||||
|
{{ message }}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block section_nav %}{% endblock %}
|
||||||
|
|
||||||
|
<main id="main-content">
|
||||||
|
{% block hero %}{% endblock %}
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div role="complementary">{% block complementary %}{% endblock %}</div>
|
||||||
|
|
||||||
|
{% block content_bottom %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer id="footer" role="contentinfo">
|
||||||
|
{% block footer_nav %}
|
||||||
|
{% endblock %}
|
||||||
|
{% block footer %}
|
||||||
|
<div>
|
||||||
|
<p class="copyright">© {{ now.year }} {{ site.name }}</p>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
</footer>
|
||||||
|
</div> <!-- /#wrapper -->
|
||||||
|
|
||||||
|
{% block init_js %}{% endblock %}{# useful for vars and other initializations #}
|
||||||
|
|
||||||
|
{% block site_js %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block app_js %}{% endblock %}
|
||||||
|
|
||||||
|
{% block extrascript %}{% endblock %}
|
||||||
|
|
||||||
|
{# asynchronous analytics #}
|
||||||
|
<script async id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/UniversalFederatedAnalyticsM
|
||||||
|
in.js?agency={{ AGENCY }}"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
src/registrar/templates/whoami.html
Normal file
18
src/registrar/templates/whoami.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!-- Test page -->
|
||||||
|
{% 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">
|
||||||
|
<h2>
|
||||||
|
<span class="usa-hero-callout-alt">This is sample content.</span>
|
||||||
|
This is only sample content.
|
||||||
|
</h2>
|
||||||
|
<p> {{ name }} You'll want to replace it with content of your own.</p>
|
||||||
|
<button class="usa-button usa-button--accent-cool">Click a usa button</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
6
src/registrar/views/index.py
Normal file
6
src/registrar/views/index.py
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
from django.shortcuts import render
|
||||||
|
|
||||||
|
|
||||||
|
def index(request):
|
||||||
|
context = {"name": "World!"}
|
||||||
|
return render(request, "whoami.html", context)
|
||||||
Loading…
Add table
Add a link
Reference in a new issue