Skip to content

Commit

Permalink
Merge branch 'eval-main' into 1388-challenger-managers-dashboard-phoe…
Browse files Browse the repository at this point in the history 
…nix-feedback-v1
  • Loading branch information
@kkrug
kkrug authored Nov 7, 2024
2 parents eb8bdaf + 79eb2a8 commit c1dfe2b
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 92 deletions.
2 changes: 1 addition & 1 deletion assets/css/public/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@import "misc";

html, body {
background-color: #fafafa;
background-color: #fff;
}

// TODO: Move these to appropriate files
Expand Down
20 changes: 12 additions & 8 deletions assets/css/shared/_uswds-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

@media (forced-colors:active) {
.usa-combo-box--pristine .usa-combo-box__clear-input {
background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain;
background: url(/images/close.svg) no-repeat 50%/contain;
display: inline-block;
height: 1rem;
height: 1.5rem;
Expand All @@ -59,21 +59,21 @@
.usa-combo-box--pristine .usa-combo-box__clear-input {
background: none;
background-color: ButtonText;
mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain
mask: url(/images/close.svg) no-repeat center/contain
}
}
}

.usa-combo-box__clear-input {
background-image: url(/images/uswds/img/usa-icons/close.svg), linear-gradient(transparent, transparent);
background-image: url(/images/close.svg), linear-gradient(transparent, transparent);
background-repeat: no-repeat;
display: none;
right: calc(2.5em + 3px)
}

@media (max-width:39.99em) {
.usa-banner__button[aria-expanded=true]:after {
background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain;
background: url(/images/close.svg) no-repeat 50%/contain;
content: "";
display: inline-block;
height: 3rem;
Expand All @@ -86,15 +86,15 @@
.usa-banner__button[aria-expanded=true]:after {
background: none;
background-color: #005ea2;
mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain
mask: url(/images/close.svg) no-repeat center/contain
}
}
}


