[#25,#5, #27] Header / Nav / Banner / Utility Menu #124
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module NavigationHelper | ||
|
|
||
| def utility_menu_link_desktop(image_path, href, alt, button_label) | ||
| render :partial => "navigation/utility_menu_link_desktop", :locals => {image_path: image_path, href: href, alt: alt, button_label: button_label} | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,198 @@ | ||
| <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="<%= image_path('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="<%= image_path('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> | ||
| <div class="usa-banner__guidance tablet:grid-col-6"> | ||
| <img | ||
| class="usa-banner__icon usa-media-block__img" | ||
| src="<%= image_path('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"> | ||
| <em class="usa-logo__text" | ||
| ><a href="/" title="challenge.gov"> | ||
| <span class="site-title--long"> | ||
| <img width="300" class="usa-header__logo-img margin-left-4 desktop:margin-left-2 desktop:margin-bottom-2" src="<%= image_path("challenge-logo.svg") %>" alt="" /> | ||
| </span> | ||
| </a></em | ||
| > | ||
| </div> | ||
| <button type="button" class="usa-menu-btn">Menu</button> | ||
| </div> | ||
| <nav aria-label="Primary navigation" class="usa-nav"> | ||
| <button type="button" class="usa-nav__close"> | ||
| <img src="<%= image_path('images/usa-icons/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="/#active-challenges" class="usa-nav-link text-no-wrap" | ||
| ><span>Find a Challenge</span></a | ||
| > | ||
| </li> | ||
| <li class="usa-nav__primary-item"> | ||
| <a href="/resources" class="usa-nav-link" | ||
| ><span>Resources</span></a | ||
| > | ||
| </li> | ||
| <li class="usa-nav__primary-item"> | ||
| <a href="/events" class="usa-nav-link" | ||
| ><span>Events</span></a | ||
| > | ||
| </li> | ||
| <li class="usa-nav__primary-item"> | ||
| <a href="/contact" class="usa-nav-link" | ||
| ><span>Contact</span></a | ||
| > | ||
| </li> | ||
| </ul> | ||
| <!-- Desktop search and login area --> | ||
| <section class="display-none desktop:display-flex"> | ||
| <section aria-label="Search component"> | ||
| <form class="usa-search usa-search--small" role="search"> | ||
| <label class="usa-sr-only" for="search-field">Search</label> | ||
| <input | ||
| class="usa-input" | ||
| id="search-field" | ||
| type="search" | ||
| name="search" | ||
| style="width: 140px" | ||
| /> | ||
| <button class="usa-button" type="submit"> | ||
| <img | ||
| src="<%= image_path('images/usa-icons-bg/search--white.svg') %>" | ||
| class="usa-search__submit-icon" | ||
| alt="Search" | ||
| /> | ||
| </button> | ||
| </form> | ||
| </section> | ||
| <% if logged_in? %> | ||
| <%= button_to("Logout", session_path, method: :delete, class: "usa-button font-body-3xs usa-button--outline text-no-wrap desktop:margin-left-1", type: "button") %> | ||
| <button class="usa-button font-body-2xs text-no-wrap">Switch Task</button> | ||
| <% else %> | ||
| <%= button_to("Login", new_session_path, method: :get, class: "usa-button font-body-3xs usa-button--outline text-no-wrap desktop:margin-left-1", type: "button") %> | ||
| <button class="usa-button font-body-2xs text-no-wrap">Create Account</button> | ||
| <% 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"> | ||
| <label class="usa-sr-only" for="search-field">Search</label> | ||
| <input | ||
| class="usa-input" | ||
| id="search-field" | ||
| type="search" | ||
| name="search" | ||
| style="width: 170px" | ||
| /> | ||
| <button class="usa-button" type="submit"> | ||
| <img | ||
| src="<%= image_path('images/usa-icons-bg/search--white.svg') %>" | ||
| class="usa-search__submit-icon" | ||
| alt="Search" | ||
| /> | ||
| </button> | ||
| </form> | ||
| </section> | ||
| <% if logged_in? %> | ||
| <div class="text-primary font-body-2xs margin-y-1 padding-top-1"> | ||
| <%= current_user.email %> | ||
| </div> | ||
| <%= button_to("Logout", session_path, method: :delete, class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-full", type: "button") %> | ||
| <button class="usa-button font-body-2xs text-no-wrap width-full margin-y-1">Switch Task</button> | ||
| <% else %> | ||
| <%= button_to("Login", new_session_path, method: :get, class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-full", type: "button") %> | ||
| <button class="usa-button font-body-2xs text-no-wrap width-full margin-y-1">Create Account</button> | ||
| <% end %> | ||
| </section> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <!-- Desktop Utility Menu --> | ||
| <div class="bg-primary-darker w-full display-none desktop:display-flex flex-justify-end padding-1 font-body-2xs text-white"> | ||
| <%= utility_menu_link_desktop('grid_view', 'dashboard', 'dashboard', 'Dashboard') %> | ||
| <% if current_user.role == "challenge_manager" %> | ||
| <%= utility_menu_link_desktop('emoji_events', 'user_guide', 'challenges', 'Challenges') %> | ||
| <% end %> | ||
| <% if current_user.role == "challenge_manager" || current_user.role == "solver" %> | ||
| <%= utility_menu_link_desktop('folder_open', 'submissions', 'submissions', 'Submissions') %> | ||
| <% end %> | ||
| <% if current_user.role == "challenge_manager" || current_user.role == "evaluator" %> | ||
| <%= utility_menu_link_desktop('content_copy', 'user-guide', 'evaluations', 'Evaluations') %> | ||
| <% end %> | ||
| <%= utility_menu_link_desktop('map', 'user_guide', 'user guides', 'User Guides') %> | ||
| <%= utility_menu_link_desktop('support_agent', 'federal-agency-faqs', 'help', 'Help') %> | ||
| <div class="display-flex flex-align-center margin-x-1 margin-top-1"> | ||
| | | ||
| <%= image_tag('images/usa-icons/account_circle.svg', class: "usa-icon--size-3 icon-white margin-x-2", alt: "Help") %> | ||
| <%= current_user.email %> | ||
| </div> | ||
| </div> | ||
| <!-- Mobile Utility Menu --> | ||
| <div class="bg-primary-darker w-full display-flex desktop:display-none flex-justify-center padding-1 text-white"> | ||
| <div class="margin-x-1"> | ||
| <a href="/dashboard" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;"> | ||
| <%= image_tag('images/usa-icons/grid_view.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Dashboard") %> | ||
| Dashboard | ||
| </a> | ||
| </div> | ||
| <% if current_user.role == "challenge_manager" %> | ||
| <div class="margin-x-1"> | ||
| <a href="/user-guide" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;"> | ||
| <%= image_tag('images/usa-icons/emoji_events.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Challenges") %> | ||
| Challenges | ||
| </a> | ||
| </div> | ||
| <% end %> | ||
| <% if current_user.role == "challenge_manager" || current_user.role == "solver" %> | ||
| <div class="margin-x-1"> | ||
| <a href="/submissions" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;"> | ||
| <%= image_tag('images/usa-icons/folder_open.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Submissions") %> | ||
| Submissions | ||
| </a> | ||
| </div> | ||
| <% end %> | ||
| <% if current_user.role == "challenge_manager" || current_user.role == "evaluator" %> | ||
| <div class="margin-x-1"> | ||
| <a href="/user-guide" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;"> | ||
| <%= image_tag('images/usa-icons/content_copy.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Evaluations") %> | ||
| Evaluations | ||
| </a> | ||
| </div> | ||
| <% end %> | ||
| <div class="margin-x-1"> | ||
| <a href="/user-guide" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;"> | ||
| <%= image_tag('images/usa-icons/map.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "User Guides") %> | ||
| User Guides | ||
| </a> | ||
| </div> | ||
| <div class="margin-x-1"> | ||
| <a href="/federal-agency-faqs" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;"> | ||
| <%= image_tag('images/usa-icons/support_agent.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Help") %> | ||
| Help | ||
| </a> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
There was a problem hiding this comment. these partials aren't needed anymore |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <a href=<%= "/#{href}" %> class="display-flex flex-align-center margin-x-3 text-white"> | ||
| <%= image_tag("images/usa-icons/#{image_path}.svg", class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: alt) %> | ||
| <span class="margin-top-1"> | ||
| <%= button_label %> | ||
| </span> | ||
| </a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| RSpec.shared_examples "a page with header content" do | ||
stepchud marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| it "has a header with the expected links" do | ||
| expect(response.body).to include("Find a Challenge") | ||
| expect(response.body).to include("Resources") | ||
| expect(response.body).to include("Events") | ||
| expect(response.body).to include("Contact") | ||
| end | ||
| end | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| RSpec.shared_examples "a page with a utility menu" do | ||
| it "has a utility menu with the expected links for a public solver" do | ||
| expect(response.body).to include("Dashboard") | ||
| expect(response.body).to include("Submissions") | ||
| expect(response.body).to include("User Guides") | ||
| expect(response.body).to include("Help") | ||
| end | ||
|
|
||
| it "has a utility menu with the expected links for a challenge manager" do | ||
| expect(response.body).to include("Dashboard") | ||
| expect(response.body).to include("Challenges") | ||
| expect(response.body).to include("Submissions") | ||
| expect(response.body).to include("Evaluations") | ||
| expect(response.body).to include("User Guides") | ||
| expect(response.body).to include("Help") | ||
| end | ||
|
|
||
| it "has a utility menu with the expected links for a public solver" do | ||
stepchud marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| expect(response.body).to include("Dashboard") | ||
| expect(response.body).to include("Evaluations") | ||
| expect(response.body).to include("User Guides") | ||
| expect(response.body).to include("Help") | ||
| end | ||
| end | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is the broken tag newline intentional? I see it in a few places and it looks odd to me