add UI for the homepage (#42)

adds all UI for basic landing page functionality
skylight-hq · Sep 10, 2024 · d7c029f · d7c029f
1 parent 961814d
commit d7c029f
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 5 deletions.
diff --git a/internal/ui/assets/css/styles.css b/internal/ui/assets/css/styles.css
@@ -122,9 +122,34 @@ header.cdc-header .header-search {
   padding-top: 6px;
 }
 
-.vh {
-  height: 50vh;
-  background-color: orange;
+.usa-accordion__button {
+  margin-bottom: 12px;
+}
+
+.usa-button {
+  height: 3rem;
+  max-width: 20rem;
+}
+
+.usa-input {
+  max-width: 100%;
+}
+
+.usa-select {
+  height: 3rem;
+  margin-top: 0;
+  max-width: 100%;
+}
+
+ .advanced-search-link {
+  justify-content: flex-end;
+}
+
+.panel {
+  padding: 0 10px;
+  background-color: white;
+  display: none;
+  overflow: hidden;
 }
 
 footer .row {

diff --git a/internal/ui/components/home.templ b/internal/ui/components/home.templ
@@ -3,8 +3,96 @@ package components
 templ Home() {
 	@Base() {
 		<h1>PHIN VADS Home</h1>
-		<div class="vh">
-			50 vh content foobar
+		<div class="search">
+			<p>Search PHIN VADS</p>
+			<div class="grid-row">
+				<form class="usa-form">
+					<section class="grid-col-auto">
+					<select class="usa-select" name="options" id="options">
+						<option value> All Vocabulary </option>
+						<option value="value1">Option A</option>
+						<option value="value2">Option B</option>
+						<option value="value3">Option C</option>
+					</select>
+					</section>
+				</form>
+				<section class="grid-col-fill" aria-label="Big search component">
+					<form class="usa-search usa-search--big" role="search">
+						<label class="usa-sr-only" for="search-field-en-big">Search</label>
+							<input
+							class="usa-input"
+							id="search-field-en-big"
+							type="search"
+							name="search"
+							/>
+						<button class="usa-button" type="submit">
+						<span class="usa-search__submit-text">Search </span>
+						<img
+							src="/assets/img/usa-icons-bg/search--white.svg"
+							class="usa-search__submit-icon"
+							alt="Search"
+						/>
+						</button>
+					</form>
+				</section>
+			</div>
+			<div class="grid-row advanced-search-link">
+				<p><a href="#">Advanced Search</a></p>
+			</div>
+		</div>
+		<h2>Hot Topics</h2>
+		<div class="usa-accordion usa-accordion--multiselectable" data-allow-multiple>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a1">PHIN VADS Feedback</button>
+				<div id="m-a1" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2">New CDCREC Code System Status Upate</button>
+				<div id="m-a2" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a3">CDC Race Category and Ethnicity Group</button>
+				<div id="m-a3" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a4">COVID-19 Information Management Response (VADS)</button>
+				<div id="m-a4" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a5">1.1 General COVID-19 Information Management Response</button>
+				<div id="m-a5" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a6">1.2 Representing Health Care Data for Emergency Medical Services</button>
+				<div id="m-a6" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a7">1.3 Patient's Clinical Encounter</button>
+				<div id="m-a7" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a8">1.4 COVID-19 Public Health Reporting</button>
+				<div id="m-a8" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a9">1.5 Labratory Data Exchange and Labratory Surveillance</button>
+				<div id="m-a9" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a10">1.6 Geospatial Data Set and Tools</button>
+				<div id="m-a10" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a11">1.7 COVID-19 Immunization</button>
+				<div id="m-a11" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+			<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a12">1.8 Community Resilience and Social Determinants of Health (SDOH)</button>
+				<div id="m-a12" class="usa-accordion__content usa-prose">
+					<p>Lorem ipsum...</p>
+				</div>
+		</div>
+		<div class="grid-row">
+			<br><section><br><br><br><br></section></br>
 		</div>
 	}
 }