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

Update USA Banner component #37

Merged
merged 8 commits into from
Sep 3, 2024
Merged

Update USA Banner component #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
da60cfb
usa banner without interaction
katyasoup Aug 28, 2024
947f9ff
use htmx for banner toggle; change <a> to <button> for a11y
katyasoup Aug 29, 2024
9578de2
fix conflicts with base_templ...?
katyasoup Aug 29, 2024
524c849
Merge branch 'main' into kcd/usa-banner
katyasoup Aug 29, 2024
02e69ea
add bannerToggle handler; base_templ tidying
katyasoup Aug 29, 2024
99cbe18
use templ templates instead of html files
katyasoup Aug 29, 2024
d2aac37
use parameters in single UsaBanner template
katyasoup Aug 29, 2024
d8b101a
simplify handler logic
katyasoup Aug 30, 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
6 changes: 6 additions & 0 deletions internal/app/handlers.go
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
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.
3 changes: 3 additions & 0 deletions internal/ui/assets/img/material-icons/keyboard_arrow_down_wt200.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.
98 changes: 1 addition & 97 deletions internal/ui/components/base.templ
View file
Open in desktop
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
Open in desktop

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
Open in desktop

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
Open in desktop

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

Loading