From 919208ae8ccf90f0bc88a442385db085442cc961 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Tue, 28 May 2024 15:32:13 -0700
Subject: [PATCH] add disable map and placeholder text
---
src/components/Maps.vue | 29 +++++++++++++++++++++++------
1 file changed, 23 insertions(+), 6 deletions(-)
diff --git a/src/components/Maps.vue b/src/components/Maps.vue
index efe6477..c800b34 100644
--- a/src/components/Maps.vue
+++ b/src/components/Maps.vue
@@ -7,8 +7,8 @@
<h3><p v-html="mapText.title"></p></h3>
<br>
<div class="accordion-container">
- <button class="accordion households-accordion">Households<span class="symbol">+</span></button>
- <div class="panel">
+ <button class="accordion households-accordion active">Households<span class="symbol">-</span></button>
+ <div class="panel" style="display: block;">
<p v-html="mapText.paragraph1"></p>
<img src="@/assets/images/tot_households_2022.png" alt="Choropleth map of total households in the contiguous United States aggregated at the county level where counties with the greatest total households in dark orange include Los Angeles County, California (3,363,093), Harris County, Texas (1,692,896) and Maricopa County, Arizona (1,665,560). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
<img src="@/assets/images/tot_female_households_2022.png" alt="Choropleth map of total female householder (no spouse present) in the contiguous United States aggregated at the county level where counties with the greatest total female householder in dark orange include Los Angeles County, California (494,169), Harris County, Texas (258,518) and Maricopa County, Arizona (202,699). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
@@ -33,9 +33,20 @@
<img src="@/assets/images/perc_latino_census_2022.png" alt="Choropleth map of percent of Hispanic or Latino in the contiguous United States aggregated at the county level where counties with the greatest percent Hispanic or Latino in dark orange include Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
</div>
+ <button class="accordion disability-accordion">Disability<span class="symbol">+</span></button>
+ <div class="panel">
+ <p v-html="mapText.paragraph5"></p>
+ <img src="@/assets/images/perc_disable_census_2022.png" alt="Choropleth map of Percent with a disability of total civilian noninstitutionalized population in the contiguous United States aggregated at the county level where counties with the greatest percent disable in dark orange include Catron County, New Mexico (41.2%), Mora County, New Mexico (34%) and Kinney County, Texas (34%). Data provided by 2022 American Community Survey, U.S. Census Bureau.">
+ </div>
+
+ <button class="accordion placeholder-accordion">Placeholder<span class="symbol">+</span></button>
+ <div class="panel">
+ <p v-html="mapText.paragraph6"></p>
+ </div>
+
</div>
<br>
- <p v-html="mapText.paragraph5"></p>
+ <p v-html="mapText.paragraph7"></p>
</div>
</section>
</template>
@@ -66,7 +77,6 @@ onMounted(() => {
});
</script>
-
<style scoped>
.accordion {
background-color: #eee;
@@ -107,6 +117,14 @@ onMounted(() => {
background-color: #092836;
}
+.accordion.disability-accordion {
+ background-color: #092836;
+}
+
+.accordion.placeholder-accordion {
+ background-color: #EE5775;
+}
+
.accordion::before {
content: "";
position: absolute;
@@ -141,9 +159,8 @@ onMounted(() => {
margin: 20px;
}
-
.symbol {
font-size: 32px;
font-weight: bold;
}
-</style>
\ No newline at end of file
+</style>
--
GitLab