zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-31 06:56:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Full cleanup / refactor

Browse source
This commit is contained in:
CocoByte 2024-12-18 22:29:06 -07:00
parent 79bc7102e1
commit 7e4d8e34ad
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
26 changed files with 199 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/registrar/assets/src/sass/_theme/_alerts.scss
View file

@ -12,14 +12,24 @@
} }
} }
// The icon was off center for some reason // The icon was off center for some reason
// Fixes that issue // Fixes that issue
@media (min-width: 64em){ @media (min-width: 64em){
.usa-alert__body::before { .usa-alert--warning{
left: 2.5rem !important; .usa-alert__body::before {
left: 1rem !important;
}
} }
.usa-alert__body { .usa-alert__body.margin-left-1 {
padding-left: 5rem!important; margin-left: 0.5rem!important;
}
.usa-alert__body--widescreen::before {
left: 4rem !important;
}
.usa-alert__body--widescreen {
padding-left: 7rem!important;
} }
} }

16
src/registrar/assets/src/sass/_theme/_base.scss
View file

@ -2,8 +2,8 @@
@use "cisa_colors" as *; @use "cisa_colors" as *;
$widescreen-max-width: 1920px; $widescreen-max-width: 1920px;
$widescreen-left-padding: 48px; $widescreen-left-padding: 4.5rem;
$widescreen-right-padding: 48px; $widescreen-right-padding: 4.5rem;
$hot-pink: #FFC3F9; $hot-pink: #FFC3F9;
@ -252,11 +252,13 @@ abbr[title] {
// This is used in cases where we want to align content to widescreen margins // 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 // but we don't want the content itself to have widescreen widths
.padding-left--widescreen { @media (min-width: 64em) {
padding-left: $widescreen-left-padding !important; .padding-left--widescreen {
} padding-left: $widescreen-left-padding !important;
.padding-right--widescreen { }
padding-left: $widescreen-right-padding !important; .padding-right--widescreen {
padding-right: $widescreen-right-padding !important;
}
} }
.margin-right-neg-4px { .margin-right-neg-4px {

10
src/registrar/assets/src/sass/_theme/_containers.scss
View file

@ -10,8 +10,16 @@
// NOTE: !important is used because _font.scss overrides this // NOTE: !important is used because _font.scss overrides this
@media (min-width: 64em) { @media (min-width: 64em) {
.usa-footer__secondary-section .grid-container--widescreen { .grid-container--widescreen {
padding-left: $widescreen-left-padding !important; padding-left: $widescreen-left-padding !important;
padding-right: $widescreen-right-padding !important; padding-right: $widescreen-right-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_left_justified is used in the html).
.max-width--grid-container {
max-width: 64rem;
}

4
src/registrar/assets/src/sass/_theme/_header.scss
View file

@ -110,8 +110,8 @@
} }
} }
.usa-nav__secondary { .usa-nav__secondary {
// I don't know why USWDS has this at 2 rem, which puts it out of alignment right: 1rem;
right: 3rem; padding-right: $widescreen-right-padding;
color: color('white'); color: color('white');
bottom: 4.3rem; bottom: 4.3rem;
.usa-nav-link, .usa-nav-link,

1
src/registrar/config/settings.py
View file

@ -252,6 +252,7 @@ TEMPLATES = [
"registrar.context_processors.add_path_to_context", "registrar.context_processors.add_path_to_context",
"registrar.context_processors.portfolio_permissions", "registrar.context_processors.portfolio_permissions",
"registrar.context_processors.is_widescreen_mode", "registrar.context_processors.is_widescreen_mode",
"registrar.context_processors.is_widescreen_left_justified"
], ],
}, },
}, },

51
src/registrar/context_processors.py
View file

