From e12f22620098b2e5c7530280be281c4fa1a55a45 Mon Sep 17 00:00:00 2001 From: Katie Campbell Downie Date: Mon, 16 Sep 2024 09:53:12 -0500 Subject: [PATCH] Search Results Page (UI Only) (#51) --- internal/app/handlers.go | 5 + internal/app/routes.go | 1 + internal/ui/assets/css/styles.css | 151 +++++++++++++++++- .../img/material-icons/file_download.svg | 5 +- .../ui/assets/img/usa-icons/chevron_right.svg | 7 +- internal/ui/components/base.templ | 4 +- internal/ui/components/breadcrumb.templ | 15 ++ internal/ui/components/home.templ | 40 +---- internal/ui/components/navbar.templ | 3 +- internal/ui/components/search_bar.templ | 41 +++++ .../ui/components/search_result_row.templ | 45 ++++++ internal/ui/components/search_results.templ | 86 ++++++++++ 12 files changed, 359 insertions(+), 44 deletions(-) create mode 100644 internal/ui/components/breadcrumb.templ create mode 100644 internal/ui/components/search_bar.templ create mode 100644 internal/ui/components/search_result_row.templ create mode 100644 internal/ui/components/search_results.templ diff --git a/internal/app/handlers.go b/internal/app/handlers.go index c356079..528bc2f 100644 --- a/internal/app/handlers.go +++ b/internal/app/handlers.go @@ -460,6 +460,11 @@ func (app *Application) home(w http.ResponseWriter, r *http.Request) { component.Render(r.Context(), w) } +func (app *Application) searchResults(w http.ResponseWriter, r *http.Request) { + component := components.SearchResults("Search", "Hepatitis") + component.Render(r.Context(), w) +} + func (app *Application) handleBannerToggle(w http.ResponseWriter, r *http.Request) { action := r.PathValue("action") component := components.UsaBanner(action) diff --git a/internal/app/routes.go b/internal/app/routes.go index 5250469..523572f 100644 --- a/internal/app/routes.go +++ b/internal/app/routes.go @@ -44,6 +44,7 @@ func (app *Application) routes() http.Handler { mux.HandleFunc("GET /toggle-banner/{action}", app.handleBannerToggle) mux.HandleFunc("GET /load-hot-topics", app.getAllHotTopics) + mux.HandleFunc("GET /search-results", app.searchResults) standard := alice.New(app.recoverPanic, app.logRequest, commonHeaders) return standard.Then(mux) diff --git a/internal/ui/assets/css/styles.css b/internal/ui/assets/css/styles.css index cbe269b..e1524e0 100644 --- a/internal/ui/assets/css/styles.css +++ b/internal/ui/assets/css/styles.css @@ -141,8 +141,9 @@ header.cdc-header .header-search { max-width: 100%; } - .advanced-search-link { +.advanced-search-link { justify-content: flex-end; + padding: 0.5rem; } .panel { @@ -282,3 +283,151 @@ footer .row { display: inline; } } + +.cdc-breadcrumb { + background-color: #e5f4ff; + color: #495057; + padding: 0.25rem 0; +} + +.cdc-breadcrumb__content { + font-size: smaller; + display: flex; + align-items: center; + justify-content: flex-start; + line-height: 24px; +} + +.search-results__table { + border-radius: 6px; + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.search-results__tabs { + display: flex; + justify-content: space-between; + font-weight: 600; +} + +.tab-item { + font-weight: bold; + padding: 0.25rem; +} + +.tab-item.active { + border-bottom: 10px solid #0b4778; +} + +.search-results__table .rowgroup { + padding: 1rem; +} + +.cdc-header.header-row { + align-items: center; + padding: 1rem 1rem 1rem 1rem; + border-bottom: 1px solid darkgrey; +} + +.search-results__table .row { + padding: 1rem; + --bs-gutter-x: 0; +} + +.cdc-header.header-row p { + font-weight: bold; +} + +.search-results__table .content-row { + display: flex; + align-items: center; +} + +.content-row.alternate-bg { + background-color: #e2e3e5; +} +.search-results__table .check { + flex-grow: 0; +} + +.search-results__table .row p { + margin: 0; + padding: 0.5rem; +} + +.cdc-header.top-header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid lightgrey; + padding: 0.75rem; +} + +.col.search-results { + max-width: fit-content; +} + +.page-buttons .button-next { + display: inline-flex; +} + +.pagination { + display: flex; + align-items: center; +} + +.pagination .col { + padding: 1rem 0.5rem 1rem 0rem; +} + +.pagination .page-buttons { + padding-left: 1rem; +} + +.page-buttons button { + padding: 0.25rem 0.75rem; + border: 1px solid lightgrey; + background-color: transparent; + color: #0b4778; + border-radius: 6px; + width: auto; + height: auto; +} + +.page-buttons button.active { + background-color: #0b4778; + color: white; +} + +.page-buttons button:not(.active, .button-next button):hover { + background-color: #005ea2; + color: white; +} + +.button-next button { + border: none; + font-weight: 600; +} + +.button-next button:hover { + background-color: transparent; + text-decoration: underline; +} + +.button-next :after { + content: url(../img/usa-icons/chevron_right.svg); + margin: 2px 0 0 0; + position: absolute; +} + +.download-button button { + border: none; + background-color: #005ea2; + padding: 0.5rem 1rem 0.5rem 0.75rem; + color: white; + border-radius: 6px; +} + +.download-button button:hover { + background-color: #0b4778; + color: white; +} diff --git a/internal/ui/assets/img/material-icons/file_download.svg b/internal/ui/assets/img/material-icons/file_download.svg index ef421c3..050a978 100644 --- a/internal/ui/assets/img/material-icons/file_download.svg +++ b/internal/ui/assets/img/material-icons/file_download.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/internal/ui/assets/img/usa-icons/chevron_right.svg b/internal/ui/assets/img/usa-icons/chevron_right.svg index e5228d3..419f242 100644 --- a/internal/ui/assets/img/usa-icons/chevron_right.svg +++ b/internal/ui/assets/img/usa-icons/chevron_right.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/internal/ui/components/base.templ b/internal/ui/components/base.templ index b79fb11..699ef7b 100644 --- a/internal/ui/components/base.templ +++ b/internal/ui/components/base.templ @@ -1,6 +1,6 @@ package components -templ Base() { +templ Base(currentPage string) { @@ -19,7 +19,7 @@ templ Base() { @UsaBanner("close") - @NavBar() + @NavBar(currentPage)
{ children... }
diff --git a/internal/ui/components/breadcrumb.templ b/internal/ui/components/breadcrumb.templ new file mode 100644 index 0000000..55533ef --- /dev/null +++ b/internal/ui/components/breadcrumb.templ @@ -0,0 +1,15 @@ +package components + +templ Breadcrumb(currentPage string) { +
+ if currentPage == "Home" { +
+ } else { +
+
+ PHIN VADS Home {currentPage} +
+
+ } +
+} \ No newline at end of file diff --git a/internal/ui/components/home.templ b/internal/ui/components/home.templ index 0caf13e..87f1188 100644 --- a/internal/ui/components/home.templ +++ b/internal/ui/components/home.templ @@ -1,45 +1,9 @@ package components templ Home() { - @Base() { + @Base("Home") {

PHIN VADS Home

-
-

Search PHIN VADS

-
-
-
- -
-
-
- -
-
-
-

Advanced Search

-
-
+ @SearchBar()

Hot Topics