Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solicitation report refactor #162

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Solicitation report refactor #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c12e30a
refactor: update header component styling and structure to be in-line…
collinschreyer-dev Jan 14, 2025
52fffd7
Refactor: Update solicitation report to align with UI team's recommen…
collinschreyer-dev Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 28 additions & 51 deletions src/app/header/header.component.html
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Were the header files accidentally included in this push?

Original file line number Diff line number Diff line change
Expand Up @@ -4,67 +4,44 @@
<div class="usa-header usa-header--basic">
<div class="grid-container-widescreen">
<nav class="usa-nav" role="navigation" aria-label="main navigation">
<!-- Left Side: SRT Logo -->
<!-- Left Side: Logo Group -->
<div class="logo-container">
<a [routerLink]="['/home']" aria-label="SRT Home Page">
<img src="../../assets/srtlogo.png" alt="SRT Logo" height="40">
</a>
<img src="../../assets/gsa-logo.png" alt="GSA Logo" aria-label="GSA Logo" class="gsa-logo-img">
<img src="../../assets/srtlogo.png" alt="SRT Logo" class="srt-logo-img">
</div>

<!-- Center: Main Navigation -->
<ul class="usa-nav__primary" *ngIf="isLogin">
<li class="usa-nav__primary-item">
<a [routerLink]="['/home']" class="usa-nav__link" [class.usa-current]="GetHash('home')"
(click)="menuClick('/home')">Home</a>
</li>
<li class="usa-nav__primary-item">
<a [routerLink]="['/solicitation/report']" class="usa-nav__link"
[class.usa-current]="GetHash('solicitation')"
(click)="menuClick('/solicitation/report')">Solicitations</a>
<!-- Right Side: Navigation -->
<ul class="right-nav-group">
<li class="nav-item">
<a [routerLink]="['/home']" class="nav-link">Home</a>
</li>
<li class="usa-nav__primary-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/analytics']" class="usa-nav__link" [class.usa-current]="GetHash('analytics')"
(click)="menuClick('/analytics')" id="nav-analytics">Analytics</a>
<li class="nav-item">
<a [routerLink]="['/solicitation/report']" class="nav-link">Daily Report</a>
</li>
<li class="usa-nav__primary-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/admin']" class="usa-nav__link" [class.usa-current]="GetHash('admin')"
(click)="menuClick('/admin')" [attr.tabindex]="isGSAAdmin ? 0 : -1">Administration</a>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please include back the menu_clicks since that is related to google analytics we are collecting.

<!-- Admin-only navigation items -->
<li class="nav-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/analytics']" class="nav-link" id="nav-analytics">Analytics</a>
</li>
<li class="usa-nav__primary-item">
<a href="https://app.buyaccessible.gov/" class="usa-nav__link" target="_blank"
rel="noopener noreferrer">Additional Resources</a>
<li class="nav-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/admin']" class="nav-link" tabindex="{{ isGSAAdmin ? 0 : -1}}">Administration</a>
</li>
<li class="usa-nav__primary-item">
<a [routerLink]="['/help/contactus']" class="usa-nav__link"
[class.usa-current]="GetHash('contactus')"
(click)="menuClick('/help/contactus')">Contact Us</a>
<li class="nav-item">
<a [routerLink]="['/help/contactus']" class="nav-link">Contact us</a>
</li>
<li class="usa-nav__primary-item">
<a [routerLink]="['/help/faq']" class="usa-nav__link" [class.usa-current]="GetHash('faq')"
(click)="menuClick('/help/faq')">FAQs</a>
<li class="nav-item">
<a href="https://app.buyaccessible.gov/" target="_blank" rel="noopener noreferrer" class="nav-link">
ART tool
<svg class="external-link-icon" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24">
<path d="M5 3c-1.093 0-2 .907-2 2v14c0 1.093.907 2 2 2h14c1.093 0 2-.907 2-2v-7h-2v7H5V5h7V3H5zm9 0v2h3.586l-9.293 9.293 1.414 1.414L19 6.414V10h2V3h-7z"/>
</svg>
</a>
</li>
</ul>