@ -99,30 +99,69 @@ def portfolio_permissions(request):
def is_widescreen_mode(request): def is_widescreen_mode(request):
widescreen_paths = [] # If this list is meant to include specific paths, populate it. widescreen_paths = [
"/domain-request/",
] # If this list is meant to include specific paths, populate it.
portfolio_widescreen_paths = [ portfolio_widescreen_paths = [
"/domains/", "/domains/",
"/requests/", "/requests/",
"/request/",
"/no-organization-requests/", "/no-organization-requests/",
"/no-organization-domains/", "/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. # widescreen_paths can be a bear as it trickles down sub-urls. exclude_paths gives us a way out.
exclude_paths = [ exclude_paths = [
"/domains/edit", "/domains/edit",
"/admin/"
] ]
# Check if the current path matches a widescreen path or the root path. # 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_widescreen = (
any(path in request.path for path in widescreen_paths)
or request.path == "/" )
# Check if the user is an organization user and the path matches portfolio paths. # Check if the user is an organization user and the path matches portfolio paths.
is_portfolio_widescreen = ( is_portfolio_widescreen = (
hasattr(request.user, "is_org_user") hasattr(request.user, "is_org_user")
and request.user.is_org_user(request) and request.user.is_org_user(request)
and any(path in request.path for path in portfolio_widescreen_paths) 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)
) )
is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
# Return a dictionary with the widescreen mode status. # Return a dictionary with the widescreen mode status.
return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen} return {"is_widescreen_mode": (is_widescreen or is_portfolio_widescreen or get_is_widescreen_left_justified(request)) and not is_excluded}
def get_is_widescreen_left_justified(request):
include_paths = [
"/user-profile",
"/request/",
"/domain/",
]
portfolio_include_paths = [
"/organization/",
"/senior-official/",
"/member/",
"/members/new-member",
]
exclude_paths = [
]
is_excluded = 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_left_justified = any(path in request.path for path in include_paths)
# Check if the user is an organization user and the path matches portfolio_only paths.
is_portfolio_widescreen_left_justified = (
hasattr(request.user, "is_org_user")
and request.user.is_org_user(request)
and any(path in request.path for path in portfolio_include_paths)
)
return (is_widescreen_left_justified or is_portfolio_widescreen_left_justified) and not is_excluded
def is_widescreen_left_justified(request):
# Return a dictionary with the widescreen mode status.
return {"is_widescreen_left_justified": get_is_widescreen_left_justified(request)}

2
src/registrar/templates/401.html
View file

@ -6,7 +6,7 @@
{% block content %} {% block content %}
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}"> <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="grid-row grow-gap"> <div class="grid-row grow-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-6 usa-prose margin-bottom-3"> <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
<h1> <h1>
{% translate "You are not authorized to view this page" %} {% translate "You are not authorized to view this page" %}

2
src/registrar/templates/403.html
View file

@ -6,7 +6,7 @@
{% block content %} {% block content %}
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}"> <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="grid-row grow-gap"> <div class="grid-row grow-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-6 usa-prose margin-bottom-3"> <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
<h1> <h1>
{% translate "You're not authorized to view this page." %} {% translate "You're not authorized to view this page." %}

2
src/registrar/templates/404.html
View file

@ -6,7 +6,7 @@
{% block content %} {% block content %}
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}"> <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-6 usa-prose margin-bottom-3"> <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
<h1> <h1>
{% translate "We couldn’t find that page" %} {% translate "We couldn’t find that page" %}

2
src/registrar/templates/500.html
View file

@ -6,7 +6,7 @@
{% block content %} {% block content %}
<main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}"> <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-6 usa-prose margin-bottom-3"> <div class="tablet:grid-col-6 usa-prose margin-bottom-3">
<h1> <h1>
{% translate "We're having some trouble." %} {% translate "We're having some trouble." %}

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

@ -97,7 +97,7 @@
<section class="usa-banner" aria-label="Official website of the United States government"> <section class="usa-banner" aria-label="Official website of the United States government">
<div class="usa-accordion"> <div class="usa-accordion">
<header class="usa-banner__header"> <header class="usa-banner__header">
<div class="usa-banner__inner usa-banner__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-banner__inner usa-banner__inner--widescreen padding-left--widescreen padding-right--widescreen">
<div class="grid-col-auto"> <div class="grid-col-auto">
<img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" /> <img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
</div> </div>

