mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-30 06:26:34 +02:00
Full cleanup / refactor
This commit is contained in:
CocoByte
parent
79bc7102e1
commit
7e4d8e34ad
26 changed files with 199 additions and 134 deletions
|
|
@ -12,14 +12,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// The icon was off center for some reason
|
||||
// Fixes that issue
|
||||
@media (min-width: 64em){
|
||||
.usa-alert--warning{
|
||||
.usa-alert__body::before {
|
||||
left: 2.5rem !important;
|
||||
left: 1rem !important;
|
||||
}
|
||||
.usa-alert__body {
|
||||
padding-left: 5rem!important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
@use "cisa_colors" as *;
|
||||
|
||||
$widescreen-max-width: 1920px;
|
||||
$widescreen-left-padding: 48px;
|
||||
$widescreen-right-padding: 48px;
|
||||
$widescreen-left-padding: 4.5rem;
|
||||
$widescreen-right-padding: 4.5rem;
|
||||
|
||||
$hot-pink: #FFC3F9;
|
||||
|
||||
|
|
@ -252,11 +252,13 @@ abbr[title] {
|
|||
|
||||
// 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
|
||||
.padding-left--widescreen {
|
||||
@media (min-width: 64em) {
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,16 @@
|
|||
|
||||
// NOTE: !important is used because _font.scss overrides this
|
||||
@media (min-width: 64em) {
|
||||
.usa-footer__secondary-section .grid-container--widescreen {
|
||||
.grid-container--widescreen {
|
||||
padding-left: $widescreen-left-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;
|
||||
}
|
||||
|
|
@ -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-right-padding;
|
||||
color: color('white');
|
||||
bottom: 4.3rem;
|
||||
.usa-nav-link,
|
||||
|
|
|
|||
|
|
@ -252,6 +252,7 @@ TEMPLATES = [
|
|||
"registrar.context_processors.add_path_to_context",
|
||||
"registrar.context_processors.portfolio_permissions",
|
||||
"registrar.context_processors.is_widescreen_mode",
|
||||
"registrar.context_processors.is_widescreen_left_justified"
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -99,30 +99,69 @@ def portfolio_permissions(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 = [
|
||||
"/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",
|
||||
"/admin/"
|
||||
]
|
||||
|
||||
# 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.
|
||||
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)
|
||||
)
|
||||
|
||||
is_excluded = any(exclude_path in request.path for exclude_path in exclude_paths)
|
||||
|
||||
# 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)}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block content %}
|
||||
<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">
|
||||
<h1>
|
||||
{% translate "You are not authorized to view this page" %}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block content %}
|
||||
<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">
|
||||
<h1>
|
||||
{% translate "You're not authorized to view this page." %}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block content %}
|
||||
<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">
|
||||
<h1>
|
||||
{% translate "We couldn’t find that page" %}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
{% block content %}
|
||||
<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">
|
||||
<h1>
|
||||
{% translate "We're having some trouble." %}
|
||||
|
|
|
|||
|
|
@ -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 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">
|
||||
<img class="usa-banner__header-flag" src="{% static 'img/us_flag_small.png' %}" alt="U.S. flag" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
{% block title %}{{ domain.name }} | {% endblock %}
|
||||
|
||||
{% 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="tablet:grid-col-3 maxw-fit-content">
|
||||
<div class="grid-row grid-gap {% if is_widescreen_left_justified %} 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 grid-container--widescreen desktop:padding-left-6">
|
||||
<div class="grid-row grid-gap">
|
||||
<div class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">
|
||||
<div class="grid-row grid-gap {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
|
||||
<div class="tablet:grid-col-3">
|
||||
{% include 'domain_request_sidebar.html' %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 usa-alert__body--widescreen">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<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 usa-alert__body--widescreen">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<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 %} 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">
|
||||
<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 usa-alert__body--widescreen">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<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 usa-alert__body--widescreen">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<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 usa-alert__body--widescreen">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<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 usa-alert__body--widescreen">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<h4 class="usa-alert__heading">
|
||||
Header
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<footer class="usa-footer">
|
||||
<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="
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
class="usa-identifier__section usa-identifier__section--masthead"
|
||||
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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
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 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">
|
||||
{% 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 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 %}
|
||||
<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 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">
|
||||
<img src="{%static 'img/usa-icons/close.svg'%}" role="img" alt="Close" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
{% 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">
|
||||
<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 %}
|
||||
{% include "includes/form_messages.html" %}
|
||||
{% endblock %}
|
||||
|
|
@ -24,6 +25,8 @@
|
|||
</a></p>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{% endblock content%}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<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">
|
||||
<div class="usa-alert__body {% if is_widescreen_mode %} usa-alert__body--widescreen {% endif %}">
|
||||
<p class="usa-alert__text ">
|
||||
<!-- alert message will be conditionally populated by javascript -->
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ Edit your User Profile |
|
|||
{% endblock %}
|
||||
|
||||
{% 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="grid-row {% if is_widescreen_left_justified %} max-width--grid-container {% endif %}">
|
||||
<div class="desktop:grid-col-8">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
|
|
@ -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