Refactored margin on portfolio_ pages so that only single-page layouts have left margin

This commit is contained in:
CocoByte 2025-01-02 17:17:43 -07:00
parent 23eb3ebe96
commit ce5e6b7d7c
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
6 changed files with 283 additions and 279 deletions

View file

@ -9,7 +9,7 @@
{# the entire logged in page goes here #} {# the entire logged in page goes here #}
<div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}"> <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 %} {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}"> <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
{% block messages %} {% block messages %}
{% include "includes/form_messages.html" %} {% include "includes/form_messages.html" %}
{% endblock %} {% endblock %}

View file

@ -8,7 +8,7 @@ Organization member
{% load static %} {% load static %}
{% block portfolio_content %} {% block portfolio_content %}
<div id="main-content"> <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
{% url 'members' as url %} {% url 'members' as url %}
<nav class="usa-breadcrumb padding-top-0 margin-bottom-3" aria-label="Portfolio member breadcrumb"> <nav class="usa-breadcrumb padding-top-0 margin-bottom-3" aria-label="Portfolio member breadcrumb">

View file

@ -6,7 +6,7 @@
{% load static %} {% load static %}
{% block portfolio_content %} {% block portfolio_content %}
<div id="main-content"> <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
{% url 'members' as url %} {% url 'members' as url %}
{% if portfolio_permission %} {% if portfolio_permission %}

View file

@ -6,7 +6,7 @@
{% load static %} {% load static %}
{% block portfolio_content %} {% block portfolio_content %}
<div id="main-content"> <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
{% url 'members' as url %} {% url 'members' as url %}
{% if portfolio_permission %} {% if portfolio_permission %}

View file

@ -11,8 +11,9 @@
{% block portfolio_content %} {% block portfolio_content %}
{% include "includes/form_errors.html" with form=form %} {% include "includes/form_errors.html" with form=form %}
<!-- Navigation breadcrumbs --> <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
<nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb"> <!-- Navigation breadcrumbs -->
<nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
<ol class="usa-breadcrumb__list"> <ol class="usa-breadcrumb__list">
<li class="usa-breadcrumb__list-item"> <li class="usa-breadcrumb__list-item">
<a href="{% url 'members' %}" class="usa-breadcrumb__link"><span>Members</span></a> <a href="{% url 'members' %}" class="usa-breadcrumb__link"><span>Members</span></a>
@ -30,14 +31,14 @@
<span>Member access and permissions</span> <span>Member access and permissions</span>
</li> </li>
</ol> </ol>
</nav> </nav>
<!-- Page header --> <!-- Page header -->
<h1>Member access and permissions</h1> <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 %} {% csrf_token %}
<fieldset class="usa-fieldset"> <fieldset class="usa-fieldset">
<legend> <legend>
@ -69,8 +70,8 @@
<!-- Member email --> <!-- Member email -->
</fieldset> </fieldset>
<!-- Member access radio buttons (Toggles other sections) --> <!-- Member access radio buttons (Toggles other sections) -->
<fieldset class="usa-fieldset"> <fieldset class="usa-fieldset">
<legend> <legend>
<h2 class="margin-top-0">Member Access</h2> <h2 class="margin-top-0">Member Access</h2>
</legend> </legend>
@ -81,10 +82,10 @@
{% input_with_errors form.role %} {% input_with_errors form.role %}
{% endwith %} {% endwith %}
</fieldset> </fieldset>
<!-- Admin access form --> <!-- Admin access form -->
<div id="member-admin-permissions" class="margin-top-2"> <div id="member-admin-permissions" class="margin-top-2">
<h2>Admin access permissions</h2> <h2>Admin access permissions</h2>
<p>Member permissions available for admin-level acccess.</p> <p>Member permissions available for admin-level acccess.</p>
@ -128,5 +129,6 @@
</a> </a>
<button type="submit" class="usa-button">Update Member</button> <button type="submit" class="usa-button">Update Member</button>
</div> </div>
</form> </form>
</div>
{% endblock portfolio_content%} {% endblock portfolio_content%}

View file

