mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-25 03:58:39 +02:00
Merge pull request #3284 from cisagov/nl/3074-responsive-layouts-widescreen
(restored PR) #3074 - Change (margin/padding) responsive layouts - [NL]
This commit is contained in:
CuriousX
GitHub
commit
7e6af2e8a4
56 changed files with 710 additions and 848 deletions
|
|
@ -176,7 +176,16 @@ html[data-theme="dark"] {
|
|||
color: var(--primary-fg);
|
||||
}
|
||||
|
||||
// Reset the USWDS styles for alerts
|
||||
@include at-media(desktop) {
|
||||
.dashboard .usa-alert__body--widescreen {
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
|
||||
.dashboard .usa-alert__body--widescreen::before {
|
||||
left: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#branding h1,
|
||||
h1, h2, h3,
|
||||
|
|
|
|||
|
|
@ -1,21 +1,18 @@
|
|||
@use "uswds-core" as *;
|
||||
@use "base" as *;
|
||||
|
||||
// Fixes some font size disparities with the Figma
|
||||
// for usa-alert alert elements
|
||||
.usa-alert {
|
||||
.usa-alert__heading.larger-font-sizing {
|
||||
font-size: units(3);
|
||||
}
|
||||
}
|
||||
|
||||
.usa-alert__text.measure-none {
|
||||
max-width: measure(none);
|
||||
}
|
||||
/*----------------
|
||||
Alert Layout
|
||||
-----------------*/
|
||||
|
||||
// The icon was off center for some reason
|
||||
// Fixes that issue
|
||||
@media (min-width: 64em){
|
||||
@include at-media(desktop) {
|
||||
// NOTE: !important is used because _font.scss overrides this
|
||||
.usa-alert__body {
|
||||
max-width: $widescreen-max-width !important;
|
||||
}
|
||||
.usa-alert--warning{
|
||||
.usa-alert__body::before {
|
||||
left: 1rem !important;
|
||||
|
|
@ -24,13 +21,29 @@
|
|||
.usa-alert__body.margin-left-1 {
|
||||
margin-left: 0.5rem!important;
|
||||
}
|
||||
|
||||
.usa-alert__body--widescreen::before {
|
||||
left: 4rem !important;
|
||||
}
|
||||
.usa-alert__body--widescreen {
|
||||
padding-left: 7rem!important;
|
||||
}
|
||||
}
|
||||
|
||||
// NOTE: !important is used because _font.scss overrides this
|
||||
.usa-alert__body--widescreen {
|
||||
max-width: $widescreen-max-width !important;
|
||||
/*----------------
|
||||
Alert Fonts
|
||||
-----------------*/
|
||||
// Fixes some font size disparities with the Figma
|
||||
// for usa-alert alert elements
|
||||
.usa-alert {
|
||||
.usa-alert__heading.larger-font-sizing {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------
|
||||
Alert Coloring
|
||||
-----------------*/
|
||||
.usa-site-alert--hot-pink {
|
||||
.usa-alert {
|
||||
background-color: $hot-pink;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
@use "cisa_colors" as *;
|
||||
|
||||
$widescreen-max-width: 1920px;
|
||||
$widescreen-x-padding: 4.5rem;
|
||||
|
||||
$hot-pink: #FFC3F9;
|
||||
|
||||
/* Styles for making visible to screen reader / AT users only. */
|
||||
|
|
@ -253,6 +255,15 @@ abbr[title] {
|
|||
max-width: $widescreen-max-width;
|
||||
}
|
||||
|
||||
// This is used in cases where we want to align content to widescreen margins
|
||||
// but we don't want the content itself to have widescreen widths
|
||||
@include at-media(desktop) {
|
||||
.padding-x--widescreen {
|
||||
padding-left: $widescreen-x-padding !important;
|
||||
padding-right: $widescreen-x-padding !important;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-right-neg-4px {
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
|
@ -267,3 +278,7 @@ abbr[title] {
|
|||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.maxw-fit-content {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
|
@ -6,3 +6,21 @@
|
|||
.usa-identifier__container--widescreen {
|
||||
max-width: $widescreen-max-width !important;
|
||||
}
|
||||
|
||||
|
||||
// NOTE: !important is used because we are overriding default
|
||||
// USWDS paddings in a few locations
|
||||
@include at-media(desktop) {
|
||||
.grid-container--widescreen {
|
||||
padding-left: $widescreen-x-padding !important;
|
||||
padding-right: $widescreen-x-padding !important;
|
||||
}
|
||||
}
|
||||
|
||||
// matches max-width to equal the max-width of .grid-container
|
||||
// used to trick the eye into thinking we have left-aligned a
|
||||
// regular grid-container within a widescreen (see instances
|
||||
// where is_widescreen_centered is used in the html).
|
||||
.max-width--grid-container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
}
|
||||
}
|
||||
.usa-nav__secondary {
|
||||
// I don't know why USWDS has this at 2 rem, which puts it out of alignment
|
||||
right: 3rem;
|
||||
right: 1rem;
|
||||
padding-right: $widescreen-x-padding;
|
||||
color: color('white');
|
||||
bottom: 4.3rem;
|
||||
.usa-nav-link,
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ TEMPLATES = [
|
|||
"registrar.context_processors.org_user_status",
|
||||
"registrar.context_processors.add_path_to_context",
|
||||
"registrar.context_processors.portfolio_permissions",
|
||||
"registrar.context_processors.is_widescreen_mode",
|
||||
"registrar.context_processors.is_widescreen_centered",
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -109,31 +109,21 @@ def portfolio_permissions(request):
|
|||
return portfolio_context
|
||||
|
||||
|
||||
def is_widescreen_mode(request):
|
||||
widescreen_paths = [] # If this list is meant to include specific paths, populate it.
|
||||
portfolio_widescreen_paths = [
|
||||
def is_widescreen_centered(request):
|
||||
include_paths = [
|
||||
"/domains/",
|
||||
"/requests/",
|
||||
"/request/",
|
||||
"/no-organization-requests/",
|
||||
"/no-organization-domains/",
|
||||
"/domain-request/",
|
||||
"/members/",
|
||||
]
|
||||
# widescreen_paths can be a bear as it trickles down sub-urls. exclude_paths gives us a way out.
|
||||
exclude_paths = [
|
||||
"/domains/edit",
|
||||
"members/new-member/",
|
||||
]
|
||||
|
||||
# Check if the current path matches a widescreen path or the root path.
|
||||
is_widescreen = any(path in request.path for path in widescreen_paths) or request.path == "/"
|
||||
is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
|
||||
|
||||
# Check if the user is an organization user and the path matches portfolio paths.
|
||||
is_portfolio_widescreen = (
|
||||
hasattr(request.user, "is_org_user")
|
||||
and request.user.is_org_user(request)
|
||||
and any(path in request.path for path in portfolio_widescreen_paths)
|
||||
and not any(exclude_path in request.path for exclude_path in exclude_paths)
|
||||
)
|
||||
# Check if the current path matches a path in included_paths or the root path.
|
||||
is_widescreen_centered = any(path in request.path for path in include_paths) or request.path == "/"
|
||||
|
||||
# Return a dictionary with the widescreen mode status.
|
||||
return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen}
|
||||
return {"is_widescreen_centered": is_widescreen_centered and not is_excluded}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
{% block title %}{% translate "Unauthorized | " %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<div class="grid-row grow-gap">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row grow-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-6 usa-prose margin-bottom-3">
|
||||
<h1>
|
||||
{% translate "You are not authorized to view this page" %}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
{% block title %}{% translate "Forbidden | " %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<div class="grid-row grow-gap">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row grow-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-6 usa-prose margin-bottom-3">
|
||||
<h1>
|
||||
{% translate "You're not authorized to view this page." %}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
{% block title %}{% translate "Page not found | " %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<div class="grid-row grid-gap">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-6 usa-prose margin-bottom-3">
|
||||
<h1>
|
||||
{% translate "We couldn’t find that page" %}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
{% block title %}{% translate "Server error | " %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<div class="grid-row grid-gap">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-6 usa-prose margin-bottom-3">
|
||||
<h1>
|
||||
{% translate "We're having some trouble." %}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
{% for model in app.models %}
|
||||
<tr class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
|
||||
{% if model.admin_url %}
|
||||
<th scope="row"><a href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}>{{ model.name }}</a></th>
|
||||
<th scope="row"><a href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}">{{ model.name }}</a></th>
|
||||
{% else %}
|
||||
<th scope="row">{{ model.name }}</th>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/
|
|||
{% if field.field.help_text %}
|
||||
{# .gov override #}
|
||||
{% block help_text %}
|
||||
<div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
|
||||
<div class="help"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}">
|
||||
<div>{{ field.field.help_text|safe }}</div>
|
||||
</div>
|
||||
{% endblock help_text %}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<select name="selected_user" id="selected_user" class="admin-combobox margin-top-0" onchange="this.form.submit()">
|
||||
<option value="">Select a user</option>
|
||||
{% for user in other_users %}
|
||||
<option value="{{ user.pk }}" {% if selected_user and user.pk == selected_user.pk %}selected{% endif %}>
|
||||
<option value="{{ user.pk }}" {% if selected_user and user.pk == selected_user.pk %}selected{% endif %}">
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
<section class="usa-banner" aria-label="Official website of the United States government">
|
||||
<div class="usa-accordion">
|
||||
<header class="usa-banner__header">
|
||||
<div class="usa-banner__inner {% if is_widescreen_mode %} usa-banner__inner--widescreen {% endif %}">
|
||||
<div class="usa-banner__inner usa-banner__inner--widescreen padding-x--widescreen">
|
||||
<div class="grid-col-auto">
|
||||
<img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
|
||||
</div>
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="usa-banner__content usa-accordion__content" id="gov-banner-default">
|
||||
<div class="usa-banner__content usa-accordion__content padding-x--widescreen margin-x-0" id="gov-banner-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"
|
||||
|
|
@ -159,14 +159,14 @@
|
|||
|
||||
{% block wrapper %}
|
||||
{% block wrapperdiv %}
|
||||
<div id="wrapper">
|
||||
<div id="wrapper" class="wrapper--padding-top-6">
|
||||
{% endblock wrapperdiv %}
|
||||
{% block messages %}
|
||||
{% if messages %}
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
{% if 'base' in message.extra_tags %}
|
||||
<li{% if message.tags %} class="{{ message.tags }}" {% endif %}>
|
||||
<li{% if message.tags %} class="{{ message.tags }}" {% endif %}">
|
||||
{{ message }}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
{% if messages %}
|
||||
<ul class="messages">
|
||||
{% for message in messages %}
|
||||
<li {% if message.tags %} class="{{ message.tags }}" {% endif %}>
|
||||
<li {% if message.tags %} class="{{ message.tags }}" {% endif %}">
|
||||
{{ message }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
{% comment %} This view provides a detail button that can be used to show/hide content {% endcomment %}
|
||||
<details class="margin-top-1 dja-detail-table" aria-role="button" {% if start_open %}open{% else %}closed{% endif %}>
|
||||
<details class="margin-top-1 dja-detail-table" aria-role="button" {% if start_open %}open{% else %}closed{% endif %}">
|
||||
<summary class="padding-1 padding-left-0 dja-details-summary">Details</summary>
|
||||
<div class="grid-container margin-left-0 padding-left-0 padding-right-0 dja-details-contents">
|
||||
{% block detail_content %}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block help_text %}
|
||||
<div class="help margin-bottom-1" {% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
|
||||
<div class="help margin-bottom-1" {% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}">
|
||||
{% if field.field.name == "state" %}
|
||||
<div>{{ state_help_message }}</div>
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
<ul class="mulitple-choice">
|
||||
{% for choice in choices %}
|
||||
{% if choice.reset %}
|
||||
<li{% if choice.selected %} class="selected"{% endif %}>
|
||||
<li{% if choice.selected %} class="selected"{% endif %}">
|
||||
<a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}">{{ choice.display }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for choice in choices %}
|
||||
{% if not choice.reset %}
|
||||
<li{% if choice.selected %} class="selected"{% endif %}>
|
||||
<li{% if choice.selected %} class="selected"{% endif %}">
|
||||
{% if choice.selected and choice.exclude_query_string %}
|
||||
<a class="choice-filter choice-filter--checked" href="{{ choice.exclude_query_string|iriencode }}">{{ choice.display }}
|
||||
<svg class="usa-icon position-absolute z-0 left-0" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
{% block title %}{{ domain.name }} | {% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid-container">
|
||||
<div class="grid-container grid-container--widescreen">
|
||||
|
||||
<div class="grid-row grid-gap">
|
||||
<div class="tablet:grid-col-3">
|
||||
<div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-3 ">
|
||||
<p class="font-body-md margin-top-0 margin-bottom-2
|
||||
text-primary-darker text-semibold domain-name-wrap"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
{% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
|
||||
{% block content %}
|
||||
<div class="grid-container">
|
||||
<div class="grid-row grid-gap">
|
||||
<div class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row grid-gap {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-3">
|
||||
{% include 'domain_request_sidebar.html' %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
{% block title %} Start a request | {% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
|
||||
|
||||
<form class="usa-form usa-form--extra-large" method="post" novalidate>
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
{% include "includes/profile_information.html" with user=user%}
|
||||
|
||||
|
||||
{% block form_buttons %}
|
||||
{% block form_buttons %}
|
||||
<div class="stepnav">
|
||||
<button
|
||||
type="submit"
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
class="usa-button"
|
||||
>Continue</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,18 +8,20 @@
|
|||
{% endblock wrapperdiv %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grid-container">
|
||||
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
|
||||
<div class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
|
||||
|
||||
|
||||
<h1>Withdraw request for {{ DomainRequest.requested_domain.name }}?</h1>
|
||||
<h1>Withdraw request for {{ DomainRequest.requested_domain.name }}?</h1>
|
||||
|
||||
<p>If you withdraw your request, we won't review it. Once you withdraw your request, you can edit it and submit it again. </p>
|
||||
<p>If you withdraw your request, we won't review it. Once you withdraw your request, you can edit it and submit it again. </p>
|
||||
|
||||
<p><a href="{% url 'domain-request-withdrawn' DomainRequest.id %}" class="usa-button withdraw">Withdraw request</a>
|
||||
<p><a href="{% url 'domain-request-withdrawn' DomainRequest.id %}" class="usa-button withdraw">Withdraw request</a>
|
||||
<a href="{% url 'domain-request-status' DomainRequest.id %}">Cancel</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<li class="usa-sidenav__item">
|
||||
{% url 'domain-dns' pk=domain.id as url %}
|
||||
<a href="{{ url }}" {% if request.path|startswith:url %}class="usa-current"{% endif %}>
|
||||
<a href="{{ url }}" {% if request.path|startswith:url %}class="usa-current"{% endif %}">
|
||||
DNS
|
||||
</a>
|
||||
{% if request.path|startswith:url %}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
{% block title %} Home | {% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
{% if user.is_authenticated %}
|
||||
{# the entire logged in page goes here #}
|
||||
|
||||
{% block homepage_content %}
|
||||
<div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
|
||||
<div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert usa-alert--error">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<h4 class="usa-alert__heading">
|
||||
Header
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<h4 class="usa-alert__heading">
|
||||
Header
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} usa-alert__body--widescreen">
|
||||
<p class="usa-alert__text maxw-none">
|
||||
<strong>Attention:</strong> You are on a test site.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<h3 class="usa-alert__heading">
|
||||
Service disruption
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<h3 class="usa-alert__heading">
|
||||
Header here
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<h3 class="usa-alert__heading">
|
||||
System outage
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert usa-alert--warning">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<h4 class="usa-alert__heading">
|
||||
Header
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -1,236 +0,0 @@
|
|||
{% load custom_filters %}
|
||||
{% load static url_helpers %}
|
||||
<main id="main-content" class="grid-container">
|
||||
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
|
||||
{% block breadcrumb %}
|
||||
{% if portfolio %}
|
||||
{% url 'domain-requests' as url %}
|
||||
{% else %}
|
||||
{% url 'home' as url %}
|
||||
{% endif %}
|
||||
<nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
|
||||
<ol class="usa-breadcrumb__list">
|
||||
<li class="usa-breadcrumb__list-item">
|
||||
{% if portfolio %}
|
||||
<a href="{{ url }}" class="usa-breadcrumb__link"><span>Domain requests</span></a>
|
||||
{% else %}
|
||||
<a href="{{ url }}" class="usa-breadcrumb__link"><span>Manage your domains</span></a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="usa-breadcrumb__list-item usa-current" aria-current="page">
|
||||
{% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
|
||||
<span>New domain request</span>
|
||||
{% else %}
|
||||
<span>{{ DomainRequest.requested_domain.name }}</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% endblock breadcrumb %}
|
||||
|
||||
{% block header %}
|
||||
{% if not DomainRequest.requested_domain and DomainRequest.status == DomainRequest.DomainRequestStatus.STARTED %}
|
||||
<h1>New domain request</h1>
|
||||
{% else %}
|
||||
<h1>Domain request for {{ DomainRequest.requested_domain.name }}</h1>
|
||||
{% endif %}
|
||||
{% endblock header %}
|
||||
|
||||
{% block status_summary %}
|
||||
<div
|
||||
class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2"
|
||||
role="region"
|
||||
aria-labelledby="summary-box-key-information"
|
||||
>
|
||||
<div class="usa-summary-box__body">
|
||||
<p class="usa-summary-box__heading font-sans-md margin-bottom-0"
|
||||
id="summary-box-key-information"
|
||||
>
|
||||
<span class="text-bold text-primary-darker">
|
||||
Status:
|
||||
</span>
|
||||
{{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
{% endblock status_summary %}
|
||||
|
||||
{% block status_metadata %}
|
||||
|
||||
{% if portfolio %}
|
||||
{% if DomainRequest.creator %}
|
||||
<p class="margin-top-1 margin-bottom-1">
|
||||
<b class="review__step__name">Created by:</b> {{DomainRequest.creator.email|default:DomainRequest.creator.get_formatted_name }}
|
||||
</p>
|
||||
{% else %}
|
||||
<p class="margin-top-1 margin-bottom-1">
|
||||
<b class="review__step__name">No creator found:</b> this is an error, please email <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% with statuses=DomainRequest.DomainRequestStatus last_submitted=DomainRequest.last_submitted_date|date:"F j, Y" first_submitted=DomainRequest.first_submitted_date|date:"F j, Y" last_status_update=DomainRequest.last_status_update|date:"F j, Y" %}
|
||||
{% comment %}
|
||||
These are intentionally seperated this way.
|
||||
There is some code repetition, but it gives us more flexibility rather than a dense reduction.
|
||||
Leave it this way until we've solidified our requirements.
|
||||
{% endcomment %}
|
||||
{% if DomainRequest.status == statuses.STARTED %}
|
||||
{% with first_started_date=DomainRequest.get_first_status_started_date|date:"F j, Y" %}
|
||||
<p class="margin-top-1">
|
||||
{% comment %}
|
||||
A newly created domain request will not have a value for last_status update.
|
||||
This is because the status never really updated.
|
||||
However, if this somehow goes back to started we can default to displaying that new date.
|
||||
{% endcomment %}
|
||||
<b class="review__step__name">Started on:</b> {{last_status_update|default:first_started_date}}
|
||||
</p>
|
||||
{% endwith %}
|
||||
{% elif DomainRequest.status == statuses.SUBMITTED %}
|
||||
<p class="margin-top-1 margin-bottom-1">
|
||||
<b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
|
||||
</p>
|
||||
<p class="margin-top-1">
|
||||
<b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
|
||||
</p>
|
||||
{% elif DomainRequest.status == statuses.ACTION_NEEDED %}
|
||||
<p class="margin-top-1 margin-bottom-1">
|
||||
<b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
|
||||
</p>
|
||||
<p class="margin-top-1">
|
||||
<b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
|
||||
</p>
|
||||
{% elif DomainRequest.status == statuses.REJECTED %}
|
||||
<p class="margin-top-1 margin-bottom-1">
|
||||
<b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
|
||||
</p>
|
||||
<p class="margin-top-1">
|
||||
<b class="review__step__name">Rejected on:</b> {{last_status_update}}
|
||||
</p>
|
||||
{% elif DomainRequest.status == statuses.WITHDRAWN %}
|
||||
<p class="margin-top-1 margin-bottom-1">
|
||||
<b class="review__step__name">Submitted on:</b> {{last_submitted|default:first_submitted }}
|
||||
</p>
|
||||
<p class="margin-top-1">
|
||||
<b class="review__step__name">Withdrawn on:</b> {{last_status_update}}
|
||||
</p>
|
||||
{% else %}
|
||||
{% comment %} Shown for in_review, approved, ineligible {% endcomment %}
|
||||
<p class="margin-top-1">
|
||||
<b class="review__step__name">Last updated on:</b> {{DomainRequest.updated_at|date:"F j, Y"}}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endblock status_metadata %}
|
||||
|
||||
{% block status_blurb %}
|
||||
{% if DomainRequest.is_awaiting_review %}
|
||||
<p>{% include "includes/domain_request_awaiting_review.html" with show_withdraw_text=DomainRequest.is_withdrawable %}</p>
|
||||
{% endif %}
|
||||
{% endblock status_blurb %}
|
||||
|
||||
{% block modify_request %}
|
||||
{% if DomainRequest.is_withdrawable %}
|
||||
<p><a href="{% url 'domain-request-withdraw-confirmation' pk=DomainRequest.id %}" class="usa-button usa-button--outline withdraw_outline">
|
||||
Withdraw request</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endblock modify_request %}
|
||||
</div>
|
||||
|
||||
<div class="grid-col desktop:grid-offset-2 maxw-tablet">
|
||||
{% block request_summary_header %}
|
||||
<h2 class="text-primary-darker"> Summary of your domain request </h2>
|
||||
{% endblock request_summary_header%}
|
||||
|
||||
{% block request_summary %}
|
||||
{% with heading_level='h3' %}
|
||||
{% with org_type=DomainRequest.get_generic_org_type_display %}
|
||||
{% include "includes/summary_item.html" with title='Type of organization' value=org_type heading_level=heading_level %}
|
||||
{% endwith %}
|
||||
|
||||
{% if DomainRequest.tribe_name %}
|
||||
{% include "includes/summary_item.html" with title='Tribal government' value=DomainRequest.tribe_name heading_level=heading_level %}
|
||||
|
||||
{% if DomainRequest.federally_recognized_tribe %}
|
||||
<p>Federally-recognized tribe</p>
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.state_recognized_tribe %}
|
||||
<p>State-recognized tribe</p>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.get_federal_type_display %}
|
||||
{% include "includes/summary_item.html" with title='Federal government branch' value=DomainRequest.get_federal_type_display heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.is_election_board %}
|
||||
{% with value=DomainRequest.is_election_board|yesno:"Yes,No,Incomplete" %}
|
||||
{% include "includes/summary_item.html" with title='Election office' value=value heading_level=heading_level %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.organization_name %}
|
||||
{% include "includes/summary_item.html" with title='Organization' value=DomainRequest address='true' heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.about_your_organization %}
|
||||
{% include "includes/summary_item.html" with title='About your organization' value=DomainRequest.about_your_organization heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.senior_official %}
|
||||
{% include "includes/summary_item.html" with title='Senior official' value=DomainRequest.senior_official contact='true' heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.current_websites.all %}
|
||||
{% include "includes/summary_item.html" with title='Current websites' value=DomainRequest.current_websites.all list='true' heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.requested_domain %}
|
||||
{% include "includes/summary_item.html" with title='.gov domain' value=DomainRequest.requested_domain heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.alternative_domains.all %}
|
||||
{% include "includes/summary_item.html" with title='Alternative domains' value=DomainRequest.alternative_domains.all list='true' heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.purpose %}
|
||||
{% include "includes/summary_item.html" with title='Purpose of your domain' value=DomainRequest.purpose heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.creator %}
|
||||
{% include "includes/summary_item.html" with title='Your contact information' value=DomainRequest.creator contact='true' heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{% if DomainRequest.other_contacts.all %}
|
||||
{% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.other_contacts.all contact='true' list='true' heading_level=heading_level %}
|
||||
{% else %}
|
||||
{% include "includes/summary_item.html" with title='Other employees from your organization' value=DomainRequest.no_other_contacts_rationale heading_level=heading_level %}
|
||||
{% endif %}
|
||||
|
||||
{# We always show this field even if None #}
|
||||
{% if DomainRequest %}
|
||||
<h3 class="header--body text-primary-dark margin-bottom-0">CISA Regional Representative</h3>
|
||||
<ul class="usa-list usa-list--unstyled margin-top-0">
|
||||
{% if DomainRequest.cisa_representative_first_name %}
|
||||
{{ DomainRequest.get_formatted_cisa_rep_name }}
|
||||
{% else %}
|
||||
No
|
||||
{% endif %}
|
||||
</ul>
|
||||
<h3 class="header--body text-primary-dark margin-bottom-0">Anything else</h3>
|
||||
<ul class="usa-list usa-list--unstyled margin-top-0">
|
||||
{% if DomainRequest.anything_else %}
|
||||
{{DomainRequest.anything_else}}
|
||||
{% else %}
|
||||
No
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endblock request_summary%}
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
{% url 'get_domain_requests_json' as url %}
|
||||
<span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
|
||||
|
||||
<section class="section-outlined domain-requests{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domain-requests">
|
||||
<div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
|
||||
<section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
|
||||
<div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
|
||||
{% if not portfolio %}
|
||||
<h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
|
||||
{% else %}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
|
||||
{% endif %}
|
||||
|
||||
<div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
|
||||
<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
|
||||
<section aria-label="Domain requests search component" class="margin-top-2">
|
||||
<form class="usa-search usa-search--small" method="POST" role="search">
|
||||
{% csrf_token %}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{% if has_domain_renewal_flag and num_expiring_domains > 0 and has_any_domains_portfolio_permission %}
|
||||
<section class="usa-site-alert usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<p class="usa-alert__text maxw-none">
|
||||
{% if num_expiring_domains == 1%}
|
||||
One domain will expire soon. Go to "Manage" to renew the domain. <a href="#" id="link-expiring-domains" class="usa-link">Show expiring domain.</a>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<!-- Embedding the portfolio value in a data attribute -->
|
||||
<span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
|
||||
{% endif %}
|
||||
<div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %} {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
|
||||
<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
|
||||
<section aria-label="Domains search component" class="margin-top-2">
|
||||
<form class="usa-search usa-search--small" method="POST" role="search">
|
||||
{% csrf_token %}
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
{% if has_domain_renewal_flag and num_expiring_domains > 0 and not portfolio %}
|
||||
<section class="usa-site-alert usa-site-alert--info margin-bottom-2 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
|
||||
<div class="usa-alert">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
<p class="usa-alert__text maxw-none">
|
||||
{% if num_expiring_domains == 1%}
|
||||
One domain will expire soon. Go to "Manage" to renew the domain. <a href="#" id="link-expiring-domains" class="usa-link">Show expiring domain.</a>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<footer class="usa-footer">
|
||||
<div class="usa-footer__secondary-section">
|
||||
<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<div class="grid-container grid-container--widescreen">
|
||||
<div class="grid-row grid-gap">
|
||||
<div
|
||||
class="
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="usa-footer__contact-links
|
||||
mobile-lg:grid-col-6 flex-align-self-center"
|
||||
>
|
||||
<address class="usa-footer__address">
|
||||
<address class="usa-footer__address maxw-none">
|
||||
<div class="usa-footer__contact-info grid-row grid-gap-md">
|
||||
{% if show_manage_your_domains %}
|
||||
<div class="grid-col-auto">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
class="usa-identifier__section usa-identifier__section--masthead"
|
||||
aria-label="Agency identifier"
|
||||
>
|
||||
<div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
|
||||
<div class="usa-identifier__container usa-identifier__container--widescreen padding-x--widescreen">
|
||||
<div class="usa-identifier__logos">
|
||||
<a rel="noopener noreferrer" target="_blank" href="https://www.cisa.gov" class="usa-identifier__logo"
|
||||
><img
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
class="usa-identifier__section usa-identifier__section--required-links"
|
||||
aria-label="Important links"
|
||||
>
|
||||
<div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
|
||||
<div class="usa-identifier__container usa-identifier__container--widescreen padding-x--widescreen">
|
||||
<ul class="usa-identifier__required-links-list">
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/' %}"
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
class="usa-identifier__section usa-identifier__section--usagov"
|
||||
aria-label="U.S. government information and services"
|
||||
>
|
||||
<div class="usa-identifier__container {% if is_widescreen_mode %} usa-identifier__container--widescreen {% endif %}">
|
||||
<div class="usa-identifier__container usa-identifier__container--widescreen padding-x--widescreen">
|
||||
<div class="usa-identifier__usagov-description">
|
||||
Looking for U.S. government information and services?
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% load static %}
|
||||
|
||||
<header class="usa-header usa-header--basic">
|
||||
<div class="usa-nav-container {% if is_widescreen_mode %} usa-nav-container--widescreen {% endif %}">
|
||||
<div class="usa-nav-container usa-nav-container--widescreen padding-x--widescreen">
|
||||
<div class="usa-navbar">
|
||||
{% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
|
||||
<button type="button" class="usa-menu-btn">Menu</button>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
{% load custom_filters %}
|
||||
|
||||
<header class="usa-header usa-header--extended">
|
||||
<div class="usa-navbar {% if is_widescreen_mode %} usa-navbar--widescreen {% endif %}">
|
||||
<div class="usa-navbar usa-navbar--widescreen padding-x--widescreen">
|
||||
{% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
|
||||
<button type="button" class="usa-menu-btn">Menu</button>
|
||||
</div>
|
||||
{% block usa_nav %}
|
||||
<nav class="usa-nav" aria-label="Primary navigation">
|
||||
<div class="usa-nav__inner {% if is_widescreen_mode %} usa-nav__inner--widescreen {% endif %}">
|
||||
<div class="usa-nav__inner usa-nav__inner--widescreen padding-x--widescreen">
|
||||
<button type="button" class="usa-nav__close">
|
||||
<img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<section class="section-outlined members margin-top-0 section-outlined--border-base-light" id="members">
|
||||
<div class="section-outlined__header margin-bottom-3 grid-row">
|
||||
<!-- ---------- SEARCH ---------- -->
|
||||
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 {% if is_widescreen_mode %} section-outlined__search--widescreen {% endif %}">
|
||||
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 section-outlined__search--widescreen">
|
||||
<section aria-label="Members search component" class="margin-top-2">
|
||||
<form class="usa-search usa-search--small" method="POST" role="search">
|
||||
{% csrf_token %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{% load custom_filters %}
|
||||
{% load static url_helpers %}
|
||||
<main id="main-content" class="grid-container">
|
||||
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="{% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="grid-col desktop:grid-col-8 desktop:grid-offset-2 ">
|
||||
{% block breadcrumb %}
|
||||
{% if portfolio %}
|
||||
{% url 'domain-requests' as url %}
|
||||
|
|
@ -139,7 +140,7 @@
|
|||
{% endblock modify_request %}
|
||||
</div>
|
||||
|
||||
<div class="grid-col desktop:grid-offset-2 maxw-tablet">
|
||||
<div class="grid-col maxw-fit-content desktop:grid-offset-2 ">
|
||||
{% block request_summary_header %}
|
||||
<h2 class="text-primary-darker"> Summary of your domain request </h2>
|
||||
{% endblock request_summary_header%}
|
||||
|
|
@ -237,4 +238,5 @@
|
|||
{% endif %}
|
||||
{% endblock request_summary%}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<p class="{% if not remove_margin_top %}margin-top-3 {% endif %}">
|
||||
<p class="{% if not remove_margin_top %}margin-top-3{% endif %}">
|
||||
<em>Required fields are marked with an asterisk (<abbr class="usa-hint usa-hint--required" title="required">*</abbr>).</em>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
{% load static field_helpers url_helpers %}
|
||||
|
||||
<!-- Form messages -->
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
{% if can_edit %}
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,12 @@
|
|||
<div id="wrapper" class="{% block wrapper_class %}wrapper--padding-top-6{% endblock %}">
|
||||
{% block content %}
|
||||
|
||||
<main class="grid-container {% if is_widescreen_mode %} grid-container--widescreen{% endif %}">
|
||||
<main class="grid-container grid-container--widescreen">
|
||||
{% if user.is_authenticated %}
|
||||
{# the entire logged in page goes here #}
|
||||
|
||||
<div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1">
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
<div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
|
||||
|
||||
{% block portfolio_content %}{% endblock %}
|
||||
|
||||
|
|
@ -24,6 +22,8 @@
|
|||
</a></p>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{% endblock content%}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
|
||||
<!-- Form messages -->
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
{% endblock messages%}
|
||||
|
||||
<div id="main-content">
|
||||
<h1 id="domains-header">Domains</h1>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,12 @@ Organization member
|
|||
{% load static %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<!-- Form messages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
{% url 'members' as url %}
|
||||
<nav class="usa-breadcrumb padding-top-0 margin-bottom-3" aria-label="Portfolio member breadcrumb">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
{% load static %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<div id="main-content">
|
||||
<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<!-- Form messages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
{% url 'members' as url %}
|
||||
{% if portfolio_permission %}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
{% load static %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<div id="main-content">
|
||||
<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<!-- Form messages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
{% url 'members' as url %}
|
||||
{% if portfolio_permission %}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,15 @@
|
|||
{% block portfolio_content %}
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
|
||||
<!-- Navigation breadcrumbs -->
|
||||
<nav class="usa-breadcrumb padding-top-0 bg-gray-1" aria-label="Domain request breadcrumb">
|
||||
<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<!-- Form messages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
<!-- Navigation breadcrumbs -->
|
||||
<nav class="usa-breadcrumb padding-top-0 bg-gray-1" aria-label="Domain request breadcrumb">
|
||||
<ol class="usa-breadcrumb__list">
|
||||
<li class="usa-breadcrumb__list-item">
|
||||
<a href="{% url 'members' %}" class="usa-breadcrumb__link"><span>Members</span></a>
|
||||
|
|
@ -30,14 +37,14 @@
|
|||
<span>Member access and permissions</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<!-- Page header -->
|
||||
<h1>Member access and permissions</h1>
|
||||
<!-- Page header -->
|
||||
<h1>Member access and permissions</h1>
|
||||
|
||||
{% include "includes/required_fields.html" with remove_margin_top=True %}
|
||||
{% include "includes/required_fields.html" with remove_margin_top=True %}
|
||||
|
||||
<form class="usa-form usa-form--large" method="post" id="member_form" novalidate>
|
||||
<form class="usa-form usa-form--large" method="post" id="member_form" novalidate>
|
||||
{% csrf_token %}
|
||||
<fieldset class="usa-fieldset">
|
||||
<legend>
|
||||
|
|
@ -69,8 +76,8 @@
|
|||
<!-- Member email -->
|
||||
</fieldset>
|
||||
|
||||
<!-- Member access radio buttons (Toggles other sections) -->
|
||||
<fieldset class="usa-fieldset">
|
||||
<!-- Member access radio buttons (Toggles other sections) -->
|
||||
<fieldset class="usa-fieldset">
|
||||
<legend>
|
||||
<h2 class="margin-top-0">Member Access</h2>
|
||||
</legend>
|
||||
|
|
@ -81,10 +88,10 @@
|
|||
{% input_with_errors form.role %}
|
||||
{% endwith %}
|
||||
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
||||
<!-- Admin access form -->
|
||||
<div id="member-admin-permissions" class="margin-top-2">
|
||||
<!-- Admin access form -->
|
||||
<div id="member-admin-permissions" class="margin-top-2">
|
||||
<h2>Admin access permissions</h2>
|
||||
<p>Member permissions available for admin-level acccess.</p>
|
||||
|
||||
|
|
@ -128,5 +135,6 @@
|
|||
</a>
|
||||
<button type="submit" class="usa-button">Update Member</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock portfolio_content%}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@
|
|||
|
||||
{% block portfolio_content %}
|
||||
|
||||
<!-- Form messages -->
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
<div id="main-content">
|
||||
<div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
|
||||
<div class="usa-alert__body usa-alert__body--widescreen">
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@
|
|||
|
||||
{% block portfolio_content %}
|
||||
|
||||
<!-- Form mesages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<!-- Form messages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
{% endblock messages%}
|
||||
|
||||
<!-- Navigation breadcrumbs -->
|
||||
<nav class="usa-breadcrumb padding-top-0 bg-gray-1" aria-label="Domain request breadcrumb">
|
||||
|
|
@ -28,16 +29,16 @@
|
|||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Page header -->
|
||||
{% block new_member_header %}
|
||||
<h1>Add a new member</h1>
|
||||
{% endblock new_member_header %}
|
||||
<!-- Page header -->
|
||||
{% block new_member_header %}
|
||||
<h1>Add a new member</h1>
|
||||
{% endblock new_member_header %}
|
||||
|
||||
{% include "includes/required_fields.html" %}
|
||||
{% include "includes/required_fields.html" %}
|
||||
|
||||
<form class="usa-form usa-form--large" method="post" id="add_member_form" novalidate>
|
||||
<form class="usa-form usa-form--large" method="post" id="add_member_form" novalidate>
|
||||
|
||||
<fieldset class="usa-fieldset margin-top-2">
|
||||
<fieldset class="usa-fieldset margin-top-2">
|
||||
<legend>
|
||||
<h2>Email</h2>
|
||||
</legend>
|
||||
|
|
@ -46,10 +47,10 @@
|
|||
{% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
|
||||
{% input_with_errors form.email %}
|
||||
{% endwith %}
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
||||
<!-- Member access radio buttons (Toggles other sections) -->
|
||||
<fieldset class="usa-fieldset margin-top-2">
|
||||
<!-- Member access radio buttons (Toggles other sections) -->
|
||||
<fieldset class="usa-fieldset margin-top-2">
|
||||
<legend>
|
||||
<h2>Member Access</h2>
|
||||
</legend>
|
||||
|
|
@ -60,10 +61,10 @@
|
|||
{% input_with_errors form.role %}
|
||||
{% endwith %}
|
||||
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
||||
<!-- Admin access form -->
|
||||
<div id="new-member-admin-permissions" class="margin-top-2">
|
||||
<!-- Admin access form -->
|
||||
<div id="new-member-admin-permissions" class="margin-top-2">
|
||||
<h2>Admin access permissions</h2>
|
||||
<p>Member permissions available for admin-level acccess.</p>
|
||||
|
||||
|
|
@ -83,8 +84,8 @@
|
|||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<!-- Basic access form -->
|
||||
<div id="new-member-basic-permissions" class="margin-top-2">
|
||||
<!-- Basic access form -->
|
||||
<div id="new-member-basic-permissions" class="margin-top-2">
|
||||
<h2>Basic member permissions</h2>
|
||||
<p>Member permissions available for basic-level acccess.</p>
|
||||
|
||||
|
|
@ -94,8 +95,8 @@
|
|||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<!-- Submit/cancel buttons -->
|
||||
<div class="margin-top-3">
|
||||
<!-- Submit/cancel buttons -->
|
||||
<div class="margin-top-3">
|
||||
<a
|
||||
type="button"
|
||||
href="{% url 'members' %}"
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
name="btn-cancel-click"
|
||||
aria-label="Cancel adding new member"
|
||||
>Cancel
|
||||
</a>
|
||||
</a>
|
||||
<a
|
||||
id="invite_member_trigger"
|
||||
href="#invite-member-modal"
|
||||
|
|
@ -112,8 +113,8 @@
|
|||
data-open-modal
|
||||
>Trigger invite member modal</a>
|
||||
<button id="invite_new_member_submit" type="submit" class="usa-button">Invite Member</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
class="usa-modal"
|
||||
|
|
@ -170,6 +171,7 @@
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@
|
|||
|
||||
{% block title %} Domains | {% endblock %}
|
||||
|
||||
<!-- Form messages -->
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<h1 id="domains-header">Domains</h1>
|
||||
<section class="section-outlined">
|
||||
<div class="section-outlined__header margin-bottom-3">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,13 @@
|
|||
|
||||
{% block title %} Domain Requests | {% endblock %}
|
||||
|
||||
<!-- Form messages -->
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock messages%}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
|
||||
<h1 id="domains-header">Domain requests</h1>
|
||||
<section class="section-outlined">
|
||||
<div class="section-outlined__header margin-bottom-3">
|
||||
|
|
@ -27,4 +33,5 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,11 @@
|
|||
</div>
|
||||
|
||||
<div class="tablet:grid-col-9" id="main-content">
|
||||
|
||||
<!-- Form messages -->
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% include "includes/form_errors.html" with form=form %}
|
||||
{% endblock messages%}
|
||||
|
||||
<h1>Organization</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
|
||||
<!-- Form messages -->
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
{% endblock messages%}
|
||||
|
||||
<div id="main-content">
|
||||
<h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@
|
|||
{% load static %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
{% block messages %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
|
||||
<div class="grid-row grid-gap">
|
||||
<div class="tablet:grid-col-3">
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@ Edit your User Profile |
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="grid-container">
|
||||
<div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
|
||||
<main id="main-content" class="grid-container grid-container--widescreen">
|
||||
<div class="{% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
|
||||
<div class="desktop:grid-col-8 desktop:grid-offset-2">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3">
|
||||
|
|
@ -90,11 +91,12 @@ Edit your User Profile |
|
|||
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
{% endblock content %}
|
||||
|
||||
{% block content_bottom %}
|
||||
{% block content_bottom %}
|
||||
{% include "includes/profile_form.html" with form=form %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock content_bottom %}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue