From fe1a657c04a621df828f95a5271844c5626030b5 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Sun, 23 Mar 2025 16:53:09 +0100 Subject: [PATCH] Added translations switch button --- src/assets/scss/_animations.scss | 17 + src/assets/scss/_buttons.scss | 44 + src/assets/scss/_card.scss | 7 + src/assets/scss/_map.scss | 3 + src/assets/scss/theme.scss | 2 + src/components/maps/Map.astro | 32 +- src/components/maps/MapOverlay.astro | 24 +- .../maps/overlay/CountryOverlay.astro | 1377 ----------------- src/components/maps/overlay/LangSwitcher.vue | 72 + .../maps/overlay/LangSwitcherButton.vue | 65 + .../maps/overlay/SearchMapSwitch.vue | 55 +- src/components/maps/overlay/SearchMarkers.vue | 27 +- src/i18n/ui.ts | 4 + src/i18n/utils.ts | 22 +- 14 files changed, 278 insertions(+), 1473 deletions(-) create mode 100644 src/assets/scss/_animations.scss create mode 100644 src/assets/scss/_map.scss delete mode 100644 src/components/maps/overlay/CountryOverlay.astro create mode 100644 src/components/maps/overlay/LangSwitcher.vue create mode 100644 src/components/maps/overlay/LangSwitcherButton.vue diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss new file mode 100644 index 00000000..47034ccd --- /dev/null +++ b/src/assets/scss/_animations.scss @@ -0,0 +1,17 @@ +// Animations on load +@media screen and (prefers-reduced-motion: no-preference) { + .appear-from-top { + animation: fadeIn .2s cubic-bezier(0.785, 0.135, 0.15, 0.86); + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-1rem); + } + to { + opacity: 1; + transform: translateY(0); + } + } +} diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss index 8433d535..2f9e80ab 100644 --- a/src/assets/scss/_buttons.scss +++ b/src/assets/scss/_buttons.scss @@ -78,4 +78,48 @@ &.btn-shadow { box-shadow: rgba(0, 0, 0, 0.15) 0 .2rem .3rem; } +} + +.btn-round { + display: grid; + place-items: center; + height: 45px; + aspect-ratio: 1; + background-color: var(--white); + border: 1px solid var(--slate-400); + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + border-radius: 100vmax; + pointer-events: all; + cursor: pointer; + outline: .2rem solid transparent; + transition-property: color, background-color, border-color, outline-color; + transition-duration: .15s; + transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); + + svg { + width: 1.15em; + transition-property: fill; + transition-duration: .15s; + transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); + } + + &:hover, + &:focus-visible { + outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent); + border-color: var(--blue-500); + + svg { + fill: var(--blue-500); + } + } + + &.active { + color: var(--white); + background-color: var(--blue-500); + border-color: var(--blue-700); + + svg { + fill: var(--white); + } + } } \ No newline at end of file diff --git a/src/assets/scss/_card.scss b/src/assets/scss/_card.scss index 5c823f35..efe9f39b 100644 --- a/src/assets/scss/_card.scss +++ b/src/assets/scss/_card.scss @@ -3,9 +3,16 @@ padding-inline: .75rem; border-radius: 8px; background-color: var(--white); + border: 1px solid var(--slate-100); + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; min-width: 15rem; .card-arrow { fill: var(--white); } + + &.p-sm { + min-width: fit-content; + padding: .5rem .25rem; + } } diff --git a/src/assets/scss/_map.scss b/src/assets/scss/_map.scss new file mode 100644 index 00000000..c647af20 --- /dev/null +++ b/src/assets/scss/_map.scss @@ -0,0 +1,3 @@ +// :root { +// --sidebar-size: 3rem; +// } diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index a85a0ea3..2711edb5 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -4,8 +4,10 @@ @use 'leaflet'; @use 'forms'; +@use 'animations'; @use 'buttons'; @use 'card'; +@use 'map'; :root { --white: #fff; diff --git a/src/components/maps/Map.astro b/src/components/maps/Map.astro index 5891ad65..2e3c6f98 100644 --- a/src/components/maps/Map.astro +++ b/src/components/maps/Map.astro @@ -4,6 +4,7 @@ import type { MapProps } from '@/types/Map'; import MarkerCreator from './overlay/MarkerCreator.vue'; import { t } from '@/i18n/store'; import { getLangFromUrl } from '@/i18n/utils'; +import MapActions from './MapActions.astro'; interface Props extends MapProps {} @@ -26,10 +27,12 @@ const byText = t('common.by', lang) const seeMapText = t('maps.go-to-map', lang) --- -
-
- - +
+
+
+ + +
+ + + + diff --git a/src/components/maps/overlay/LangSwitcherButton.vue b/src/components/maps/overlay/LangSwitcherButton.vue new file mode 100644 index 00000000..93893938 --- /dev/null +++ b/src/components/maps/overlay/LangSwitcherButton.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue index bafbb941..6d0f8279 100644 --- a/src/components/maps/overlay/SearchMapSwitch.vue +++ b/src/components/maps/overlay/SearchMapSwitch.vue @@ -96,7 +96,7 @@ const menus: Menu[] = [ - +