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

#26 Eval footer #113

Merged
merged 17 commits into from
Aug 16, 2024
Merged

#26 Eval footer #113

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d56e1c5
wip challenge footer
bilalhankins Aug 7, 2024
8193179
Merge branch 'dev' into 26/eval-footer
bilalhankins Aug 8, 2024
3c626c4
changed icon color to primary darker
bilalhankins Aug 9, 2024
dca2294
Merge branch 'dev' into 26/eval-footer
stepchud Aug 9, 2024
e54ee6b
Merge branch '26/eval-footer' of https://github.com/GSA/Challenge_pla…
bilalhankins Aug 13, 2024
e06a799
Updated icon colors and footer responsiveness
bilalhankins Aug 13, 2024
c877a07
update the social-icons svg path and tweak the layout
stepchud Aug 14, 2024
016f9d6
updated comment
bilalhankins Aug 14, 2024
122f656
Merge branch '26/eval-footer' of https://github.com/GSA/Challenge_pla…
bilalhankins Aug 14, 2024
5b3c862
last layout tweaks
stepchud Aug 15, 2024
1e6f751
tablet logo order, margin-y
stepchud Aug 15, 2024
1094349
Added shared_examples for footer; testing on / route
bilalhankins Aug 15, 2024
6c19d3f
added dashboard spec
bilalhankins Aug 15, 2024
a8cd260
Update app/views/layouts/_footer.html.erb
bilalhankins Aug 16, 2024
136c70f
Update app/views/layouts/_footer.html.erb
bilalhankins Aug 16, 2024
0fb6048
Updated links in footer
bilalhankins Aug 16, 2024
2d8318d
add two more utility classes since uswds is missing these
stepchud Aug 16, 2024
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
15 changes: 15 additions & 0 deletions app/assets/images/challenge-logo-square-white.svg
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
// Entry point for your Sass build
// Entry point for your Sass build
49 changes: 43 additions & 6 deletions app/assets/uswds/_uswds-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,49 @@
----------------------------------------
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-right {
text-align: right;
}

.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
View file
Open in desktop
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="javascript:void(0);">About</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Contact</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Terms of use</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Privacy Policy</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</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="javascript:void(0);">Innovator Resources</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Agency Resources</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Archived Challenges</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Active Challenges</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</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="javascript:void(0);">GSA Privacy Policy</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">Accessibility</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">FOIA</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-footer__secondary-link">
<a href="javascript:void(0);">USA.gov</a>
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
</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 grid-row mobile-lg:grid-col-12 flex-no-wrap grid-gap-1 mobile-lg:grid-gap-2 tablet:grid-col-6">
<div class="order-1 desktop: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 desktop: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 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="javascript:void(0);">
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
<%= 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="javascript:void(0);">
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
<%= 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="javascript:void(0);">
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
<%= 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="javascript:void(0);">
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
<%= 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="javascript:void(0);">
bilalhankins marked this conversation as resolved.
Show resolved Hide resolved
<%= 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
View file
Open in desktop
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
View file
Open in desktop
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>
Loading