Skip to content

Commit

Permalink
Update USA Banner component (#37)
Browse files Browse the repository at this point in the history
  • Loading branch information
@katyasoup
katyasoup authored Sep 3, 2024
1 parent 329cd33 commit 80ba1db
Show file tree
Hide file tree
Showing 11 changed files with 236 additions and 119 deletions.
6 changes: 6 additions & 0 deletions internal/app/handlers.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,3 +419,9 @@ func (app *Application) home(w http.ResponseWriter, r *http.Request) {
component := components.Home()
component.Render(r.Context(), w)
}

func (app *Application) handleBannerToggle(w http.ResponseWriter, r *http.Request) {
action := r.PathValue("action")
component := components.UsaBanner(action)
component.Render(r.Context(), w)
}
2 changes: 2 additions & 0 deletions internal/app/routes.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ func (app *Application) routes() http.Handler {
mux.HandleFunc("GET /api/value-set-concepts/value-set-version/{valueSetVersionId}", app.getValueSetConceptsByVersionID)
mux.HandleFunc("GET /api/value-set-concepts/code-system/{codeSystemOid}", app.getValueSetConceptsByCodeSystemOID)

mux.HandleFunc("GET /toggle-banner/{action}", app.handleBannerToggle)

standard := alice.New(app.recoverPanic, app.logRequest, commonHeaders)

return standard.Then(mux)
Expand Down
88 changes: 72 additions & 16 deletions internal/ui/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,87 @@
.usa-banner {
background-color: #fff;
.usa-banner__content {
padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
}

.usa-banner__content-text {
color: var(--colors-gray-cool-60);
}

.usa-banner__header {
font-size: 12px;
border-bottom: 1px solid #fbfcfd;
border-left: none;
border-right: none;
padding: 10px 0;
font-family: "Poppins", sans-serif;
font-weight: 300;
color: #565c65;
background-color: #fff;
z-index: 11;
padding-top: 0;
padding-bottom: 0;
font-size: 0.8rem;
font-weight: 400;
min-height: 1rem !important;
position: relative;
max-width: 1400px;
margin: 0 auto;
border: none;
}

.lock-img {
margin: 0px 2.5px 6px 2.5px !important;
max-height: 16px;
max-width: 16px;
}
.usa-banner__header-action {
display: inline;
margin-top: 0;
}

.usa-banner__header-action::after {
background-image: url(../img/material-icons/keyboard_arrow_down_wt200.svg);
margin: 0 0 2px 0;
height: 12px;
width: 10.48px;
}

.usa-banner__toggle {
position: relative;
z-index: 1;
}

@supports ((-webkit-mask: url()) or (mask: url())) {
.usa-banner__header-action::after {
mask-image: url(../img/material-icons/keyboard_arrow_down_wt200.svg), linear-gradient(transparent, transparent);
}
}

.usa-banner #gov-banner-default {
font-family: "Poppins", sans-serif;
.usa-banner__header-flag {
float: none;
}

.usa-banner__lock-image {
margin-right: 4px;
}

.cdc-site-gov-notice .col-lg-11 {
height: 1rem;
}

.cdc-site-gov-notice .col-lg-11 button {
margin-left: 6px;
margin-right: 6px;
color: var(--colors-primary-link);
text-decoration: none;
display: inline;
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: none;
padding: 0;
font-weight: 300;
}

.cdc-site-gov-notice .col-lg-11 .d-flex {
align-items: center;
}

@media screen and (min-width: 992px) {
.cdc-site-gov-notice .col-lg-11 {
display: flex;
justify-content: flex-end;
}
}

header.cdc-header .cdc-header__cdc-logo a img {
height: 60px;
margin-top: -7px;
Expand Down
6 changes: 5 additions & 1 deletion internal/ui/assets/img/lock.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions internal/ui/assets/img/material-icons/keyboard_arrow_down_wt200.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 1 addition & 97 deletions internal/ui/components/base.templ
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,103 +18,7 @@ templ Base() {
<script src="/assets/js/uswds-init.min.js"></script>
</head>
<body>
<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="/assets/img/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="/assets/img/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="/assets/img/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"
></path>
</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>
</section>
@UsaBanner("close")
<header class="container cdc-header noindex" role="banner">
<div class="cdc-header__desktop">
<div class="cdc-page-offset">
Expand Down
14 changes: 11 additions & 3 deletions internal/ui/components/base_templ.go
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion internal/ui/components/footer_templ.go
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion internal/ui/components/home_templ.go
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 80ba1db

Please sign in to comment.