From 9779211d4d50e5b38bc413fc6667347a16559b13 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Wed, 31 Jul 2024 14:37:12 -0700
Subject: [PATCH] edits for mobile tooltip view
---
src/components/BeeswarmChart.vue | 9 ++++-----
src/components/Conclusion.vue | 9 +++------
src/components/Maps.vue | 2 +-
3 files changed, 8 insertions(+), 12 deletions(-)
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 4c7b235..59c1833 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -2,7 +2,7 @@
<section id="beeswarm">
<div id="text1" class="text-container">
<p>
- Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><span class="tooltiptext" > Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span></span> can be the difference between a daydream and a nightmare. People may be more or less vulnerable to water insecurity due to
+ Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><span class="tooltiptext"> Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span></span> can be the difference between a daydream and a nightmare. People may be more or less vulnerable to water insecurity due to
<span
:class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]"
@click="toggleCategory('Demographiccharacteristics')"
@@ -483,8 +483,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
pointer-events: none;
width: 100%;
height: 70px;
- text-align: center;
-
+ text-align: center
}
.hidden {
@@ -568,7 +567,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
.tooltiptext {
visibility: hidden;
- width: 200px;
+ width: 100px;
background-color: #555;
color: #fff;
text-align: center;
@@ -576,7 +575,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
padding: 5px;
position: absolute;
z-index: 1;
- margin-left: -170px;
+ margin-left: -120px;
margin-top: 2rem;
opacity: 0;
transition: opacity 0.3s;
diff --git a/src/components/Conclusion.vue b/src/components/Conclusion.vue
index 2d7db48..8700abc 100644
--- a/src/components/Conclusion.vue
+++ b/src/components/Conclusion.vue
@@ -61,18 +61,15 @@
padding: 5px;
position: absolute;
z-index: 1;
- // bottom: 100%;
- // left: 50%;
- // transform: translateX(-50%);
- margin-left: -170px;
+ margin-left: -120px;
margin-top: 2rem;
opacity: 0;
transition: opacity 0.3s;
}
.meta-analysis {
- width: 400px;
- margin-left: -270px;
+ width: 200px;
+ margin-left: -80px;
}
.tooltip:hover .tooltiptext {
diff --git a/src/components/Maps.vue b/src/components/Maps.vue
index 6be89ba..d0f6a22 100644
--- a/src/components/Maps.vue
+++ b/src/components/Maps.vue
@@ -11,7 +11,7 @@
<div class="panel households-panel">
<p v-html="mapText.paragraph1"></p>
<img src="@/assets/images/avg_household_size_2022.png" alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest percent of average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022).">
- <figcaption><span class="tooltip"><span class="tooltip-span">Choropleth map</span><span class="tooltiptext">Type of map that displays divided geographical areas or regions that are coloured, shaded or patterned in relation to a data variable. This provides a way to visualise values over a geographical area, which can show variation or patterns across the displayed location.</span></span> of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest percent of average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022).</a></figcaption>
+ <figcaption><span class="tooltip"><span class="tooltip-span">Choropleth map</span><span class="tooltiptext">Type of map that displays divided geographical areas or regions that are coloured, shaded or patterned in relation to a data variable. This provides a way to visualise values over a geographical area, which can show variation or patterns across the displayed location.</span></span> of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022).</a></figcaption>
</div>
<button class="accordion latino-accordion">Hispanic populations<span class="symbol">+</span></button>
--
GitLab