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 #}
<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 %}
{% include "includes/form_messages.html" %}
{% endblock %}

View file

@ -8,7 +8,7 @@ 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 %}">
{% url 'members' as url %}
<nav class="usa-breadcrumb padding-top-0 margin-bottom-3" aria-label="Portfolio member breadcrumb">

View file

@ -6,7 +6,7 @@
{% load static %}
{% 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 %}
{% if portfolio_permission %}

View file

@ -6,7 +6,7 @@
{% load static %}
{% 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 %}
{% if portfolio_permission %}

View file

@ -11,8 +11,9 @@
{% block portfolio_content %}
{% include "includes/form_errors.html" with form=form %}
<!-- Navigation breadcrumbs -->
<nav class="usa-breadcrumb padding-top-0" aria-label="Domain request breadcrumb">
<div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
<!-- Navigation breadcrumbs -->
<nav class="usa-breadcrumb padding-top-0" 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 +31,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 +70,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 +82,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 +129,6 @@
</a>
<button type="submit" class="usa-button">Update Member</button>
</div>
</form>
</form>
</div>
{% endblock portfolio_content%}

View file

@ -10,14 +10,15 @@
{% 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 mesages -->
{% 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" aria-label="Domain request breadcrumb">
<!-- Navigation breadcrumbs -->
<nav class="usa-breadcrumb padding-top-0" 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>
@ -26,18 +27,18 @@
<span>Add a new member</span>
</li>
</ol>
</nav>
</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>
@ -74,10 +75,10 @@
</div>
{% 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>
@ -97,8 +98,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>
@ -106,10 +107,10 @@
{% with group_classes="usa-form-editable usa-form-editable--no-border padding-top-0" %}
{% input_with_errors form.basic_org_domain_request_permissions %}
{% endwith %}
</div>
</div>
<!-- Submit/cancel buttons -->
<div class="margin-top-3">
<!-- Submit/cancel buttons -->
<div class="margin-top-3">
<a
type="button"
href="{% url 'members' %}"
@ -117,7 +118,7 @@
name="btn-cancel-click"
aria-label="Cancel adding new member"
>Cancel
</a>
</a>
<a
id="invite_member_trigger"
href="#invite-member-modal"
@ -126,16 +127,16 @@
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
<div
class="usa-modal"
id="invite-member-modal"
aria-labelledby="invite-member-heading"
aria-describedby="confirm-invite-description"
style="display: none;"
>
>
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="invite-member-heading">
@ -185,6 +186,7 @@
</svg>
</button>
</div>
</div>
</div>