6
src/registrar/templates/domain_base.html
View file

@ -4,10 +4,10 @@
{% block title %}{{ domain.name }} | {% endblock %} {% block title %}{{ domain.name }} | {% endblock %}
{% block content %} {% block content %}
<div class="grid-container grid-container--widescreen desktop:padding-left-6"> <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-3 maxw-fit-content"> <div class="tablet:grid-col-3 ">
<p class="font-body-md margin-top-0 margin-bottom-2 <p class="font-body-md margin-top-0 margin-bottom-2
text-primary-darker text-semibold domain-name-wrap" text-primary-darker text-semibold domain-name-wrap"
> >

4
src/registrar/templates/domain_request_form.html
View file

@ -3,8 +3,8 @@
{% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %} {% block title %}{{form_titles|get_item:steps.current}} | Request a .gov | {% endblock %}
{% block content %} {% block content %}
<div class="grid-container grid-container--widescreen desktop:padding-left-6"> <div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-3"> <div class="tablet:grid-col-3">
{% include 'domain_request_sidebar.html' %} {% include 'domain_request_sidebar.html' %}
</div> </div>

2
src/registrar/templates/includes/banner-error.html
View file

@ -1,6 +1,6 @@
<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert"> <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 usa-alert--error">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<h4 class="usa-alert__heading"> <h4 class="usa-alert__heading">
Header Header
</h4> </h4>

2
src/registrar/templates/includes/banner-info.html
View file

@ -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"> <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">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<h4 class="usa-alert__heading"> <h4 class="usa-alert__heading">
Header Header
</h4> </h4>

2
src/registrar/templates/includes/banner-non-production-alert.html
View file

@ -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"> <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">
<div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} usa-alert__body--widescreen"> <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<p class="usa-alert__text maxw-none"> <p class="usa-alert__text maxw-none">
<strong>Attention:</strong> You are on a test site. <strong>Attention:</strong> You are on a test site.
</p> </p>

2
src/registrar/templates/includes/banner-service-disruption.html
View file

@ -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"> <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">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<h3 class="usa-alert__heading"> <h3 class="usa-alert__heading">
Service disruption Service disruption
</h3> </h3>

2
src/registrar/templates/includes/banner-site-alert.html
View file

@ -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"> <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">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<h3 class="usa-alert__heading"> <h3 class="usa-alert__heading">
Header here Header here
</h3> </h3>

2
src/registrar/templates/includes/banner-system-outage.html
View file

@ -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"> <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">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<h3 class="usa-alert__heading"> <h3 class="usa-alert__heading">
System outage System outage
</h3> </h3>

2
src/registrar/templates/includes/banner-warning.html
View file

@ -1,6 +1,6 @@
<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert"> <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 usa-alert--warning">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<h4 class="usa-alert__heading"> <h4 class="usa-alert__heading">
Header Header
</h4> </h4>

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

@ -3,7 +3,7 @@
<footer class="usa-footer"> <footer class="usa-footer">
<div class="usa-footer__secondary-section"> <div class="usa-footer__secondary-section">
<div class="grid-container grid-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="grid-container grid-container--widescreen">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap">
<div <div
class=" class="
@ -51,7 +51,7 @@
class="usa-identifier__section usa-identifier__section--masthead" class="usa-identifier__section usa-identifier__section--masthead"
aria-label="Agency identifier" aria-label="Agency identifier"
> >
<div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
<div class="usa-identifier__logos"> <div class="usa-identifier__logos">
<a rel="noopener noreferrer" target="_blank" href="https://www.cisa.gov" class="usa-identifier__logo" <a rel="noopener noreferrer" target="_blank" href="https://www.cisa.gov" class="usa-identifier__logo"
><img ><img
@ -77,7 +77,7 @@
class="usa-identifier__section usa-identifier__section--required-links" class="usa-identifier__section usa-identifier__section--required-links"
aria-label="Important links" aria-label="Important links"
> >
<div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
<ul class="usa-identifier__required-links-list"> <ul class="usa-identifier__required-links-list">
<li class="usa-identifier__required-links-item"> <li class="usa-identifier__required-links-item">
<a rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/' %}" <a rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/' %}"
@ -119,7 +119,7 @@
class="usa-identifier__section usa-identifier__section--usagov" class="usa-identifier__section usa-identifier__section--usagov"
aria-label="U.S. government information and services" aria-label="U.S. government information and services"
> >
<div class="usa-identifier__container usa-identifier__container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-identifier__container usa-identifier__container--widescreen padding-left--widescreen padding-right--widescreen">
<div class="usa-identifier__usagov-description"> <div class="usa-identifier__usagov-description">
Looking for U.S. government information and services? Looking for U.S. government information and services?
</div> </div>

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

