From 4f34f8b9ebed6121131d1d18e55ad04bb02ae484 Mon Sep 17 00:00:00 2001 From: mwbernard Date: Fri, 19 Jan 2024 14:13:31 -0800 Subject: [PATCH] Final style adjustments --- vacs-map-app/src/LandingPage.vue | 1 - vacs-map-app/src/MapExplorer.vue | 9 +++++-- vacs-map-app/src/assets/base.css | 6 ++++- vacs-map-app/src/assets/img/checkmark.svg | 3 +++ vacs-map-app/src/components/CardWrapper.vue | 3 +++ .../src/components/ExploreSidebar.vue | 24 +++++++++++++------ vacs-map-app/src/components/OverviewTop.vue | 10 +++++--- .../src/components/SandAndSoilOverlay.vue | 2 +- .../src/components/pages/CropTypeOverview.vue | 3 --- vacs-map-app/src/stores/mapExplore.js | 18 +++++++------- 10 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 vacs-map-app/src/assets/img/checkmark.svg diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue index 05b361e..3e004f4 100644 --- a/vacs-map-app/src/LandingPage.vue +++ b/vacs-map-app/src/LandingPage.vue @@ -342,7 +342,6 @@ a { diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue index eafd515..f4c291e 100644 --- a/vacs-map-app/src/MapExplorer.vue +++ b/vacs-map-app/src/MapExplorer.vue @@ -15,8 +15,12 @@
- - + +
@@ -222,6 +226,7 @@ button.active:hover { .hidden { pointer-events: none; opacity: 10%; + filter: blur(8px); } @media only screen and (max-width: 720px) { diff --git a/vacs-map-app/src/assets/base.css b/vacs-map-app/src/assets/base.css index ae3dda5..0913606 100644 --- a/vacs-map-app/src/assets/base.css +++ b/vacs-map-app/src/assets/base.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap'); :root { --black: #17191b; @@ -43,6 +43,10 @@ body { -moz-osx-font-smoothing: grayscale; } +button { + font-family: var(--font-family-body); +} + @font-face { font-family: PPEiko-thin; src: url('./fonts/pp-eiko/PPEiko-Thin.otf'); diff --git a/vacs-map-app/src/assets/img/checkmark.svg b/vacs-map-app/src/assets/img/checkmark.svg new file mode 100644 index 0000000..e2100dc --- /dev/null +++ b/vacs-map-app/src/assets/img/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/vacs-map-app/src/components/CardWrapper.vue b/vacs-map-app/src/components/CardWrapper.vue index b4088b4..7c084b5 100644 --- a/vacs-map-app/src/components/CardWrapper.vue +++ b/vacs-map-app/src/components/CardWrapper.vue @@ -155,9 +155,11 @@ const useDarkIndicatorText = computed(() => { .card-wrapper.dynamic { height: var(--title-height); + box-shadow: 0 0 0 1px var(--dark-gray); } .card-wrapper.dynamic.active { + box-shadow: 0 0 0 1px var(--gray); height: unset; } @@ -209,6 +211,7 @@ const useDarkIndicatorText = computed(() => { } .title-row img { + margin: auto 0; margin-left: auto; } diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue index 602e64a..e4f2cdd 100644 --- a/vacs-map-app/src/components/ExploreSidebar.vue +++ b/vacs-map-app/src/components/ExploreSidebar.vue @@ -64,13 +64,16 @@
- emissions scenario - +
+ emissions scenario + +
+ { gap: 1rem; padding-top: 0.5rem; } + +.scenario-title { + display: flex; + flex-direction: row; + gap: 0.25rem; + align-items: center; +} diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue index 56660a1..f1691f6 100644 --- a/vacs-map-app/src/components/OverviewTop.vue +++ b/vacs-map-app/src/components/OverviewTop.vue @@ -6,6 +6,7 @@ @@ -64,11 +65,11 @@ const copyLink = () => { .overview-top { display: flex; flex-direction: column; - font-family: var(--font-family-h2); + font-family: var(--font-family-header); font-size: 1.5rem; gap: 0.5rem; padding: 1rem var(--page-horizontal-margin) 0.375rem var(--page-horizontal-margin); - background: var(--black-90); + background: var(--black-70); } .header-question { @@ -93,9 +94,10 @@ const copyLink = () => { border-radius: 0.125rem; cursor: default; width: max-content; - max-width: 12rem; z-index: 5000; box-shadow: var(--shadow); + + white-space: nowrap; } .row { @@ -142,6 +144,8 @@ button:hover { button:hover .copy-link-message, button:hover .toggle-colormode-message { display: flex; + gap: 0.5rem; + align-items: center; } .button-active { diff --git a/vacs-map-app/src/components/SandAndSoilOverlay.vue b/vacs-map-app/src/components/SandAndSoilOverlay.vue index 1660e7b..f4996d9 100644 --- a/vacs-map-app/src/components/SandAndSoilOverlay.vue +++ b/vacs-map-app/src/components/SandAndSoilOverlay.vue @@ -32,6 +32,7 @@ const { soil: soilScheme, sand: sandScheme } = storeToRefs(colorStore) width: 100%; min-height: 100%; + backdrop-filter: blur(8px); background: var(--black-90); color: var(--white); @@ -41,7 +42,6 @@ const { soil: soilScheme, sand: sandScheme } = storeToRefs(colorStore) justify-content: center; padding: 1.25rem; - } h1 { diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue index b4a8dba..9729c0a 100644 --- a/vacs-map-app/src/components/pages/CropTypeOverview.vue +++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue @@ -35,9 +35,6 @@ const showFilters = ref(false) } @media only screen and (max-width: 720px) { - .wrapper { - box-shadow: var(--shadow); - } .desktop { display: none; } diff --git a/vacs-map-app/src/stores/mapExplore.js b/vacs-map-app/src/stores/mapExplore.js index 5711aa9..5c3e4e0 100644 --- a/vacs-map-app/src/stores/mapExplore.js +++ b/vacs-map-app/src/stores/mapExplore.js @@ -14,15 +14,15 @@ export const useMapExploreStore = defineStore('mapExplore', () => { const showCropGroupMap = ref(false) const cropGroupMetric = ref('max') - return { - selectedMap, - mapPadding, - - hoveredId, - hoveredCrop, - + return { + selectedMap, + mapPadding, + + hoveredId, + hoveredCrop, + showSandAndSoil, - showCropGroupMap, - cropGroupMetric + showCropGroupMap, + cropGroupMetric } })