From bbf8848e9cf307963eaee9c595dbf1b5bff2a394 Mon Sep 17 00:00:00 2001 From: Cee <cnell@usgs.gov> Date: Sun, 19 May 2024 01:17:56 -0500 Subject: [PATCH 1/6] use composition api --- src/components/VizTitle.vue | 94 +++++++++++++++---------------------- 1 file changed, 37 insertions(+), 57 deletions(-) diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue index 07c422d..e5345cf 100644 --- a/src/components/VizTitle.vue +++ b/src/components/VizTitle.vue @@ -1,101 +1,81 @@ <template> <header id="grid-container"> - <div - id="title-container" - :class="{ mobile: mobileView}" - > + <div id="title-container" :class="{ mobile: mobileView }"> <img id="title-image" - :class="{ mobile: mobileView}" + :class="{ mobile: mobileView }" src="@/assets/images/hero_img_cutout_less-stylized_feather.png" alt="Social vulnerability and water insecurity" - > + /> <div id="image-caption"> - <p style="font-size: 60px;"><strong>Unequal access to water</strong></p> - <p style="font-size: 38px; margin-top: 10px">How societal factors shape exposure to water-related hazards,<br>likelihood to suffer harm, and ability to cope and recover from losses</p> + <p class="title"><strong>Unequal access to water</strong></p> + <p class="subtitle"> + How societal factors shape exposure to water-related hazards,<br /> + likelihood to suffer harm, and ability to cope and recover from losses + </p> </div> </div> - <div - id="intro-container" - :class="{ mobile: mobileView}" - > - </div> + <div id="intro-container" :class="{ mobile: mobileView }"></div> </header> </template> -<script> - import { isMobile } from 'mobile-device-detect'; +<script setup> +import { ref } from 'vue'; +import { isMobile } from 'mobile-device-detect'; - export default { - name: "VizTitle", - components: { - }, - props: { - data: Object - }, - data() { - return { - publicPath: import.meta.env.BASE_URL, // find the files when on different deployment roots - mobileView: isMobile, // test for mobile - } - }, - mounted(){ - const self = this; - } - } +const mobileView = ref(isMobile); </script> <style lang="scss" scoped> #grid-container { display: grid; - padding: 20px 0 20px 0; + padding: 20px 0; gap: 5px; - grid-template-columns: 65vw 25vw; - grid-template-rows: max-content max-content max-content max-content; - grid-template-areas: - "title title" - "intro intro"; + grid-template-columns: 1fr; + grid-template-areas: + "title" + "intro"; + width: 100vw; justify-content: center; margin: auto; - max-width: 90vw; - min-width: 90vw; @media screen and (max-width: 600px) { - padding: 0px 0 20px 0; + padding: 0 0 20px; grid-template-columns: 100%; - grid-template-rows: max-content max-content max-content max-content max-content; - grid-template-areas: - "title" - "intro" + grid-template-rows: max-content max-content; } } + #title-container { grid-area: title; - text-align: center; /* Center the content horizontally */ + text-align: center; } #title-image { - max-width: 100%; /* Ensure the image doesn't exceed the width of its container */ - margin: auto; /* Center the image horizontally */ + width: 100vw; + max-width: 100%; + margin: auto; } -#title-image.mobile { - width: 100%; /* Ensure the image takes up the full width on mobile */ +#image-caption { + font-family: 'Source Sans Pro', sans-serif; + margin-top: -10px; } -#image-caption { - font-family: 'Source Sans Pro', sans-serif; /* Set the font family */ - margin-top: -10px; /* Add space between the image and the caption */ +.title { + font-size: 60px; + font-weight: bold; } -#image-caption strong { - font-weight: bold; /* Set the text to bold */ +.subtitle { + font-size: 38px; + margin-top: 10px; } #intro-container { grid-area: intro; - padding: 5px 0px 0px 5px; + padding: 5px 0 0 5px; @media screen and (max-width: 600px) { - padding: 1px 0px 0px 5px; + padding: 1px 0 0 5px; } } </style> -- GitLab From b2d96b65db416c45cd3c9950fd415f0031fed39a Mon Sep 17 00:00:00 2001 From: Cee <cnell@usgs.gov> Date: Sun, 19 May 2024 01:20:53 -0500 Subject: [PATCH 2/6] use mobile class to set width --- src/components/VizTitle.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue index e5345cf..2c44142 100644 --- a/src/components/VizTitle.vue +++ b/src/components/VizTitle.vue @@ -10,8 +10,7 @@ <div id="image-caption"> <p class="title"><strong>Unequal access to water</strong></p> <p class="subtitle"> - How societal factors shape exposure to water-related hazards,<br /> - likelihood to suffer harm, and ability to cope and recover from losses + How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses </p> </div> </div> @@ -78,4 +77,12 @@ const mobileView = ref(isMobile); padding: 1px 0 0 5px; } } + +#title-image.mobile { + width: 100vw; /* Ensure the image takes up the full width on mobile */ +} + +#intro-container.mobile { + padding: 1px 0 0 5px; /* Specific padding for mobile view */ +} </style> -- GitLab From e6aba124c28f6c68058e75b56ffbe4f66c625924 Mon Sep 17 00:00:00 2001 From: Cee <cnell@usgs.gov> Date: Sun, 19 May 2024 01:25:15 -0500 Subject: [PATCH 3/6] remove spacing around image --- src/components/VizTitle.vue | 1 + src/views/VisualizationView.vue | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue index 2c44142..64c6be9 100644 --- a/src/components/VizTitle.vue +++ b/src/components/VizTitle.vue @@ -26,6 +26,7 @@ const mobileView = ref(isMobile); </script> <style lang="scss" scoped> + #grid-container { display: grid; padding: 20px 0; diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue index d7a97e5..aa410e3 100644 --- a/src/views/VisualizationView.vue +++ b/src/views/VisualizationView.vue @@ -24,7 +24,7 @@ <style lang="scss" scoped> #visualization{ - padding: 6rem 0rem 5rem 0rem; + padding: 0rem 0rem 0rem 0rem; } </style> -- GitLab From 2abce68c9351f17cb6c9811aac035a31e6480313 Mon Sep 17 00:00:00 2001 From: Cee <cnell@usgs.gov> Date: Sun, 19 May 2024 01:27:44 -0500 Subject: [PATCH 4/6] drop padding --- src/components/VizTitle.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue index 64c6be9..8c8a579 100644 --- a/src/components/VizTitle.vue +++ b/src/components/VizTitle.vue @@ -29,7 +29,7 @@ const mobileView = ref(isMobile); #grid-container { display: grid; - padding: 20px 0; + padding: 0px 0; gap: 5px; grid-template-columns: 1fr; grid-template-areas: @@ -81,6 +81,7 @@ const mobileView = ref(isMobile); #title-image.mobile { width: 100vw; /* Ensure the image takes up the full width on mobile */ + padding: 0px 0 0 0px; } #intro-container.mobile { -- GitLab From 7cca32fbbbfa4f40e5224d5130845a685864bde6 Mon Sep 17 00:00:00 2001 From: Cee <cnell@usgs.gov> Date: Sun, 19 May 2024 01:40:50 -0500 Subject: [PATCH 5/6] adjust text scaling --- src/App.vue | 10 +++++----- src/components/VizTitle.vue | 40 +++---------------------------------- 2 files changed, 8 insertions(+), 42 deletions(-) diff --git a/src/App.vue b/src/App.vue index 4dd7250..95e0fcd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -110,8 +110,8 @@ body { } } h1{ - font-size: 4.5rem; - font-weight: 500; + font-size: 6rem; + font-weight: 700; font-family: $SourceSans; line-height: 1; text-align: left; @@ -125,7 +125,7 @@ h2{ font-weight: 700; text-align: left; font-family: $SourceSans; - font-size: 6rem; + font-size: 4.5rem; margin-top: 5px; line-height: 1.2; color: $textcolor; @@ -135,11 +135,11 @@ h2{ } } h3{ - font-size: 3.5rem; + font-size: 3rem; padding-top: 1em; padding-bottom: .25em; font-family: $SourceSans; - font-weight: 700; + font-weight: 600; color: $textcolor; @media screen and (max-width: 600px) { font-size: 3.2rem; diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue index 8c8a579..fda5a00 100644 --- a/src/components/VizTitle.vue +++ b/src/components/VizTitle.vue @@ -7,14 +7,11 @@ src="@/assets/images/hero_img_cutout_less-stylized_feather.png" alt="Social vulnerability and water insecurity" /> - <div id="image-caption"> - <p class="title"><strong>Unequal access to water</strong></p> - <p class="subtitle"> + <h1>Unequal access to water</h1> + <h3> How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses - </p> - </div> + </h3> </div> - <div id="intro-container" :class="{ mobile: mobileView }"></div> </header> </template> @@ -56,35 +53,4 @@ const mobileView = ref(isMobile); margin: auto; } -#image-caption { - font-family: 'Source Sans Pro', sans-serif; - margin-top: -10px; -} - -.title { - font-size: 60px; - font-weight: bold; -} - -.subtitle { - font-size: 38px; - margin-top: 10px; -} - -#intro-container { - grid-area: intro; - padding: 5px 0 0 5px; - @media screen and (max-width: 600px) { - padding: 1px 0 0 5px; - } -} - -#title-image.mobile { - width: 100vw; /* Ensure the image takes up the full width on mobile */ - padding: 0px 0 0 0px; -} - -#intro-container.mobile { - padding: 1px 0 0 5px; /* Specific padding for mobile view */ -} </style> -- GitLab From d3162c3686b9cfe09ab447fca3d1a6b7edd7223d Mon Sep 17 00:00:00 2001 From: Cee <cnell@usgs.gov> Date: Sun, 19 May 2024 14:40:08 -0500 Subject: [PATCH 6/6] adjust alignment --- src/App.vue | 2 +- src/components/NarrativeIntro.vue | 12 +++++------- src/components/VizTitle.vue | 14 ++++++++++---- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/App.vue b/src/App.vue index 95e0fcd..7286728 100644 --- a/src/App.vue +++ b/src/App.vue @@ -100,7 +100,7 @@ body { margin: 0; padding: 0; line-height: 1.2; - font-size: 1.95rem; + font-size: 1.75rem; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue index 5bd1cdb..a2d9e89 100644 --- a/src/components/NarrativeIntro.vue +++ b/src/components/NarrativeIntro.vue @@ -84,9 +84,9 @@ const self = this; } } - </script> +</script> - <style lang="scss" scoped> +<style lang="scss" scoped> #grid-container { display: grid; padding: 20px 0 20px 0; @@ -98,17 +98,15 @@ min-width: 90vw; } - #title-container { +#title-container { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; - } - - #image-container-col { } + - .tooltip-span { +.tooltip-span { position: relative; display: inline-block; border-bottom: 1px dotted blue; diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue index fda5a00..f4a734c 100644 --- a/src/components/VizTitle.vue +++ b/src/components/VizTitle.vue @@ -27,11 +27,10 @@ const mobileView = ref(isMobile); #grid-container { display: grid; padding: 0px 0; - gap: 5px; + gap: 0px; grid-template-columns: 1fr; grid-template-areas: - "title" - "intro"; + "title"; width: 100vw; justify-content: center; margin: auto; @@ -42,7 +41,7 @@ const mobileView = ref(isMobile); } } -#title-container { +#title-container { grid-area: title; text-align: center; } @@ -53,4 +52,11 @@ const mobileView = ref(isMobile); margin: auto; } +h1, h3 { + margin-left: 50px; + margin-right: 50px; + margin-top: 20px; + text-align: left; +} + </style> -- GitLab