@ -1,7 +1,7 @@
{% load static %} {% load static %}
<header class="usa-header usa-header--basic"> <header class="usa-header usa-header--basic">
<div class="usa-nav-container usa-nav-container--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-nav-container usa-nav-container--widescreen padding-left--widescreen padding-right--widescreen">
<div class="usa-navbar"> <div class="usa-navbar">
{% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %} {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
<button type="button" class="usa-menu-btn">Menu</button> <button type="button" class="usa-menu-btn">Menu</button>

4
src/registrar/templates/includes/header_extended.html
View file

@ -2,13 +2,13 @@
{% load custom_filters %} {% load custom_filters %}
<header class="usa-header usa-header--extended"> <header class="usa-header usa-header--extended">
<div class="usa-navbar usa-navbar--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-navbar usa-navbar--widescreen padding-left--widescreen padding-right--widescreen">
{% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %} {% include "includes/gov_extended_logo.html" with logo_clickable=logo_clickable %}
<button type="button" class="usa-menu-btn">Menu</button> <button type="button" class="usa-menu-btn">Menu</button>
</div> </div>
{% block usa_nav %} {% block usa_nav %}
<nav class="usa-nav" aria-label="Primary navigation"> <nav class="usa-nav" aria-label="Primary navigation">
<div class="usa-nav__inner usa-nav__inner--widescreen tablet:padding-left--widescreen tablet:padding-right--widescreen"> <div class="usa-nav__inner usa-nav__inner--widescreen padding-left--widescreen padding-right--widescreen">
<button type="button" class="usa-nav__close"> <button type="button" class="usa-nav__close">
<img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" /> <img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
</button> </button>

23
src/registrar/templates/portfolio_base.html
View file

@ -8,22 +8,25 @@
{% if user.is_authenticated %} {% if user.is_authenticated %}
{# the entire logged in page goes here #} {# the entire logged in page goes here #}
<div class="tablet:grid-col-11 desktop:grid-col-10 tablet:grid-offset-1"> <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
<div class="tablet:grid-col-11 desktop:grid-col-10 {% if not is_widescreen_left_justified %} tablet:grid-offset-1 {% endif %}">
{% block messages %} {% block messages %}
{% include "includes/form_messages.html" %} {% include "includes/form_messages.html" %}
{% endblock %} {% endblock %}
{% block portfolio_content %}{% endblock %} {% block portfolio_content %}{% endblock %}
</div> </div>
{% else %} {# not user.is_authenticated #} {% else %} {# not user.is_authenticated #}
{# the entire logged out page goes here #} {# the entire logged out page goes here #}
<p><a class="usa-button" href="{% url 'login' %}"> <p><a class="usa-button" href="{% url 'login' %}">
Sign in Sign in
</a></p> </a></p>
{% endif %} {% endif %}
</div>
</main> </main>
{% endblock content%} {% endblock content%}

2
src/registrar/templates/portfolio_members.html
View file

@ -12,7 +12,7 @@
<div id="main-content"> <div id="main-content">
<div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none"> <div id="toggleable-alert" class="usa-alert usa-alert--slim margin-bottom-2 display-none">
<div class="usa-alert__body usa-alert__body--widescreen"> <div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
<p class="usa-alert__text "> <p class="usa-alert__text ">
<!-- alert message will be conditionally populated by javascript --> <!-- alert message will be conditionally populated by javascript -->
</p> </p>

160
src/registrar/templates/profile.html
View file

@ -11,90 +11,92 @@ Edit your User Profile |
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<main id="main-content" class="grid-container grid-container--widescreen tablet:padding-left-6"> <main id="main-content" class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
<div class="desktop:grid-col-8"> <div class="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
{% if messages %} <div class="desktop:grid-col-8">
{% for message in messages %} {% if messages %}
<div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3"> {% for message in messages %}
<div class="usa-alert__body"> <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3">
{{ message }} <div class="usa-alert__body">
</div> {{ message }}
</div> </div>
{% endfor %} </div>
{% endif %} {% endfor %}
{% include "includes/form_errors.html" with form=form %} {% endif %}
{% include "includes/form_errors.html" with form=form %}
{% if show_back_button %} {% if show_back_button %}
<a href="{% url form.initial.redirect %}" class="breadcrumb__back"> <a href="{% url form.initial.redirect %}" class="breadcrumb__back">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{% static 'img/sprite.svg' %}#arrow_back"></use> <use xlink:href="{% static 'img/sprite.svg' %}#arrow_back"></use>
</svg> </svg>
<p class="margin-left-05 margin-top-0 margin-bottom-0 line-height-sans-1"> <p class="margin-left-05 margin-top-0 margin-bottom-0 line-height-sans-1">
{{ profile_back_button_text }} {{ profile_back_button_text }}
</p> </p>
</a> </a>
{% endif %} {% endif %}
{% if show_confirmation_modal %} {% if show_confirmation_modal %}
<a <a
href="#toggle-confirmation-modal" href="#toggle-confirmation-modal"
class="usa-button display-none show-confirmation-modal" class="usa-button display-none show-confirmation-modal"
aria-controls="toggle-confirmation-modal" aria-controls="toggle-confirmation-modal"
data-open-modal data-open-modal
>Open confirmation modal</a> >Open confirmation modal</a>
<div <div
class="usa-modal usa-modal--lg is-visible" class="usa-modal usa-modal--lg is-visible"
id="toggle-confirmation-modal" id="toggle-confirmation-modal"
aria-labelledby="Add contact information" aria-labelledby="Add contact information"
aria-describedby="Add contact information" aria-describedby="Add contact information"
data-force-action data-force-action
> >
<div class="usa-modal__content"> <div class="usa-modal__content">
<div class="usa-modal__main"> <div class="usa-modal__main">
<h2 class="usa-modal__heading"> <h2 class="usa-modal__heading">
Add contact information
</h2>
<div class="usa-prose">
<p>
.Gov domain registrants must maintain accurate contact information in the .gov registrar.
Before you can manage your domain, we need you to add your contact information.
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button
type="button"
class="usa-button padding-105 text-center"
data-close-modal
>
Add contact information Add contact information
</button> </h2>
</li> <div class="usa-prose">
</ul> <p>
.Gov domain registrants must maintain accurate contact information in the .gov registrar.
Before you can manage your domain, we need you to add your contact information.
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button
type="button"
class="usa-button padding-105 text-center"
data-close-modal
>
Add contact information
</button>
</li>
</ul>
</div>
</div>
<button
type="button"
class="usa-button usa-modal__close"
aria-label="Close this window"
data-close-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
</button>
</div> </div>
</div> </div>
<button {% endif %}
type="button"
class="usa-button usa-modal__close"
aria-label="Close this window"
data-close-modal {% endblock content %}
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> {% block content_bottom %}
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use> {% include "includes/profile_form.html" with form=form %}
</svg>
</button>
</div>
</div> </div>
{% endif %} </div>
{% endblock content %}
{% block content_bottom %}
{% include "includes/profile_form.html" with form=form %}
</div>
</main> </main>
{% endblock content_bottom %} {% endblock content_bottom %}