Skip to content

Commit

Permalink
Merge pull request #113 from GSA/26/eval-footer
Browse files Browse the repository at this point in the history
#26 Eval footer
  • Loading branch information
stepchud authored Aug 16, 2024
2 parents 43b47b9 + 2d8318d commit e7b47dc
Show file tree
Hide file tree
Showing 10 changed files with 300 additions and 85 deletions.
15 changes: 15 additions & 0 deletions app/assets/images/challenge-logo-square-white.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions app/assets/images/challenge-logo-white-orange.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/assets/stylesheets/application.sass.scss
Original file line number Diff line number Diff line change
@@ -1 +1 @@
// Entry point for your Sass build
// Entry point for your Sass build
57 changes: 51 additions & 6 deletions app/assets/uswds/_uswds-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,57 @@
----------------------------------------
USWDS with settings overrides
----------------------------------------
Uncomment the following lines and add a list of changed settings
in the form $setting: value,
Add a list of changed settings in the form $setting: value.
----------------------------------------
*/

@use "uswds-core" with (
$theme-image-path: "images",
@use "uswds-core" with ($theme-image-path: "images",
$theme-font-path: "fonts"
)
);

@use "uswds" as *;

.text-left {
text-align: left;
}

.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

.text-justify {
text-align: justify;
}

.usa-footer__logo {
display: flex;
align-items: center;
}

.usa-footer__logo-img {
max-width: 100%;
height: auto;
}

.footer-white {
color: white;
}

.usa-footer__social-links .usa-social-link__icon {
/*
* override the default svg stroke color to match USWDS .bg-primary-darker: #162e51
* source: https://codepen.io/sosuke/pen/Pjoqqp
*/
filter: invert(14%) sepia(17%) saturate(4304%) hue-rotate(190deg) brightness(94%) contrast(92%);
}

.usa-social-link {
background-color: white;
}

.usa-footer__secondary-section .usa-social-link:hover .usa-social-link__icon {
background-color: white;
}
121 changes: 121 additions & 0 deletions app/views/layouts/_footer.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<footer class="usa-footer usa-footer--big">
<div class="usa-footer__primary-section">
<div class="grid-container">
<div class="usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<nav class="usa-footer__nav" aria-label="Footer navigation,,">
<div class="grid-row grid-gap-4 usa-footer__primary-content padding-top-2 mobile-lg:padding-top-0 usa-footer__primary-content--collapsible">
<div class="grid-col-5 mobile-lg:grid-col-6 desktop:grid-col-3">
<%# Col 1 %>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link">
<a href="/about">About</a>
</li>
<li class="usa-footer__secondary-link">
<a href="/contact">Contact</a>
</li>
<li class="usa-footer__secondary-link">
<a href="/terms">Terms of use</a>
</li>
<li class="usa-footer__secondary-link">
<a href="/privacy-policy">Privacy Policy</a>
</li>
</ul>
</div>
<div class="grid-col-5 display-block desktop:display-none mobile-lg:grid-col-6">
</div>
<div class="grid-col-5 mobile-lg:grid-col-6 desktop:grid-col-3">
<%# Col 2 %>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link">
<a href="/resources">Innovator Resources</a>
</li>
<li class="usa-footer__secondary-link">
<a href="/resources-managers">Agency Resources</a>
</li>
<li class="usa-footer__secondary-link">
<a href="/?state=archived">Archived Challenges</a>
</li>
<li class="usa-footer__secondary-link">
<a href="/#active-challenges">Active Challenges</a>
</li>
</ul>
</div>
<div class="grid-col-5 mobile-lg:grid-col-6 desktop:grid-col-3">
<%# Col 3 %>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link">
<a href="https://www.gsa.gov/website-information/website-policies#privacy">GSA Privacy Policy</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://www.gsa.gov/website-information/accessibility-aids">Accessibility</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA</a>
</li>
<li class="usa-footer__secondary-link">
<a href="https://www.usa.gov/">USA.gov</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="usa-footer__secondary-section bg-primary-darker footer-white">
<div class="grid-container">
<div class="grid-row">
<div class="usa-footer__logo flex-no-wrap flex-justify-end tablet:flex-justify-start margin-y-1 mobile-lg:grid-gap-2 mobile-lg:grid-col-12 tablet:grid-col-6">
<div class="order-1 tablet:order-2" style="display: flex; align-items: center;">
<img class="usa-footer__logo-img" src="<%= image_path('challenge-logo-white-orange.svg') %>" title="Challenge Gov wordmark" alt="Challenge Gov wordmark in footer" style="width: 220px; height: auto;" />
</div>
<div class="order-2 tablet:order-1">
<img class="usa-footer__logo-img" src="<%= image_path('challenge-logo-square-white.svg') %>" title="GSA Star Mark" alt="GSA Star Mark" style="width: 60px; height: auto;" />
</div>
</div>
<div class="usa-footer__contact-links mobile-lg:grid-col-12 tablet:grid-col-6 margin-y-1 footer-white">
<div class="usa-footer__social-links flex-justify-end grid-row grid-gap-1">
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.twitter.com/ChallengeGov">
<%= image_tag('images/usa-icons/twitter.svg', class: "usa-social-link__icon", alt: "Twitter") %>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.facebook.com/ChallengeGov">
<%= image_tag('images/usa-icons/facebook.svg', class: "usa-social-link__icon", alt: "Facebook") %>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.youtube.com/@challenge-gov">
<%= image_tag('images/usa-icons/youtube.svg', class: "usa-social-link__icon", alt: "YouTube") %>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://www.linkedin.com/company/challengegov/">
<%= image_tag('images/usa-icons/linkedin.svg', class: "usa-social-link__icon", alt: "LinkedIn") %>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link" href="https://github.com/GSA/Challenge_gov">
<%= image_tag('images/usa-icons/github.svg', class: "usa-social-link__icon", alt: "Github") %>
</a>
</div>
</div>
<div class="grid-row flex-column text-right">
<p class="usa-footer__contact-heading">
Contact Us
</p>
<address class="usa-footer__address">
<div class="usa-footer__contact-info">
<div class="text-white">
<a style="color:white" href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
</div>
</footer>
1 change: 1 addition & 0 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,6 @@
<body>
<%= render "layouts/header" %>
<%= yield %>
<%= render "layouts/footer" %>
</body>
</html>
77 changes: 0 additions & 77 deletions app/views/sandbox/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -294,81 +294,4 @@
</tr>
</tbody>
</table>
<h3 class="site-preview-heading" id="slim-footer">Slim footer</h3>

