From c1999e961c91ddeb312bdd4d628c3d3cbdea919f Mon Sep 17 00:00:00 2001 From: Jay X Anaya Date: Mon, 21 Oct 2024 17:04:57 -0400 Subject: [PATCH] Footer for logged in users only - V1 --- assets/css/shared/_uswds-overrides.scss | 144 ++++++++++++++++++ .../challenge-logo-square-white copy.svg | 15 ++ .../images/challenge-logo-white-orange.svg | 67 ++++++++ assets/static/images/facebook.svg | 1 + assets/static/images/github.svg | 1 + assets/static/images/linkedin.svg | 1 + assets/static/images/twitter.svg | 1 + assets/static/images/youtube.svg | 1 + lib/web/templates/layout/_footerv2.html.eex | 127 +++++++++++++++ lib/web/templates/layout/root.html.eex | 8 +- 10 files changed, 364 insertions(+), 2 deletions(-) create mode 100644 assets/static/images/challenge-logo-square-white copy.svg create mode 100644 assets/static/images/challenge-logo-white-orange.svg create mode 100644 assets/static/images/facebook.svg create mode 100644 assets/static/images/github.svg create mode 100644 assets/static/images/linkedin.svg create mode 100644 assets/static/images/twitter.svg create mode 100644 assets/static/images/youtube.svg create mode 100644 lib/web/templates/layout/_footerv2.html.eex diff --git a/assets/css/shared/_uswds-overrides.scss b/assets/css/shared/_uswds-overrides.scss index cdd6c2a01..1c6063887 100644 --- a/assets/css/shared/_uswds-overrides.scss +++ b/assets/css/shared/_uswds-overrides.scss @@ -43,3 +43,147 @@ } } } + + +@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; + display: inline-block; + height: 1rem; + height: 1.5rem; + top: .5rem; + width: 1rem; + width: auto + } + + @supports (mask:url("")) { + .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 + } + } +} + +.usa-combo-box__clear-input { + background-image: url(/images/uswds/img/usa-icons/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; + content: ""; + display: inline-block; + height: 3rem; + margin-left: 0; + vertical-align: middle; + width: 3rem + } + + @supports (mask:url("")) { + .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 + } + } +} + + + @media (forced-colors:active) { + .usa-nav__close:before { + background: url(/images/uswds/img/usa-icons/close.svg) no-repeat 50%/contain; + content: ""; + display: inline-block; + height: 1.25rem; + margin-right: auto; + vertical-align: middle; + width: 1.25rem + } + + @supports (mask:url("")) { + .usa-nav__close:before { + background: none; + background-color: ButtonText; + mask: url(/images/uswds/img/usa-icons/close.svg) no-repeat center/contain + } + } + + .usa-nav__close:before { + background-color: buttonText + } + } + + /* +---------------------------------------- +USWDS with settings overrides +---------------------------------------- +Add a list of changed settings in the form $setting: value. +---------------------------------------- +*/ +@use "uswds-core" with ( + $theme-image-path: "images", + $theme-font-path: "fonts", + $flex-direction-settings: ( + responsive: true + ) +); + +@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%); +} + +.icon-white { + filter: invert(99%) sepia(2%) saturate(3661%) hue-rotate(191deg) brightness(117%) contrast(80%); +} + +.usa-social-link { + background-color: white; +} + +.usa-footer__secondary-section .usa-social-link:hover .usa-social-link__icon { + background-color: white; +} + + + + diff --git a/assets/static/images/challenge-logo-square-white copy.svg b/assets/static/images/challenge-logo-square-white copy.svg new file mode 100644 index 000000000..913a28580 --- /dev/null +++ b/assets/static/images/challenge-logo-square-white copy.svg @@ -0,0 +1,15 @@ + + + + 067FDA8B-D39A-4BA3-9DBA-BF14A4D83DCE + Created with sketchtool. + + + + + + + + + + \ No newline at end of file diff --git a/assets/static/images/challenge-logo-white-orange.svg b/assets/static/images/challenge-logo-white-orange.svg new file mode 100644 index 000000000..ba9b43c3f --- /dev/null +++ b/assets/static/images/challenge-logo-white-orange.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/static/images/facebook.svg b/assets/static/images/facebook.svg new file mode 100644 index 000000000..f4feccc0b --- /dev/null +++ b/assets/static/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/static/images/github.svg b/assets/static/images/github.svg new file mode 100644 index 000000000..09f674032 --- /dev/null +++ b/assets/static/images/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/static/images/linkedin.svg b/assets/static/images/linkedin.svg new file mode 100644 index 000000000..a22fd8241 --- /dev/null +++ b/assets/static/images/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/static/images/twitter.svg b/assets/static/images/twitter.svg new file mode 100644 index 000000000..a51804dba --- /dev/null +++ b/assets/static/images/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/static/images/youtube.svg b/assets/static/images/youtube.svg new file mode 100644 index 000000000..f9905bd88 --- /dev/null +++ b/assets/static/images/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/web/templates/layout/_footerv2.html.eex b/lib/web/templates/layout/_footerv2.html.eex new file mode 100644 index 000000000..a6580ecec --- /dev/null +++ b/lib/web/templates/layout/_footerv2.html.eex @@ -0,0 +1,127 @@ + diff --git a/lib/web/templates/layout/root.html.eex b/lib/web/templates/layout/root.html.eex index e1ca528db..70c6c2494 100644 --- a/lib/web/templates/layout/root.html.eex +++ b/lib/web/templates/layout/root.html.eex @@ -32,7 +32,11 @@
<%= @inner_content %>
- + <%= case current_user(@conn) do %> + <% nil -> %> + <% u -> %> + <%= render("_footerv2.html", assigns) %> + <% end %>
- +