Skip to content

Commit

Permalink
Merge pull request #1458 from GSA/1362-challenge-portal-header-v-eval
Browse files Browse the repository at this point in the history 
Gov notice and Challenge header with Logged In and Logged out states …
  • Loading branch information
@jairoanaya
jairoanaya authored Oct 24, 2024
2 parents e4ba91b + c05cbf7 commit e297c34
Show file tree
Hide file tree
Showing 9 changed files with 178 additions and 35 deletions.
1 change: 1 addition & 0 deletions assets/static/images/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/static/images/icon-dot-gov.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/static/images/icon-https.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/static/images/search.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/static/images/us_flag_small.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 167 additions & 0 deletions lib/web/templates/layout/_govheader.html.eex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<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>
</div>
</div>
</section>
</div>
<div class="usa-overlay"></div>


<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>
<button class="usa-menu-btn" aria-label="menu">Menu</button>
</div>

<nav 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>
</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>
</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>
</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>
</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">


<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">
<span class="usa-sr-only">Search</span></button>
</div>
</form>
</section>


<%= 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>
<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 -> %>

<%= link("Log out", to: Routes.session_path(@conn, :delete),method: :delete, class: "float-right usa-button usa-button tablet:margin-left-1 tablet:float-right font-sans-xs") %>

<% end %>
</section>

<!-- 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
class="usa-input"
id="search-field"
type="search"
name="query"
style="width: 170px"
aria-label="Search Challenge.gov"
/>
<button class="usa-button" type="submit">
<img src="<%= Routes.static_path(Web.Endpoint, "/images/search.svg") %>" class="usa-search__submit-icon" alt="Search">
</button>
</form>
</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>
<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") %>

<% end %>
</section>

</div>
</header>
16 changes: 4 additions & 12 deletions lib/web/templates/layout/_header.html.eex
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
<nav class="header navbar navbar-expand-lg navbar-light">
<a href="https://www.challenge.gov/" class="navbar-brand">
<img src='<%= Routes.static_path(@conn, "/images/challenge-logo.svg") %>' alt="Challenge Gov Logo" title="Challenge Gov" class="header__challenge-logo">
</a>



<div class="display-flex float-right padding-1" id="navbarSupportedContent">
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
<nav class="header navbar navbar-expand-lg navbar-light" style="display:flex">

<div class="display-flex float-right padding-1" style="width:100%; display:block" id="navbarSupportedContent">

<%= if Mix.env() == :dev do %>
<%= button("Dev Accounts", to: Routes.dev_accounts_page_path(@conn, :dev_accounts), method: :get, class: "usa-button") %>
<%= button("Dev Accounts", to: Routes.dev_accounts_page_path(@conn, :dev_accounts), method: :get, class: "usa-button float-right") %>
<% end %>

<div>
<%= link("My account", to: Routes.session_path(@conn, :new), class: "usa-button usa-button--outline") %>
</div>

</div>
</nav>
24 changes: 1 addition & 23 deletions lib/web/templates/layout/app.html.eex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,7 @@
<%= case current_user(@conn) do %>
<% nil -> %>
<% u -> %>
<header class="usa-header usa-header--basic height-8 bg-primary-dark ">
<div class="usa-nav">
<nav class="usa-nav">

<section class="padding-top-2 padding-right-2">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link text-bold text-white text-no-underline" href="#" aria-expanded="true">
<span><%= u.email %></span>
</a>
<div class="dropdown-content padding-2 float-right" style="min-width:280px">
<%= link to: Routes.session_path(@conn, :delete), method: :delete, class: "dropdown-item_" do %>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/sprite.svg#logout"></use>
</svg> Logout
<% end %>
</div>
</li>
</ul>
</section>
</nav>
</div>
</header>
<!-- placeholder util nav-->
<% end %>

<div class="grid-row grid-gap">
Expand Down
2 changes: 2 additions & 0 deletions lib/web/templates/layout/root.html.eex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
</head>

<body class="dhold-transition dsidebar-collapse dsidebar-mini height-full">

<%= render("_govheader.html", assigns) %>
<div class="wrapper">
<%= @inner_content %>
</div>
Expand Down

0 comments on commit e297c34

Please sign in to comment.