<footer class="usa-footer usa-footer--slim">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<div class="usa-footer__primary-section">
<div class="usa-footer__primary-container grid-row">
<div class="mobile-lg:grid-col-8">
<nav class="usa-footer__nav" aria-label="Footer navigation,">
<ul class="grid-row grid-gap">
<li
class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
>
<a class="usa-footer__primary-link" href="javascript:void(0);"
>&lt;Primary link&gt;</a
>
</li>
<li
class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
>
<a class="usa-footer__primary-link" href="javascript:void(0);"
>&lt;Primary link&gt;</a
>
</li>
<li
class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
>
<a class="usa-footer__primary-link" href="javascript:void(0);"
>&lt;Primary link&gt;</a
>
</li>
<li
class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
>
<a class="usa-footer__primary-link" href="javascript:void(0);"
>&lt;Primary link&gt;</a
>
</li>
</ul>
</nav>
</div>
<div class="mobile-lg:grid-col-4">
<address class="usa-footer__address">
<div class="grid-row grid-gap">
<div
class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto"
>
<div class="usa-footer__contact-info">
<a href="tel:1-800-555-5555">&lt;(800) 555-GOVT&gt;</a>
</div>
</div>
<div
class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto"
>
<div class="usa-footer__contact-info">
<a href="mailto:[email protected]">&lt;[email protected]&gt;</a>
</div>
</div>
</div>
</address>
</div>
</div>
</div>
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="usa-footer__logo grid-row grid-gap-2">
<div class="grid-col-auto">
<img width="1024" class="usa-footer__logo-img" src="<%= image_path("challenge-logo.svg") %>" alt="" />
</div>
<div class="grid-col-auto">
<p class="usa-footer__logo-heading">&lt;Agency Contact Center&gt;</p>
</div>
</div>
</div>
</div>
</footer>
</section>
15 changes: 15 additions & 0 deletions spec/requests/dashboard_request_spec.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
require "rails_helper"

RSpec.describe "DashboardController" do
describe "GET /" do
before { get "/" }

it_behaves_like "a page with footer content"
end

describe "GET /dashboard" do
before { get "/dashboard" }

it_behaves_like "a page with footer content"
end
end
Loading

0 comments on commit e7b47dc

Please sign in to comment.