mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-05 09:21:54 +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.
|
||||
# Do not use this directory for permanent storage -
|
||||
# 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
|
||||
TEMPLATES = [
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@ from django.conf import settings
|
|||
from django.contrib import admin
|
||||
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:
|
||||
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