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)
---
-
-
-
-
+
+
+
+
+
menuModel = true">
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+ {{ t(`lang.${lang}`) }}
+
+
+
+
+
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[] = [
-
+
@@ -141,15 +141,9 @@ const menus: Menu[] = [
@media screen and (width < 900px) {
position: absolute;
- top: 10px;
- left: 10px;
}
}
-button {
- cursor: pointer;
-}
-
.menu-title {
font-size: .9em;
font-weight: 600;
@@ -157,52 +151,6 @@ button {
margin-left: .25rem;
}
-.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;
- 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 {
- 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);
- }
- }
-}
-
-svg {
- width: 1.15em;
-}
-
.map-menu {
margin-top: .25rem;
margin-bottom: .5rem;
@@ -249,6 +197,7 @@ svg {
position: absolute;
top: -0.3rem;
right: -0.3rem;
+ width: 1.15em;
z-index: 10;
pointer-events: none;
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 784ea0f7..ffe6c164 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -1,5 +1,4 @@
-