From f7734d4b1e4eafc83d3fe90d3c9c96211dbed35f Mon Sep 17 00:00:00 2001 From: Jay X Anaya Date: Wed, 23 Oct 2024 14:56:55 -0400 Subject: [PATCH] Utility menu implementation - on eval branch. --- assets/css/shared/_uswds-overrides.scss | 143 ++++++++++++++++++ assets/static/images/account_circle.svg | 1 + lib/web/templates/layout/app.html.eex | 32 ++-- .../templates/layout/util_nav/_admin.html.eex | 39 +++++ .../util_nav/_challenge_manager.html.eex | 34 +++++ .../layout/util_nav/_solver.html.eex | 40 +++++ 6 files changed, 266 insertions(+), 23 deletions(-) create mode 100644 assets/static/images/account_circle.svg create mode 100644 lib/web/templates/layout/util_nav/_admin.html.eex create mode 100644 lib/web/templates/layout/util_nav/_challenge_manager.html.eex create mode 100644 lib/web/templates/layout/util_nav/_solver.html.eex diff --git a/assets/css/shared/_uswds-overrides.scss b/assets/css/shared/_uswds-overrides.scss index cdd6c2a01..15a11cc6a 100644 --- a/assets/css/shared/_uswds-overrides.scss +++ b/assets/css/shared/_uswds-overrides.scss @@ -43,3 +43,146 @@ } } } + +@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/account_circle.svg b/assets/static/images/account_circle.svg new file mode 100644 index 000000000..7ba7670cd --- /dev/null +++ b/assets/static/images/account_circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/web/templates/layout/app.html.eex b/lib/web/templates/layout/app.html.eex index 3f0da2c55..773eccbcd 100644 --- a/lib/web/templates/layout/app.html.eex +++ b/lib/web/templates/layout/app.html.eex @@ -6,29 +6,15 @@ <%= case current_user(@conn) do %> <% nil -> %> <% u -> %> -
-
- -
-
+ <%= if Accounts.role_at_or_below(u, "solver") do %> + <%= render Web.LayoutView, "util_nav/_solver.html", conn: @conn, user: u %> + <% end %> + <%= if ChallengeGov.Accounts.is_challenge_manager?(u) do %> + <%= render Web.LayoutView, "util_nav/_challenge_manager.html", conn: @conn, user: u %> + <% end %> + <%= if ChallengeGov.Accounts.has_admin_access?(u) do %> + <%= render Web.LayoutView, "util_nav/_admin.html", conn: @conn, user: u %> + <% end %> <% end %>
diff --git a/lib/web/templates/layout/util_nav/_admin.html.eex b/lib/web/templates/layout/util_nav/_admin.html.eex new file mode 100644 index 000000000..97d4ab625 --- /dev/null +++ b/lib/web/templates/layout/util_nav/_admin.html.eex @@ -0,0 +1,39 @@ +
+ + <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Dashboard + <% end %> + + <%= link(to: Routes.user_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Users + <% end %> + + <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Challenges + <% end %> + + + +
diff --git a/lib/web/templates/layout/util_nav/_challenge_manager.html.eex b/lib/web/templates/layout/util_nav/_challenge_manager.html.eex new file mode 100644 index 000000000..e5b47ff73 --- /dev/null +++ b/lib/web/templates/layout/util_nav/_challenge_manager.html.eex @@ -0,0 +1,34 @@ +
+ + <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Dashboard + <% end %> + + <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Challenges + <% end %> + + + +
diff --git a/lib/web/templates/layout/util_nav/_solver.html.eex b/lib/web/templates/layout/util_nav/_solver.html.eex new file mode 100644 index 000000000..27e5576ae --- /dev/null +++ b/lib/web/templates/layout/util_nav/_solver.html.eex @@ -0,0 +1,40 @@ +
+ + <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Dashboard + <% end %> + + <%= link(to: Routes.submission_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Submissions + <% end %> + + <%= link(to: Routes.saved_challenge_path(@conn, :index), class: "display-flex flex-align-center desktop:flex-row margin-x-1 desktop:margin-x-3 text-white text-no-wra") do %> + Saved Challenges + <% end %> + + + +