@ -10,14 +10,15 @@
{% block portfolio_content %} {% block portfolio_content %}
<!-- Form mesages --> <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
{% include "includes/form_errors.html" with form=form %} <!-- Form mesages -->
{% block messages %} {% include "includes/form_errors.html" with form=form %}
{% block messages %}
{% include "includes/form_messages.html" %} {% include "includes/form_messages.html" %}
{% endblock messages%} {% endblock messages%}
<!-- Navigation breadcrumbs --> <!-- Navigation breadcrumbs -->
<nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb"> <nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
<ol class="usa-breadcrumb__list"> <ol class="usa-breadcrumb__list">
<li class="usa-breadcrumb__list-item"> <li class="usa-breadcrumb__list-item">
<a href="{% url 'members' %}" class="usa-breadcrumb__link"><span>Members</span></a> <a href="{% url 'members' %}" class="usa-breadcrumb__link"><span>Members</span></a>
@ -26,18 +27,18 @@
<span>Add a new member</span> <span>Add a new member</span>
</li> </li>
</ol> </ol>
</nav> </nav>
<!-- Page header --> <!-- Page header -->
{% block new_member_header %} {% block new_member_header %}
<h1>Add a new member</h1> <h1>Add a new member</h1>
{% endblock new_member_header %} {% 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> <legend>
<h2>Email</h2> <h2>Email</h2>
</legend> </legend>
@ -46,10 +47,10 @@
{% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %} {% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
{% input_with_errors form.email %} {% input_with_errors form.email %}
{% endwith %} {% endwith %}
</fieldset> </fieldset>
<!-- Member access radio buttons (Toggles other sections) --> <!-- Member access radio buttons (Toggles other sections) -->
<fieldset class="usa-fieldset margin-top-2"> <fieldset class="usa-fieldset margin-top-2">
<legend> <legend>
<h2>Member Access</h2> <h2>Member Access</h2>
</legend> </legend>
@ -74,10 +75,10 @@
</div> </div>
{% endwith %} {% endwith %}
</fieldset> </fieldset>
<!-- Admin access form --> <!-- Admin access form -->
<div id="new-member-admin-permissions" class="margin-top-2"> <div id="new-member-admin-permissions" class="margin-top-2">
<h2>Admin access permissions</h2> <h2>Admin access permissions</h2>
<p>Member permissions available for admin-level acccess.</p> <p>Member permissions available for admin-level acccess.</p>
@ -97,8 +98,8 @@
{% endwith %} {% endwith %}
</div> </div>
<!-- Basic access form --> <!-- Basic access form -->
<div id="new-member-basic-permissions" class="margin-top-2"> <div id="new-member-basic-permissions" class="margin-top-2">
<h2>Basic member permissions</h2> <h2>Basic member permissions</h2>
<p>Member permissions available for basic-level acccess.</p> <p>Member permissions available for basic-level acccess.</p>
@ -106,10 +107,10 @@
{% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %} {% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
{% input_with_errors form.basic_org_domain_request_permissions %} {% input_with_errors form.basic_org_domain_request_permissions %}
{% endwith %} {% endwith %}
</div> </div>
<!-- Submit/cancel buttons --> <!-- Submit/cancel buttons -->
<div class="margin-top-3"> <div class="margin-top-3">
<a <a
type="button" type="button"
href="{% url 'members' %}" href="{% url 'members' %}"
@ -117,7 +118,7 @@
name="btn-cancel-click" name="btn-cancel-click"
aria-label="Cancel adding new member" aria-label="Cancel adding new member"
>Cancel >Cancel
</a> </a>
<a <a
id="invite_member_trigger" id="invite_member_trigger"
href="#invite-member-modal" href="#invite-member-modal"
@ -126,16 +127,16 @@
data-open-modal data-open-modal
>Trigger invite member modal</a> >Trigger invite member modal</a>
<button id="invite_new_member_submit" type="submit" class="usa-button">Invite Member</button> <button id="invite_new_member_submit" type="submit" class="usa-button">Invite Member</button>
</div> </div>
</form> </form>
<div <div
class="usa-modal" class="usa-modal"
id="invite-member-modal" id="invite-member-modal"
aria-labelledby="invite-member-heading" aria-labelledby="invite-member-heading"
aria-describedby="confirm-invite-description" aria-describedby="confirm-invite-description"
style="display: none;" style="display: none;"
> >
<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" id="invite-member-heading"> <h2 class="usa-modal__heading" id="invite-member-heading">
@ -185,6 +186,7 @@
</svg> </svg>
</button> </button>
</div> </div>
</div>
</div> </div>