darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-18 21:44:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

1050 - Fixing repsonsive issues in the header - and beyond

Browse Source
This commit is contained in:
Jonathan Bobel
2024-02-05 13:32:53 -05:00
parent d82b56c644
commit 74d8ed8340
2 changed files with 73 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -26,7 +26,7 @@ i.e.
.usa-logo {
font-family: family("sans");
margin: units(4) 0;
@include at-media-max('mobile-lg') {
@include at-media-max('desktop') {
margin: units(4) 0 units(4) units(2);
}
img {
@@ -43,6 +43,16 @@ i.e.
text-decoration: underline;
}
}
@include at-media-max('desktop') {
padding: 0 units(2);
ul li {
padding-bottom: units(1);
}
}
}
.usa-nav-container {
max-width: 100%;
padding: 0;
}
}
@@ -343,6 +353,9 @@ td.table-empty-message {
background-image: url(../img/material-icons/description.svg);
}
}
.job-table, .dashboard-table {
overflow-x: scroll;
}
}
.dashboard-table {

115
app/templates/components/components/header/template.njk
View File

@@ -44,61 +44,64 @@
<!-- usa header -->
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo display-flex flex-align-center" id="-logo">
{# <div class="logo-img display-flex">
<span class="usa-sr-only">US Notify Logo</span>
<image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
class="usa-flag-logo margin-right-1" width="40" height="35"></image>
</div> #}
<em class="logo-text usa-logo__text">
<a href="/" title="notify.gov">notify.gov</a>
</em>
</div>
{% if current_user.is_authenticated %}
<button type="button" class="usa-menu-btn">Menu</button>
{% endif %}
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion margin-right-1">
{% for item in params.navigation %}
{% if item.href and item.text %}
<li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="usa-nav__secondary margin-bottom-2">
<ul class="usa-nav__secondary-links">
{% for item in params.secondaryNavigation %}
{% if item.href and item.text %}
<li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<!-- <section aria-label="Search component">
<form class="usa-search usa-search--small margin-bottom-2" role="search">
<label class="usa-sr-only" for="search-field">Search</label>
<input class="usa-input" id="search-field" type="search" name="search" />
<button class="usa-button" type="submit">
<img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
</button>
</form>
</section> -->
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
{# <div class="logo-img display-flex">
<span class="usa-sr-only">US Notify Logo</span>
<image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
class="usa-flag-logo margin-right-1" width="40" height="35"></image>
</div> #}
<em class="logo-text usa-logo__text">
<a href="/" title="notify.gov">notify.gov</a>
</em>
<button type="button" class="usa-menu-btn">Menu</button>
</div>
</div>
</nav>
{% if current_user.is_authenticated %}
<button type="button" class="usa-menu-btn">Menu</button>
{% endif %}
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion margin-right-1">
{% for item in params.navigation %}
{% if item.href and item.text %}
<li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="usa-nav__secondary margin-bottom-2">
<ul class="usa-nav__secondary-links">
{% for item in params.secondaryNavigation %}
{% if item.href and item.text %}
<li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<!-- <section aria-label="Search component">
<form class="usa-search usa-search--small margin-bottom-2" role="search">
<label class="usa-sr-only" for="search-field">Search</label>
<input class="usa-input" id="search-field" type="search" name="search" />
<button class="usa-button" type="submit">
<img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
</button>
</form>
</section> -->
</div>
</div>
</nav>
</div>
</header>