<!-- Right Side: User Menu and GSA Logo -->
<ul class="right-nav-group">
<li class="nav-item" *ngIf="isLogin">
<div class="user-menu">
<button class="usa-button usa-button--outline" type="button">
Hello, {{firstName}}
<svg class="usa-icon margin-left-05" aria-hidden="true" role="img">
<use xlink:href="/assets/img/sprite.svg#expand_more"></use>
</svg>
</button>
<ul class="usa-nav__submenu" role="menu">
<li role="none">
<a href="javascript:void(0)" (click)="onLogout()" (blur)="popUpMenuLostFocus()"
id="menu-logout" role="menuitem">Log Out</a>
</li>
</ul>
</div>
<li class="nav-item">
<a [routerLink]="['/help/faq']" class="nav-link">FAQs</a>
</li>
<li class="nav-item gsa-logo-item">
<img src="../../assets/gsa-logo.png" alt="GSA Logo" aria-label="GSA Logo" height="40">
<li class="nav-item">
<a href="javascript:void(0)" (click)="onLogout()" (blur)="popUpMenuLostFocus()"
class="nav-link" role="menuitem">Log Out</a>
</li>
</ul>
</nav>
Expand Down
204 changes: 49 additions & 155 deletions src/app/header/header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,216 +2,110 @@
#header {
width: 100%;
background-color: white;
position: sticky; /* Change from relative to sticky */
top: 0; /* Stick to the top */
z-index: 1000; /* Ensure header stays above other content */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for visual separation */
}

#header {
transition: box-shadow 0.3s ease;
border-bottom: 1px solid #dfe1e2;
}


.usa-header {
padding: 0.5rem 0;
padding: 0.75rem 0;
border-bottom: none;
}

.grid-container-widescreen {
max-width: 1400px;
max-width: 1200px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we just utilize 100% or utilize vh.

margin: 0 auto;
padding: 0 1rem;
padding: 0 2rem;
}

/* Main Navigation Container */
/* Navigation Container */
.usa-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0;
flex-wrap: nowrap;
width: 100%;
}

/* Left Logo */
/* Logo Styling */
.logo-container {
flex-shrink: 0;
padding-right: 2rem;
}

.logo-container img {
height: 40px;
width: auto;
}

/* Center Navigation */
.usa-nav__primary {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
flex-grow: 1;
justify-content: center;
gap: 1rem;
}

.usa-nav__primary-item {
margin: 0;
}

.usa-nav__link {
color: #1b1b1b;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}

.usa-nav__link:hover {
color: #005ea2;
}
.gsa-logo-img {
height: 50px;
width: auto;
}

.usa-current {
color: #005ea2;
font-weight: bold;
.srt-logo-img {
height: 32px;
width: auto;
}
}

/* Right Side Navigation Group */
/* Navigation Links */
.right-nav-group {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
margin-left: auto;
}

.right-nav-group .nav-item {
display: flex;
align-items: center;
}

.gsa-logo-item {
margin-left: 1rem;
gap: 1.5rem;
}

.gsa-logo-item img {
height: 40px;
width: auto;
}

/* User Menu */
.user-menu {
position: relative;
}

.usa-button.usa-button--outline {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: transparent;
border: 1px solid #ffffff;
color: #005ea2;
font-weight: normal;
.nav-item {
margin: 0;
white-space: nowrap;
box-shadow: none; /* Remove box shadow */
}

.usa-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}

/* Dropdown Menu */
.usa-nav__submenu {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #dfe1e2;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-width: 150px;
display: block;
visibility: hidden; /* Hide initially */
opacity: 0;
z-index: 1000;
margin-top: 0.25rem;
padding: 0.5rem 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Keep submenu visible briefly after mouse leaves button */
.user-menu:hover .usa-nav__submenu,
.usa-nav__submenu:hover {
visibility: visible;
opacity: 1;
transition-delay: 0s; /* Show immediately */
}

.user-menu:hover .usa-nav__submenu {
transition-delay: 0s, 0.2s; /* 200ms delay for hiding */
}

.usa-nav__submenu a {
color: #1b1b1b;
.nav-link {
color: #71767a;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
font-size: 0.9rem;
display: inline-flex;
align-items: center;

.usa-nav__submenu a:hover {
background-color: #f0f0f0;
&:hover {
color: #1a4480;
}
}

/* Skip Nav */
/* Skip Nav (maintaining accessibility) */
.usa-skipnav {
position: absolute;
left: -999em;
padding: 0.5rem 1rem;
background-color: white;
z-index: 1000;
}

.usa-skipnav:focus {
left: 0;
}

/* Border Bottom */
.border-bottom {
border-bottom: 1px solid #dfe1e2;
&:focus {
left: 0;
}
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
.usa-nav__primary {
gap: 0.5rem;
}

.usa-nav__link {
padding: 0.5rem;
}
/* External link icon styling */
.external-link-icon {
margin-left: 4px;
fill: currentColor;
vertical-align: middle;
display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.usa-nav {
flex-wrap: wrap;
.grid-container-widescreen {
padding: 0 1rem;
}

.usa-nav__primary {
order: 3;
width: 100%;
margin-top: 1rem;
flex-wrap: wrap;
}


.right-nav-group {
order: 2;
gap: 1rem;
}

.logo-container {
order: 1;
.gsa-logo-img {
height: 40px;
}

.srt-logo-img {
height: 24px;
}
}
}
Loading