Skip to content
Snippets Groups Projects
Commit 8c9b33e6 authored by Cee Nell's avatar Cee Nell
Browse files

Merge branch 'better-tooltip' into 'main' 

read in translated maps

See merge request !87
parents ed516d33 003e9732
No related branches found
No related tags found
1 merge request!87read in translated maps
Hide whitespace changes
Inline Side-by-side
src/components/MapsSection.vue
+ 34
− 59
View file @ 8c9b33e6
......@@ -17,28 +17,20 @@
<picture>
<source
type="image/webp"
srcset="
@/assets/images/responsive_images/avg_household_size_2022_en-320.webp 320w,
@/assets/images/responsive_images/avg_household_size_2022_en-640.webp 640w,
@/assets/images/responsive_images/avg_household_size_2022_en-1280.webp 1280w,
@/assets/images/responsive_images/avg_household_size_2022_en-1800.webp 1920w"
:srcset="getImageSrcSet('avg_household_size_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
srcset="
@/assets/images/responsive_images/avg_household_size_2022_en-320.jpg 320w,
@/assets/images/responsive_images/avg_household_size_2022_en-640.jpg 640w,
@/assets/images/responsive_images/avg_household_size_2022_en-1280.jpg 1280w,
@/assets/images/responsive_images/avg_household_size_2022_en-1800.jpg 1920w"
:srcset="getImageSrcSet('avg_household_size_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
src="@/assets/images/responsive_images/avg_household_size_2022_en-1280.jpg"
:src="getImageSrc('avg_household_size_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p1Alt')"
/>
</picture>
</div>
<!-- Accordion 2 -->
<button class="accordion latino-accordion">
<!-- Accordion 2 -->
<button class="accordion latino-accordion">
<span v-html="t('text.components.mapText.p4Title')"></span><span class="symbol">+</span>
</button>
<div class="panel">
......@@ -46,21 +38,13 @@
<picture>
<source
type="image/webp"
srcset="
@/assets/images/responsive_images/perc_hispanic_census_2022_en-320.webp 320w,
@/assets/images/responsive_images/perc_hispanic_census_2022_en-640.webp 640w,
@/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.webp 1280w,
@/assets/images/responsive_images/perc_hispanic_census_2022_en-1800.webp 1920w"
:srcset="getImageSrcSet('perc_hispanic_census_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
srcset="
@/assets/images/responsive_images/perc_hispanic_census_2022_en-320.jpg 320w,
@/assets/images/responsive_images/perc_hispanic_census_2022_en-640.jpg 640w,
@/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.jpg 1280w,
@/assets/images/responsive_images/perc_hispanic_census_2022_en-1800.jpg 1920w"
:srcset="getImageSrcSet('perc_hispanic_census_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
src="@/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.jpg"
:src="getImageSrc('perc_hispanic_census_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p4Alt')"
/>
</picture>
......@@ -75,21 +59,13 @@
<picture>
<source
type="image/webp"
srcset="
@/assets/images/responsive_images/perc_disabled_census_2022_en-320.webp 320w,
@/assets/images/responsive_images/perc_disabled_census_2022_en-640.webp 640w,
@/assets/images/responsive_images/perc_disabled_census_2022_en-1280.webp 1280w,
@/assets/images/responsive_images/perc_disabled_census_2022_en-1800.webp 1920w"
:srcset="getImageSrcSet('perc_disabled_census_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
srcset="
@/assets/images/responsive_images/perc_disabled_census_2022_en-320.jpg 320w,
@/assets/images/responsive_images/perc_disabled_census_2022_en-640.jpg 640w,
@/assets/images/responsive_images/perc_disabled_census_2022_en-1280.jpg 1280w,
@/assets/images/responsive_images/perc_disabled_census_2022_en-1800.jpg 1920w"
:srcset="getImageSrcSet('perc_disabled_census_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
src="@/assets/images/responsive_images/perc_disabled_census_2022_en-1280.jpg"
:src="getImageSrc('perc_disabled_census_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p5Alt')"
/>
</picture>
......@@ -104,21 +80,13 @@
<picture>
<source
type="image/webp"
srcset="
@/assets/images/responsive_images/med_income_census_2022_en-320.webp 320w,
@/assets/images/responsive_images/med_income_census_2022_en-640.webp 640w,
@/assets/images/responsive_images/med_income_census_2022_en-1280.webp 1280w,
@/assets/images/responsive_images/med_income_census_2022_en-1800.webp 1920w"
:srcset="getImageSrcSet('med_income_census_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
srcset="
@/assets/images/responsive_images/med_income_census_2022_en-320.jpg 320w,
@/assets/images/responsive_images/med_income_census_2022_en-640.jpg 640w,
@/assets/images/responsive_images/med_income_census_2022_en-1280.jpg 1280w,
@/assets/images/responsive_images/med_income_census_2022_en-1800.jpg 1920w"
:srcset="getImageSrcSet('med_income_census_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
src="@/assets/images/responsive_images/med_income_census_2022_en-1280.jpg"
:src="getImageSrc('med_income_census_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p2Alt')"
/>
</picture>
......@@ -133,21 +101,13 @@
<picture>
<source
type="image/webp"
srcset="
@/assets/images/responsive_images/median_rent_2022_en-320.webp 320w,
@/assets/images/responsive_images/median_rent_2022_en-640.webp 640w,
@/assets/images/responsive_images/median_rent_2022_en-1280.webp 1280w,
@/assets/images/responsive_images/median_rent_2022_en-1800.webp 1920w"
:srcset="getImageSrcSet('median_rent_2022', 'webp')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
/>
<img
srcset="
@/assets/images/responsive_images/median_rent_2022_en-320.jpg 320w,
@/assets/images/responsive_images/median_rent_2022_en-640.jpg 640w,
@/assets/images/responsive_images/median_rent_2022_en-1280.jpg 1280w,
@/assets/images/responsive_images/median_rent_2022_en-1800.jpg 1920w"
:srcset="getImageSrcSet('median_rent_2022', 'jpg')"
sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
src="@/assets/images/responsive_images/median_rent_2022_en-1280.jpg"
:src="getImageSrc('median_rent_2022', 'jpg', 1280)"
:alt="t('text.components.mapText.p3Alt')"
/>
</picture>
......@@ -163,8 +123,24 @@
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { t, locale } = useI18n();
const getImageSrc = (baseName, format, size) => {
const lang = locale.value === 'es' ? 'es' : 'en'; // Get language
return new URL(`../assets/images/responsive_images/${baseName}_${lang}-${size}.${format}`, import.meta.url).href;
};
const getImageSrcSet = (baseName, format) => {
const lang = locale.value === 'es' ? 'es' : 'en'; // Get language
return `
${new URL(`../assets/images/responsive_images/${baseName}_${lang}-320.${format}`, import.meta.url).href} 320w,
${new URL(`../assets/images/responsive_images/${baseName}_${lang}-640.${format}`, import.meta.url).href} 640w,
${new URL(`../assets/images/responsive_images/${baseName}_${lang}-1280.${format}`, import.meta.url).href} 1280w,
${new URL(`../assets/images/responsive_images/${baseName}_${lang}-1800.${format}`, import.meta.url).href} 1920w
`;
};
// Accordion click handler
onMounted(() => {
const acc = document.getElementsByClassName("accordion");
for (let i = 0; i < acc.length; i++) {
......@@ -183,7 +159,6 @@ onMounted(() => {
}
});
</script>
<style lang="scss" scoped>
$Demographiccharacteristics: var(--color-Demographiccharacteristics);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment