diff --git a/findex/_targets.R b/findex/_targets.R
index 4d9fc2f5fc30fb7b91b11366f39152fdd4115746..2f25bde6632690e72c949817fa94ed4c578ef1a5 100644
--- a/findex/_targets.R
+++ b/findex/_targets.R
@@ -250,9 +250,7 @@ p3 <- list(
theme(legend.position = "none")
ggsave(sprintf("../src/assets/images/%s_threat_by_basin.png", str_replace_all(p2_threat_categories, " ", "_")),
- final_plot, height = 6, width = 10, dpi = 300)
-
- knitr::plot_crop(sprintf("../src/assets/images/%s_threat_by_basin.png", str_replace_all(p2_threat_categories, " ", "_")))
+ final_plot, height = 4.5, width = 10, dpi = 300)
},
format = "file",
pattern = p2_threat_categories
@@ -268,9 +266,22 @@ p3 <- list(
theme(legend.position = "none")
ggsave("../src/assets/images/all_threat_by_basin.png",
- final_plot, height = 6, width = 10, dpi = 300)
+ final_plot, height = 4.5, width = 10, dpi = 300)
+ },
+ format = "file"
+ ),
+ tar_target(
+ p3_base_top_threat_map_png,
+ {
+ final_plot <- top_threat_plot(in_dat = p2_mean_weighted_threats,
+ threat_pal = p2_viz_config,
+ hybas_habitat_types = p2_hybas_habitat_types_sf,
+ proj = p1_proj,
+ threat_category = "base") +
+ theme(legend.position = "none")
- knitr::plot_crop("../src/assets/images/all_threat_by_basin.png")
+ ggsave("../src/assets/images/base_threat_by_basin.png",
+ final_plot, height = 4.5, width = 10, dpi = 300)
},
format = "file"
),
diff --git a/findex/src/plot_utils.R b/findex/src/plot_utils.R
index dd8abe46d5be9a3db7abb6deb1f725e9db5ff41c..aaf23d74050aea368ad4c9e0a9a78a6ec47f586b 100644
--- a/findex/src/plot_utils.R
+++ b/findex/src/plot_utils.R
@@ -277,11 +277,14 @@ top_threat_plot <- function(in_dat, threat_pal, hybas_habitat_types, proj, threa
proj_sf <- st_transform(processed_sf, crs = st_crs(proj))
+ bbox <- sf::st_bbox(proj_sf)
+
# make non-target threat category values NA so they are not plotted
if(threat_category != "none"){
proj_sf <- proj_sf |>
mutate(ThreatCategory = case_when(ThreatCategory != threat_category ~ NA, .default = as.character(ThreatCategory)))
}
+ na_color <- ifelse(threat_category == "base", "gray80", NA)
pal <- threat_pal |>
select(MajorCat, pal) |>
@@ -296,9 +299,12 @@ top_threat_plot <- function(in_dat, threat_pal, hybas_habitat_types, proj, threa
threat_map <- ggplot()+
geom_sf(data = proj_sf, aes(geometry = Shape, fill = ThreatCategory), color = NA)+
- scale_fill_manual(values = pal$pal, breaks = pal$MajorCat, na.value = "gray80")+
+ scale_fill_manual(values = pal$pal, breaks = pal$MajorCat, na.value = na_color)+
guides(fill = guide_legend(nrow = 2,)) +
theme_void()+
+ coord_sf(xlim = c(bbox[["xmin"]], bbox[["xmax"]]),
+ ylim = c(bbox[["ymin"]], bbox[["ymax"]]),
+ expand = FALSE) +
theme(
legend.ticks = element_blank(),
legend.title = element_text(face = "bold"),
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index ce9c0b78b075b45ece97f3ead1aa275b8e6b129c..159a210e2be0e65354e6cc3686a7691e685da80e 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -20,6 +20,22 @@
--usgs-blue: #00264c;
--faded-usgs-blue: #d8dee4;
--usgs-green: #006F41;
+ --mid-teal: #648E8E;
+ --mid-brown: #a27846;
+ --mid-blue: #265079;
+ --mid-red: #b24d4b;
+ --mid-purple: #845c93;
+ --teal: #4E6D6E;
+ --brown: #7A562B;
+ --blue: #002D5E;
+ --red: #B74F49;
+ --purple: #835192;
+ --faded-teal: #C9D8D9;;
+ --faded-brown: #E1C8AA;
+ --faded-blue: #B2C0CE;
+ --darker-teal: #405959;
+ --darker-brown: #5B401F;
+ --darker-blue: #002D5E;
font-size: 62.5%;
@@ -38,6 +54,22 @@
--color-code-links-background: var(--medium-grey);
--color-link: var(--medium-blue);
--color-USGS-header-footer: var(--usgs-blue);
+ --color-habitat-top: var(--mid-teal);
+ --color-pollution-top: var(--mid-brown);
+ --color-climate-and-weather-top: var(--mid-blue);
+ --color-invasive-species-top: var(--mid-red);
+ --color-fishing-pressure-top: var(--mid-purple);
+ --color-habitat: var(--teal);
+ --color-pollution: var(--brown);
+ --color-climate-and-weather: var(--blue);
+ --color-invasive-species: var(--red);
+ --color-fishing-pressure: var(--purple);
+ --color-habitat-faded: var(--faded-teal);
+ --color-pollution-faded: var(--faded-brown);
+ --color-climate-and-weather-faded: var(--faded-blue);
+ --color-habitat-dark: var(--darker-teal);
+ --color-pollution-dark: var(--darker-brown);
+ --color-climate-and-dark-faded: var(--darker-blue);
}
/* @media (prefers-color-scheme: dark) {
diff --git a/src/assets/images/CW_Change_in_flooding_map.png b/src/assets/images/CW_Change_in_flooding_map.png
index e641b44b15c257a5524cb360296b4fe65320c41b..a33d010a69a2c1457e264dfb131473e669c3a849 100644
Binary files a/src/assets/images/CW_Change_in_flooding_map.png and b/src/assets/images/CW_Change_in_flooding_map.png differ
diff --git a/src/assets/images/CW_Change_in_ice_cover_map.png b/src/assets/images/CW_Change_in_ice_cover_map.png
index 86c0bf76d704cb06f87fadba64b07b99f1ba9406..7c6c9a09d0979863ecb7e581f93315773b8b029e 100644
Binary files a/src/assets/images/CW_Change_in_ice_cover_map.png and b/src/assets/images/CW_Change_in_ice_cover_map.png differ
diff --git a/src/assets/images/CW_Change_in_water_temperature_map.png b/src/assets/images/CW_Change_in_water_temperature_map.png
index fb9a247a8be215d54e6212f2f041462a7aecf992..8f52af2c7e8ab4017ecfde694c533b2bf4439db4 100644
Binary files a/src/assets/images/CW_Change_in_water_temperature_map.png and b/src/assets/images/CW_Change_in_water_temperature_map.png differ
diff --git a/src/assets/images/CW_Change_in_wind_patterns_map.png b/src/assets/images/CW_Change_in_wind_patterns_map.png
index 09a66316c3392f0b0c257f467f9b24283e10b95d..199da5d16a545986d619b35e5da721892a246e1c 100644
Binary files a/src/assets/images/CW_Change_in_wind_patterns_map.png and b/src/assets/images/CW_Change_in_wind_patterns_map.png differ
diff --git a/src/assets/images/CW_Drought_map.png b/src/assets/images/CW_Drought_map.png
index abb8bdb44b3209a41b439e542d543377b704110b..159e150dbb9ae6f3cbca480e4198fe00b911bbd5 100644
Binary files a/src/assets/images/CW_Drought_map.png and b/src/assets/images/CW_Drought_map.png differ
diff --git a/src/assets/images/Climate_and_weather_map.png b/src/assets/images/Climate_and_weather_map.png
index 04b65ef462e71c543a1a94a18dc04c918b1de5ce..e6ed7d39ff88ddc772a6f872b759c01b0a801ed2 100644
Binary files a/src/assets/images/Climate_and_weather_map.png and b/src/assets/images/Climate_and_weather_map.png differ
diff --git a/src/assets/images/Climate_and_weather_threat_by_basin.png b/src/assets/images/Climate_and_weather_threat_by_basin.png
index f05c5c52b3fb0aa2004084b9176da1f79b8df079..e26bd70b4e028d7d2e45602f35c55454fdc871e0 100644
Binary files a/src/assets/images/Climate_and_weather_threat_by_basin.png and b/src/assets/images/Climate_and_weather_threat_by_basin.png differ
diff --git a/src/assets/images/FP_Overfishing_map.png b/src/assets/images/FP_Overfishing_map.png
index 1fd1a9a68410002f55edf885a63e128e98f86378..a6e2886abe2ff3838f2a3562a50e4e7917e4f272 100644
Binary files a/src/assets/images/FP_Overfishing_map.png and b/src/assets/images/FP_Overfishing_map.png differ
diff --git a/src/assets/images/Fishing_pressure_map.png b/src/assets/images/Fishing_pressure_map.png
index d580d74005cd1906f1fd3adc8cc8041bc6751239..332c2cf5a55f70c4aee2c9dbad88f376eacac0a7 100644
Binary files a/src/assets/images/Fishing_pressure_map.png and b/src/assets/images/Fishing_pressure_map.png differ
diff --git a/src/assets/images/Fishing_pressure_threat_by_basin.png b/src/assets/images/Fishing_pressure_threat_by_basin.png
index 7f23ec98dcec45c13a92e15f26c6d09775f9bd95..079e2888269a7e00668768d0fee33eb32ca68f12 100644
Binary files a/src/assets/images/Fishing_pressure_threat_by_basin.png and b/src/assets/images/Fishing_pressure_threat_by_basin.png differ
diff --git a/src/assets/images/H_Agricultural_extraction_map.png b/src/assets/images/H_Agricultural_extraction_map.png
index e9fd9585077151bf7ac027c34b91dc1d5c578597..d4c7f99699c6e5838913e6d4b7f547fc81a2ea6a 100644
Binary files a/src/assets/images/H_Agricultural_extraction_map.png and b/src/assets/images/H_Agricultural_extraction_map.png differ
diff --git a/src/assets/images/H_Dams_map.png b/src/assets/images/H_Dams_map.png
index 20ae6479496062ae0174d607a0c88503d0626943..846ba0e97600704753183eed3c0d2c433f0e3d71 100644
Binary files a/src/assets/images/H_Dams_map.png and b/src/assets/images/H_Dams_map.png differ
diff --git a/src/assets/images/H_Deforestation_and_associated_runoff_map.png b/src/assets/images/H_Deforestation_and_associated_runoff_map.png
index 033068fef9e123eeff32556623c279b62d5d106d..6322e616fa90fa992d1a87133c24e35fb30a064a 100644
Binary files a/src/assets/images/H_Deforestation_and_associated_runoff_map.png and b/src/assets/images/H_Deforestation_and_associated_runoff_map.png differ
diff --git a/src/assets/images/H_Industrial_extraction_map.png b/src/assets/images/H_Industrial_extraction_map.png
index bc90d274e2e35cf3b12a084c9b7a7754631d0fb6..f095ad1862c31687fb69ee71ffdacf0aa5d73d69 100644
Binary files a/src/assets/images/H_Industrial_extraction_map.png and b/src/assets/images/H_Industrial_extraction_map.png differ
diff --git a/src/assets/images/H_Riparian_degradation_map.png b/src/assets/images/H_Riparian_degradation_map.png
index f082a75349df1c0bc3f11eec94dd8d3611401494..e97d65079523a4af31a48412d62741823f2939df 100644
Binary files a/src/assets/images/H_Riparian_degradation_map.png and b/src/assets/images/H_Riparian_degradation_map.png differ
diff --git a/src/assets/images/H_Urban_extraction_map.png b/src/assets/images/H_Urban_extraction_map.png
index ef38e159b6a99d1156416db2ffa0d18c4021dc11..2eb9da7d2af3339eee90a8b6f8de68ffec78781e 100644
Binary files a/src/assets/images/H_Urban_extraction_map.png and b/src/assets/images/H_Urban_extraction_map.png differ
diff --git a/src/assets/images/H_Wetland_drainage_map.png b/src/assets/images/H_Wetland_drainage_map.png
index edb5952119ec7ee5f5d42ba2fc86ede5ae6d2c3f..1dd2694823aed306fcfa3dc2a9d8af6ad22836db 100644
Binary files a/src/assets/images/H_Wetland_drainage_map.png and b/src/assets/images/H_Wetland_drainage_map.png differ
diff --git a/src/assets/images/Habitat_map.png b/src/assets/images/Habitat_map.png
index ab5f7f4b6b648ba385f797181430ac1ee1582a25..5a6d6c5b052727384b3fe052bc23fc64c0351976 100644
Binary files a/src/assets/images/Habitat_map.png and b/src/assets/images/Habitat_map.png differ
diff --git a/src/assets/images/Habitat_threat_by_basin.png b/src/assets/images/Habitat_threat_by_basin.png
index 4deecd0f6dfe2c29d38e2f2cee22c25173c1dcef..e1d388efaffc065ed16affa15e3d2fa8ce50207e 100644
Binary files a/src/assets/images/Habitat_threat_by_basin.png and b/src/assets/images/Habitat_threat_by_basin.png differ
diff --git a/src/assets/images/IS_Invasive_non-native_species_map.png b/src/assets/images/IS_Invasive_non-native_species_map.png
index d565368b86f9155fa64a12e0b60c54a5e9711f6d..4148c7e7e694c0c1473785002156df5755bf043e 100644
Binary files a/src/assets/images/IS_Invasive_non-native_species_map.png and b/src/assets/images/IS_Invasive_non-native_species_map.png differ
diff --git a/src/assets/images/Invasive_species_map.png b/src/assets/images/Invasive_species_map.png
index ed38967d6fe285b1584cd3deeb844fd8122e6e81..7ad6ffde97e94e8864711d0beab79cc08f38f90a 100644
Binary files a/src/assets/images/Invasive_species_map.png and b/src/assets/images/Invasive_species_map.png differ
diff --git a/src/assets/images/Invasive_species_threat_by_basin.png b/src/assets/images/Invasive_species_threat_by_basin.png
index 0f97e2627ce6b5b3d20dd2fdab9b2e15c5f133be..0e9316fe2b2b038eccccc1b66ca9802466eef92e 100644
Binary files a/src/assets/images/Invasive_species_threat_by_basin.png and b/src/assets/images/Invasive_species_threat_by_basin.png differ
diff --git a/src/assets/images/P_Agricultural_effluents_map.png b/src/assets/images/P_Agricultural_effluents_map.png
index bc7d56c2a88ca060338def87392b823fc295e053..0e9f6a5c9e7c10a3f303e2d0039dc793246de128 100644
Binary files a/src/assets/images/P_Agricultural_effluents_map.png and b/src/assets/images/P_Agricultural_effluents_map.png differ
diff --git a/src/assets/images/P_Aquaculture_effluents_map.png b/src/assets/images/P_Aquaculture_effluents_map.png
index cb47e3f04bfbdf6ee18415804944864de5c188e5..965949c8469b81e5e40df775739aa7400b1e0361 100644
Binary files a/src/assets/images/P_Aquaculture_effluents_map.png and b/src/assets/images/P_Aquaculture_effluents_map.png differ
diff --git a/src/assets/images/P_Industrial_effluents_map.png b/src/assets/images/P_Industrial_effluents_map.png
index 5e5501debc5a72c3d933241b7d86a6590571c58a..e8e53a35b20cd4b71ae613694f81f0a54049d524 100644
Binary files a/src/assets/images/P_Industrial_effluents_map.png and b/src/assets/images/P_Industrial_effluents_map.png differ
diff --git a/src/assets/images/P_Mining_map.png b/src/assets/images/P_Mining_map.png
index 1c770686095653b1cd3d5527fae3ba27d3543ee5..81ba0dde9bf214e9097fc35283b34342d4615bf3 100644
Binary files a/src/assets/images/P_Mining_map.png and b/src/assets/images/P_Mining_map.png differ
diff --git a/src/assets/images/P_Oil_or_gas_exploration_map.png b/src/assets/images/P_Oil_or_gas_exploration_map.png
index 1d7309498164ffd067cb15c56268b2c4e4346f51..8510793878852bed25aef3c5e3ccef14249554ab 100644
Binary files a/src/assets/images/P_Oil_or_gas_exploration_map.png and b/src/assets/images/P_Oil_or_gas_exploration_map.png differ
diff --git a/src/assets/images/P_Pharmaceuticals_map.png b/src/assets/images/P_Pharmaceuticals_map.png
index 2a0e1a4bfc906c4463333440ef6f1c294ca317eb..e4101056e7d4a141a57fe5d41ec3a37593683b6e 100644
Binary files a/src/assets/images/P_Pharmaceuticals_map.png and b/src/assets/images/P_Pharmaceuticals_map.png differ
diff --git a/src/assets/images/P_Plastics_map.png b/src/assets/images/P_Plastics_map.png
index f9e1a868b61bbcd5d7a0da8233349fac7e6c2d4c..be248676331cdd433c1f0f566597f0fa86c12393 100644
Binary files a/src/assets/images/P_Plastics_map.png and b/src/assets/images/P_Plastics_map.png differ
diff --git a/src/assets/images/P_Urban_wastewater_map.png b/src/assets/images/P_Urban_wastewater_map.png
index 7ee72edcb21572f4dceb3bfe13b408bbf9df285d..a8249760da1ebbc7e57034a241dc6b5cbf81e4d0 100644
Binary files a/src/assets/images/P_Urban_wastewater_map.png and b/src/assets/images/P_Urban_wastewater_map.png differ
diff --git a/src/assets/images/Pollution_map.png b/src/assets/images/Pollution_map.png
index e16563dbec24d9af54b21760d8dcbfb9d02a71ff..8705b0dbc9deb93b674258595d2d9c9e7b672ed9 100644
Binary files a/src/assets/images/Pollution_map.png and b/src/assets/images/Pollution_map.png differ
diff --git a/src/assets/images/Pollution_threat_by_basin.png b/src/assets/images/Pollution_threat_by_basin.png
index d44c896bfe65fb97b148e64cd1d12a31e9e6e937..d3e7d8b48ac9a40ff8f22a14b6d0a51f096d630a 100644
Binary files a/src/assets/images/Pollution_threat_by_basin.png and b/src/assets/images/Pollution_threat_by_basin.png differ
diff --git a/src/assets/images/all_threat_by_basin.png b/src/assets/images/all_threat_by_basin.png
index dc66f4d03550790e19beb6fe22e90696f63a12dc..b3ad8011d116b94de7d0e924fd53aad4c016855b 100644
Binary files a/src/assets/images/all_threat_by_basin.png and b/src/assets/images/all_threat_by_basin.png differ
diff --git a/src/assets/images/base_threat_by_basin.png b/src/assets/images/base_threat_by_basin.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8fa13e75d18afeef8db5128b483156bac1d0277
Binary files /dev/null and b/src/assets/images/base_threat_by_basin.png differ
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index c4eccf6a315bcfb7776d52df3be16c74935cdd8c..850f44e6bf095d1a1f36511e35a676c3c56e74c7 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -236,8 +236,47 @@ export default {
paragraph1: 'Land use change is the biggest threat to inland fisheries.'
},
FindexGlobalThreats: {
- heading1:"Global variability of threats",
- paragraph1: "While threats related to habitat are the <a href='/visualizations/earth-in-flux/#/findex/inland-fish-total-threats' target='_blank'>overall highest threat</a> to inland fisheries worldwide, the severity of threats varies globally.",
+ heading1:"What are the top threats to inland fisheries?",
+ paragraph1: "While threats related to habitat are the <a href='/visualizations/earth-in-flux/#/findex/inland-fish-total-threats' target='_blank'>overall highest threat</a> to inland fisheries worldwide, the top threat for each river basin varies globally.",
+ mapData: {
+ habitat: {
+ visible: true,
+ path: 'Habitat_threat_by_basin.png',
+ color: 'var(--color-habitat-top)',
+ order: 1,
+ label: "Habitat"
+ },
+ pollution: {
+ visible: true,
+ path: 'Pollution_threat_by_basin.png',
+ color: 'var(--color-pollution-top)',
+ order: 2,
+ label: "Pollution"
+ },
+ climate_and_weather: {
+ visible: true,
+ path: 'Climate_and_weather_threat_by_basin.png',
+ color: 'var(--color-climate-and-weather-top)',
+ order: 3,
+ label: "Climate and weather"
+ },
+ invasive_species: {
+ visible: true,
+ path: 'Invasive_species_threat_by_basin.png',
+ color: 'var(--color-invasive-species-top)',
+ order: 4,
+ label: "Invasive species"
+ },
+ fishing_pressure: {
+ visible: true,
+ path: 'Fishing_pressure_threat_by_basin.png',
+ color: 'var(--color-fishing-pressure-top)',
+ order: 5,
+ label: "Fishing pressure"
+ },
+ },
+ heading2:"Where are threats higher and lower?",
+ paragraph2: "Similarly, the severity of threats varies globally.",
tabData: [
{
tabTitle: "Habitat",
diff --git a/src/components/FindexGlobalThreatsViz.vue b/src/components/FindexGlobalThreatsViz.vue
index c9221a7593b535feea760900dfb715f8a1735cd9..0ff9065ca7e0c1fc85f6155eb62a2787e552a943 100644
--- a/src/components/FindexGlobalThreatsViz.vue
+++ b/src/components/FindexGlobalThreatsViz.vue
@@ -2,16 +2,53 @@
<section>
<!---VizSection-->
<VizSection
- :figures="false"
+ :figures="true"
:fig-caption="false"
>
- <!-- HEADING -->
<template #heading>
<h2 v-html="text.heading1" />
</template>
- <!-- FIGURES -->
<template #aboveExplanation>
<p v-html="text.paragraph1" />
+ <div class="toggle-group">
+ <p id="toggle-title">Toggle map layers:</p>
+ <ToggleSwitch
+ v-for="layer in layers"
+ :key="layer.order"
+ v-model="layer.visible"
+ :label="layer.label"
+ :rightColor="layer.color"
+ />
+ </div>
+ </template>
+ <template #figures>
+ <div id="top-threat-map-container">
+ <figure
+ class="base-image"
+ >
+ <img class="map-image" :src="getImageURL('base_threat_by_basin.png')" alt="">
+ </figure>
+ <figure
+ v-for="layer in layers"
+ :key="layer.order"
+ v-show="layer.visible"
+ class="overlay-image"
+ >
+ <img class="map-image" :src="getImageURL(layer.path)" alt="">
+ </figure>
+ </div>
+ </template>
+ </VizSection>
+ <!---VizSection-->
+ <VizSection
+ :figures="false"
+ :fig-caption="false"
+ >
+ <template #heading>
+ <h2 v-html="text.heading2" />
+ </template>
+ <template #aboveExplanation>
+ <p v-html="text.paragraph2" />
</template>
</VizSection>
<tabsGroup id="map-tabs" :options="{ useUrlFragment: false }" >
@@ -43,8 +80,9 @@
</template>
<script setup>
- import { computed, nextTick, onMounted, ref } from "vue";
+ import { computed, nextTick, onMounted, reactive, ref } from "vue";
import VizSection from '@/components/VizSection.vue';
+ import ToggleSwitch from '@/components/ToggleSwitch.vue';
import FishIcon from '@/assets/svgs/noun-fish-7471722.svg';
// define props
@@ -72,6 +110,9 @@
return subCategoryData.value.subThreatText;
});
+ // set up reactive layers object
+ const layers = reactive(props.text.mapData)
+
// Declare behavior on mounted
// functions called here
onMounted(async () => {
@@ -142,20 +183,35 @@
updateIcon();
}
+ function getImageURL(file) {
+ return new URL(`../assets/images/${file}`, import.meta.url).href
+ }
+
</script>
<style lang="scss">
-$habitat: #4E6D6E;
-$habitat-faded: #C9D8D9;
-$habitat-dark: #405959;
-$pollution: #7A562B;
-$pollution-faded: #E1C8AA;
-$pollution-dark: #5B401F;
-$climate-and-weather: #002D5E;
-$climate-and-weather-faded: #B2C0CE;
-$climate-and-weather-dark: #002D5E;
-$invasive-species: #B74F49;
-$fishing-pressure: #835192;
+#toggle-title {
+ font-weight: 700;
+}
+#top-threat-map-container {
+ position: relative;
+ margin-top: 3rem;
+}
+.base-image {
+ position: relative;
+}
+.overlay-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.map-image {
+ width: 100%;
+ justify-self: center;
+ @media only screen and (max-width: 600px) {
+ width: 100%;
+ }
+}
#map-tabs {
margin-top: 3rem;
}
@@ -193,39 +249,39 @@ $fishing-pressure: #835192;
width: 100%;
}
.habitat {
- color: $habitat;
- fill: $habitat;
+ color: var(--color-habitat);
+ fill: var(--color-habitat);
}
.pollution {
- color: $pollution;
- fill: $pollution;
+ color: var(--color-pollution);
+ fill: var(--color-pollution);
}
.climate-and-weather {
- color: $climate-and-weather;
- fill: $climate-and-weather;
+ color: var(--color-climate-and-weather);
+ fill: var(--color-climate-and-weather);
}
.invasive-species {
- color: $invasive-species;
- fill: $invasive-species;
+ color: var(--color-invasive-species);
+ fill: var(--color-invasive-species);
}
.fishing-pressure {
- color: $fishing-pressure;
- fill: $fishing-pressure;
+ color: var(--color-fishing-pressure);
+ fill: var(--color-fishing-pressure);
}
.highlight.habitat {
- background-color: $habitat;
+ background-color: var(--color-habitat);
}
.highlight.pollution {
- background-color: $pollution;
+ background-color: var(--color-pollution);
}
.highlight.climate-and-weather {
- background-color: $climate-and-weather;
+ background-color: var(--color-climate-and-weather);
}
.highlight.invasive-species {
- background-color: $invasive-species;
+ background-color: var(--color-invasive-species);
}
.highlight.fishing-pressure {
- background-color: $fishing-pressure;
+ background-color: var(--color-fishing-pressure);
}
.category-button {
background-color: transparent;
@@ -240,16 +296,16 @@ $fishing-pressure: #835192;
}
@media (hover: hover) {
.category-button.habitat:hover {
- background-color: $habitat-faded;
- color: $habitat-dark;
+ background-color: var(--color-habitat-faded);
+ color: var(--color-habitat-dark);
}
.category-button.pollution:hover {
- background-color: $pollution-faded;
- color: $pollution-dark;
+ background-color: var(--color-pollution-faded);
+ color: var(--color-pollution-dark);
}
.category-button.climate-and-weather:hover {
- background-color: $climate-and-weather-faded;
- color: $climate-and-weather-dark;
+ background-color: var(--color-climate-and-weather-faded);
+ color: var(--color-climate-and-weather-dark);
}
.category-button.invasive-species:hover {
color: white;
@@ -259,13 +315,13 @@ $fishing-pressure: #835192;
}
}
.habitat {
- text-decoration: underline solid $habitat-faded;
+ text-decoration: underline solid var(--color-habitat-faded);
}
.pollution {
- text-decoration: underline solid $pollution-faded;
+ text-decoration: underline solid var(--color-pollution-faded);
}
.climate-and-weather {
- text-decoration: underline solid $climate-and-weather-faded;
+ text-decoration: underline solid var(--color-climate-and-weather-faded);
}
.separator {
background-color: transparent;
diff --git a/src/components/ToggleSwitch.vue b/src/components/ToggleSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88db271d291983640c782d085e1ff67645c73773
--- /dev/null
+++ b/src/components/ToggleSwitch.vue
@@ -0,0 +1,155 @@
+<template>
+ <div class="checkbox_wrap toggle-container" aria-label="Toggle container">
+ <label class="toggle-label" aria-hidden="true">
+ <!-- Left label for either/or use case -->
+ <span
+ v-if="leftLabel"
+ class="toggle-text"
+ :class="{ tactive: !modelValue }"
+ aria-hidden="true"
+ >
+ {{ leftLabel }}
+ </span>
+
+ <!-- Toggle switch -->
+ <input
+ type="checkbox"
+ class="toggle-input"
+ :checked="modelValue"
+ @change="$emit('update:modelValue', !modelValue)"
+ aria-hidden="true"
+ />
+ <span
+ class="toggle-slider"
+ :style="{ backgroundColor: modelValue ? rightColor : leftColor }"
+ aria-hidden="true"
+ ></span>
+
+ <!-- Right label for either/or use case or single toggle label -->
+ <span
+ v-if="rightLabel"
+ class="toggle-text"
+ :class="{ tactive: modelValue, inactive: !modelValue }"
+ aria-hidden="true" >
+ {{ rightLabel }}
+ </span>
+ <!-- Single label -->
+ <span
+ v-else-if="label"
+ class="toggle-text"
+ :class="{ tactive: modelValue, inactive: !modelValue }"
+ aria-hidden="true"
+ >
+ {{ label }}
+ </span>
+ </label>
+ </div>
+</template>
+
+<script setup>
+defineProps({
+ modelValue: Boolean, // v-model binding for toggle state
+
+ // optional props for either/or labels
+ leftLabel: {
+ type: String,
+ required: false
+ },
+ rightLabel: {
+ type: String,
+ required: false
+ },
+
+ // optional prop for single label (on/off use case)
+ label: {
+ type: String,
+ required: false
+ },
+ // colors for each label and inactive state
+ leftColor: {
+ type: String,
+ default: 'var(--inactive-grey)'
+ },
+ rightColor: {
+ type: String,
+ default: 'var(--soft-black)'
+ },
+ inactiveColor: {
+ type: String,
+ default: 'var(--inactive-grey)'
+ }
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<style scoped>
+
+.toggle-container {
+ display: flex;
+ align-items: start;
+ gap: 10px;
+}
+
+/* toggle label for positioning */
+.toggle-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ position: relative;
+}
+
+/* text styles */
+.toggle-text {
+ transition: color 0.3s ease;
+ color: var(--inactive-grey);
+}
+
+.toggle-text.tactive {
+ color: var(--black-soft); /* active label is black */
+}
+.toggle-input:focus-visible {
+ outline: none; /* removes focus outline */
+}
+
+.toggle-label:focus-visible {
+ outline: none; /* removes focus outline */
+}
+
+/* toggle input (hidden) */
+.toggle-input {
+ display: none;
+}
+
+/* toggle slider styles */
+.toggle-slider {
+ flex-shrink: 0;
+ position: relative;
+ width: 40px;
+ height: 20px;
+ border-radius: 20px;
+ transition: background-color 0.3s ease;
+ border: 1px solid var(--black-soft);
+}
+
+.toggle-slider::before {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ background-color: white;
+ border-radius: 50%;
+ top: 1px;
+ left: 1%;
+ transition: transform 0.3s ease;
+ border: 1px solid var(--black-soft);
+}
+
+/* move slider to the right when checked */
+.toggle-input:checked + .toggle-slider::before {
+ transform: translateX(20px);
+ border: 1px solid var(--black-soft);
+}
+
+</style>