@media (forced-colors:active) {
.usa-nav__close:before {
background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain;
background: url(/images/close.svg) no-repeat 50%/contain;
content: "";
display: inline-block;
height: 1.25rem;
Expand All @@ -107,7 +107,7 @@
.usa-nav__close:before {
background: none;
background-color: ButtonText;
mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain
mask: url(/images/close.svg) no-repeat center/contain
}
}

Expand Down Expand Up @@ -186,12 +186,16 @@ Add a list of changed settings in the form $setting: value.

.usa-header
{
background-color: #fafafa;
background-color: #fff;
}


@media (min-width: 64em) {
.desktop\:flex-row {
flex-direction: row;
}
}

.font-sans-xs {
font-size: .87rem
}
208 changes: 125 additions & 83 deletions lib/web/templates/layout/_govheader.html.eex
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,147 @@
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<div class="field field--name-body field--type-text-with-summary field--label-hidden field__item">
<section class="usa-banner" aria-label="USA banner area">
<div class="usa-banner">
<div class="usa-accordion">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<img class="usa-banner__header-flag" src="<%= Routes.static_path(@conn, "/images/us_flag_small.png") %>" alt="U.S. flag">
</div>
<div class="grid-col-fill tablet:grid-col-auto">
<p class="usa-banner__header-text">An official website of the United States government</p>
<p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
</div>
<button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
<span class="usa-banner__button-text">Here's how you know</span>
</button>
</div>
</header>
<div class="usa-banner__content usa-accordion__content" id="gov-banner">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="<%= Routes.static_path(@conn, "/images/icon-dot-gov.svg") %>" alt="Dot gov">
<div class="usa-media-block__body">
<p>
<strong>Official websites use .gov</strong><br />A
<strong>.gov</strong> website belongs to an official government
organization in the United States.
</p>
</div>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="<%= Routes.static_path(@conn, "/images/icon-https.svg") %>" alt="Https">
<div class="usa-media-block__body">
<p>
<strong>Secure .gov websites use HTTPS</strong><br />A
<strong>lock</strong> (
<span class="icon-lock"
><svg
xmlns="http://www.w3.org/2000/svg"
width="52"
height="64"
viewBox="0 0 52 64"
class="usa-banner__lock-image"
role="img"
aria-labelledby="banner-lock-description-default"
focusable="false"
>
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default">Locked padlock icon</desc>
<path
fill="#000000"
fill-rule="evenodd"
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
/>
</svg> </span
>) or <strong>https://</strong> means you’ve safely connected to
the .gov website. Share sensitive information only on official,
secure websites.
</p>
</div>
</div>
</div>
</div>
<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">
<div class="grid-col-auto">
<img
aria-hidden="true"
class="usa-banner__header-flag"
src="<%= Routes.static_path(@conn, "/images/us_flag_small.png") %>"
alt=""
/>
</div>
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
<p class="usa-banner__header-text">
An official website of the United States government
</p>
<p class="usa-banner__header-action">Here’s how you know</p>
</div>
<button
type="button"
class="usa-accordion__button usa-banner__button"
aria-expanded="false"
aria-controls="gov-banner-default"
>
<span class="usa-banner__button-text">Here’s how you know</span>
</button>
</div>
</header>
<div
class="usa-banner__content usa-accordion__content"
id="gov-banner-default"
>
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<img
class="usa-banner__icon usa-media-block__img"
src="<%= Routes.static_path(@conn, "/images/icon-dot-gov.svg") %>"
role="img"
alt=""
aria-hidden="true"
/>
<div class="usa-media-block__body">
<p>
<strong>Official websites use .gov</strong><br />A
<strong>.gov</strong> website belongs to an official government
organization in the United States.
</p>
</div>
</div>
</section>
<div class="usa-banner__guidance tablet:grid-col-6">
<img
class="usa-banner__icon usa-media-block__img"
src="<%= Routes.static_path(@conn, "/images/icon-https.svg") %>"
role="img"
alt=""
aria-hidden="true"
/>
<div class="usa-media-block__body">
<p>
<strong>Secure .gov websites use HTTPS</strong><br />A
<strong>lock</strong> (
<span class="icon-lock"
><svg
xmlns="http://www.w3.org/2000/svg"
width="52"
height="64"
viewBox="0 0 52 64"
class="usa-banner__lock-image"
role="img"
aria-labelledby="banner-lock-description-default"
focusable="false"
>
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default">Locked padlock icon</desc>
<path
fill="#000000"
fill-rule="evenodd"
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
/>
</svg> </span
>) or <strong>https://</strong> means you’ve safely connected to
the .gov website. Share sensitive information only on official,
secure websites.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="usa-overlay"></div>

</section>

<header class="usa-header usa-header--basic site-header">
<div class="desktop:display-flex desktop:width-full">

<div class="usa-navbar">
<div class="usa-logo" id="basic-logo">
<a href="https://challenge.gov" title="Home" aria-label="Home">
<img src='<%= Routes.static_path(@conn, "/images/challenge-logo.svg") %>' alt="Challenge Gov Logo" title="Challenge Gov" class="header__challenge-logo">
</a>
<div class="usa-logo">
<em class="usa-logo__text"
><a href="/" title="challenge.gov">
<span class="site-title--long">
<img width="300" class="usa-header__logo-img desktop:margin-bottom-2" src='<%= Routes.static_path(@conn, "/images/challenge-logo.svg") %>' alt="challenge logo" />
</span>
</a></em
>
</div>
<button class="usa-menu-btn" aria-label="menu">Menu</button>
<button type="button" class="usa-menu-btn">Menu</button>
</div>

<nav class="usa-nav usa-header__actions">
<nav aria-label="Primary navigation" class="usa-nav usa-header__actions">
<button type="button" class="usa-nav__close">
<img src="<%= Routes.static_path(Web.Endpoint, "/images/close.svg") %>" role="img" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion flex-align-start">
<li class="usa-nav__primary-item">
<a href="https://www.challenge.gov/#active-challengess" class="menulink usa-nav__link" title="Active challenges" aria-label="Active challenges" data-anchor="active-challenges">Find a Challenge</a>
<a href="/#active-challenges" class="usa-nav-link text-no-wrap"
><span>Find a Challenge</span></a
>
</li>
<li class="usa-nav__primary-item">
<a class="menulink usa-nav__link" href="https://www.challenge.gov/#resources-people" title="Resources for innovators and managers" aria-label="Resources">Resources</a>
<a href="/resources" class="usa-nav-link"
><span>Resources</span></a
>
</li>
<li class="usa-nav__primary-item">
<a class="menulink usa-nav__link" href="https://www.challenge.gov/events" title="Events for innovators and managers" aria-label="Events">Events</a>
<a href="/events" class="usa-nav-link"
><span>Events</span></a
>
</li>
<li class="usa-nav__primary-item">
<a class="menulink usa-nav__link" href="https://www.challenge.gov/contact" title="Contact page with email and social links" aria-label="Contact">Contact</a>
<a href="/contact" class="usa-nav-link"
><span>Contact</span></a
>
</li>
</ul>



<section class="display-none desktop:display-flex">



<section aria-label="Search component" style="display: flex; justify-content: center; align-items: center;">

<form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get">
Expand All @@ -108,7 +150,7 @@
<input name="utf8" type="hidden" value="&#x2713;">
<input type="hidden" name="affiliate" id="affiliate" value="challenge.gov">
<div role="search">
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>

<input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" aria-label="Search Challenge.gov" type="search" name="query" autocomplete="off">
<button class="usa-button" type="submit">
<img src="<%= Routes.static_path(Web.Endpoint, "/images/search.svg") %>" class="usa-search__submit-icon" alt="Search">
Expand All @@ -120,7 +162,7 @@

<%= case current_user(@conn) do %>
<% nil -> %>
<a style="width: 6rem;" class="float-right usa-button usa-button--outline tablet:margin-left-2 tablet:float-right font-sans-xs" href="https://portal.challenge.gov/sign-in/new"><span style="color:#005ea2;">Login</span></a>
<%= button("Login", to: Routes.session_path(@conn, :create), method: :post, class: "float-right usa-button usa-button--outline tablet:margin-left-2 tablet:float-right font-sans-xs",style: "width: 6rem;color:#005ea2;") %>
<a style="width: 10rem;" class="float-right usa-button usa-button tablet:margin-left-1 tablet:float-right font-sans-xs" href="https://secure.login.gov/sign_up/enter_email?request_id=6ab5f3e4-a3e5-4cb7-90a3-3a777fee8967"><span style="color: #ffffff;">Create Account</span></a>

<% u -> %>
Expand All @@ -130,13 +172,13 @@
<% end %>
</section>

<!-- mobile search and login area -->
<!-- mobile search and login area -->
<section class="desktop:display-none order-3">
<section aria-label="Search component">
<form class="usa-search usa-search--small margin-y-1" role="search" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get">
<label class="usa-sr-only" for="search-field">Search</label>
<input name="utf8" type="hidden" value="&#x2713;">
<input type="hidden" name="affiliate" id="affiliate" value="challenge.gov">
<input name="utf8" type="hidden" value="&#x2713;">
<input type="hidden" name="affiliate" id="affiliate" value="challenge.gov">

<input
class="usa-input"
Expand All @@ -153,12 +195,12 @@
</section>
<%= case current_user(@conn) do %>
<% nil -> %>
<a style="width: 6rem;" class="usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-fulls" href="https://portal.challenge.gov/sign-in/new"><span style="color:#005ea2;">Login</span></a>
<%= button("Login", to: Routes.session_path(@conn, :create), method: :post, class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-fulls",style: "width: 6rem;color:#005ea2;") %>
<a style="width: 10rem;" class="usa-button font-body-3xs usa-button margin-y-1 text-no-wrap desktop:margin-left-1 width-full" href="https://secure.login.gov/sign_up/enter_email?request_id=6ab5f3e4-a3e5-4cb7-90a3-3a777fee8967"><span style="color: #ffffff;">Create Account</span></a>

<% u -> %>

<%= link("Log out", to: Routes.session_path(@conn, :delete),method: :delete, class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-full") %>
<%= link("Log out", to: Routes.session_path(@conn, :delete),method: :delete, class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-full") %>

<% end %>
</section>
Expand Down

0 comments on commit c1dfe2b

Please sign in to comment.