Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added "new" icon to maps

Browse Source
This commit is contained in:
Alexis
2025-01-13 14:04:13 +01:00
parent 1c05d22409
commit ad61fd5f87
1 changed files with 44 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/maps/overlay/SearchMapSwitch.vue
View File

@@ -2,6 +2,7 @@
import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue' import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix-vue'
import { computed, onUpdated, ref, watch } from 'vue'; import { computed, onUpdated, ref, watch } from 'vue';
import { useElementHover, useFocus } from '@vueuse/core' import { useElementHover, useFocus } from '@vueuse/core'
import Tag from '@/components/global/Tag.vue';
const navModel = ref(false); const navModel = ref(false);
@@ -28,7 +29,8 @@ onUpdated(() => {
interface MenuItem { interface MenuItem {
name: string, name: string,
img: string, img: string,
url: string url: string,
newItem?: boolean
} }
const worldMenuItems: MenuItem[] = [ const worldMenuItems: MenuItem[] = [
@@ -40,7 +42,8 @@ const worldMenuItems: MenuItem[] = [
{ {
name: 'Bamast', name: 'Bamast',
img: '/images/bamast-cover.png', img: '/images/bamast-cover.png',
url: '/bamast' url: '/bamast',
newItem: true
} }
] ]
@@ -53,12 +56,14 @@ const cityMenuItems: MenuItem[] = [
{ {
name: 'Borélis', name: 'Borélis',
img: '/images/aldys-borelis-cover.png', img: '/images/aldys-borelis-cover.png',
url: '/aldys/borelis' url: '/aldys/borelis',
newItem: true
}, },
{ {
name: 'Cantane', name: 'Cantane',
img: '/images/aldys-cantane-cover.png', img: '/images/aldys-cantane-cover.png',
url: '/aldys/cantane' url: '/aldys/cantane',
newItem: true
}, },
] ]
</script> </script>
@@ -80,12 +85,22 @@ const cityMenuItems: MenuItem[] = [
<menu class="map-menu"> <menu class="map-menu">
<li v-for="item in worldMenuItems" :key="item.name"> <li v-for="item in worldMenuItems" :key="item.name">
<a :href="item.url" :class="{ 'active': url?.pathname === item.url }" :tabindex="url?.pathname === item.url ? -1 : 0"> <a
:href="item.url"
:class="{ 'active': url?.pathname === item.url }"
:tabindex="url?.pathname === item.url ? -1 : 0"
:title="item.newItem ? 'Nouveau' : ''"
>
<figure> <figure>
<img :src="item.img" alt="" width="40" height="40" loading="eager"> <img :src="item.img" alt="" width="40" height="40" loading="eager">
<figcaption> <figcaption>
{{ item.name }} {{ item.name }}
<svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
<path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
<path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
</svg>
</figcaption> </figcaption>
</figure> </figure>
</a> </a>
@@ -98,12 +113,22 @@ const cityMenuItems: MenuItem[] = [
<menu class="map-menu"> <menu class="map-menu">
<li v-for="item in cityMenuItems" :key="item.name"> <li v-for="item in cityMenuItems" :key="item.name">
<a :href="item.url" :class="{ 'active': url?.pathname === item.url }" :tabindex="url?.pathname === item.url ? -1 : 0"> <a
:href="item.url"
:class="{ 'active': url?.pathname === item.url }"
:tabindex="url?.pathname === item.url ? -1 : 0"
:title="item.newItem ? 'Nouveau' : ''"
>
<figure> <figure>
<img :src="item.img" alt="" width="40" height="40" loading="eager"> <img :src="item.img" alt="" width="40" height="40" loading="eager">
<figcaption> <figcaption>
{{ item.name }} {{ item.name }}
<svg v-if="item.newItem" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
<path class="fill" d="M112.1,255c-3.6,0-7.2-.6-10.7-1.9-8.5-3.1-15.2-9.8-18.3-18.3l-16.7-45.1-45.1-16.6c-16-5.9-24.2-23.7-18.3-39.7,3.1-8.5,9.8-15.2,18.3-18.3l45.1-16.7,16.6-45.1c4.5-12.1,16.1-20.2,29-20.2s7.2.6,10.7,1.9c2.3.8,4.5,1.9,6.5,3.3,1-11.8,10.9-21.1,22.9-21.1h1v-1c0-12.7,10.3-23,23-23s23,10.3,23,23v1h1c12.7,0,23,10.3,23,23s-.7,6.4-1.9,9.2c1-.1,1.9-.2,2.9-.2,10.5,0,19.5,7.1,22.2,16.8,9.7,2.7,16.8,11.6,16.8,22.2s-7.1,19.5-16.8,22.2c-2.7,9.7-11.6,16.8-22.2,16.8s-4.6-.3-6.7-1c3.7,5.2,5.7,11.4,5.7,18,0,12.9-8.1,24.6-20.3,29l-45.1,16.6-16.6,45.1c-4.5,12.1-16.1,20.2-29,20.2ZM202.8,114.9c.4.2.8.3,1.2.5-.9-1.6-1.7-3.4-2.2-5.2-9.7-2.7-16.8-11.6-16.8-22.2s0-2,.2-2.9c-2.8,1.2-5.9,1.9-9.2,1.9-12.7,0-23-10.3-23-23v-1h-1c-2.8,0-5.5-.5-7.9-1.4l13.6,36.7,45.1,16.6ZM199,64c0,1,0,2-.2,2.9,1-.4,2-.8,3-1.1.3-1,.6-2,1.1-3-1,.1-1.9.2-2.9.2h-1v1Z"/>
<path class="stroke" d="M176,8c4.4,0,8,3.6,8,8v16h16c4.4,0,8,3.6,8,8s-3.6,8-8,8h-16v16c0,4.4-3.6,8-8,8s-8-3.6-8-8v-16h-16c-4.4,0-8-3.6-8-8s3.6-8,8-8h16v-16c0-4.4,3.6-8,8-8M111.9,48c1.8,0,3.7.3,5.5,1,4.4,1.6,7.8,5.1,9.4,9.4l19.1,51.6,51.6,19c6.3,2.3,10.5,8.3,10.4,15,0,6.7-4.1,12.7-10.4,14.9l-51.6,19.1-19,51.6c-2.4,6.4-8.5,10.4-14.9,10.4s-3.7-.3-5.5-1c-4.4-1.6-7.8-5.1-9.4-9.4l-19.1-51.6-51.6-19c-8.3-3-12.5-12.2-9.4-20.4,1.6-4.4,5.1-7.8,9.4-9.4l51.6-19.1,19-51.6c2.4-6.4,8.5-10.4,14.9-10.4M224,64c4.4,0,8,3.6,8,8v8h8c4.4,0,8,3.6,8,8s-3.6,8-8,8h-8v8c0,4.4-3.6,8-8,8s-8-3.6-8-8v-8h-8c-4.4,0-8-3.6-8-8s3.6-8,8-8h8v-8c0-4.4,3.6-8,8-8M176-22c-16.7,0-31,10.9-36,26-8,2.7-14.8,7.9-19.5,14.8-2.8-.5-5.7-.8-8.6-.8h0c-19.2,0-36.5,12.1-43.1,30.1l-14.2,38.7-38.6,14.3c-12.6,4.7-22.6,14.6-27.2,27.2-8.7,23.8,3.5,50.2,27.2,59l38.7,14.2,14.3,38.7c4.7,12.6,14.6,22.5,27.2,27.2,5.1,1.9,10.4,2.8,15.9,2.8,19.2,0,36.5-12.1,43.1-30.1l14.2-38.6,38.5-14.2c18-6.6,30.1-23.8,30.1-43,0-1.6,0-3.1-.2-4.7,8.6-3.3,15.6-9.7,19.9-17.8,12.1-6.4,20.4-19.1,20.4-33.6s-8.3-27.3-20.4-33.6c-4.2-8-11.3-14.4-19.8-17.7-1.4-15.3-11.8-28-25.8-32.7-5-15.1-19.3-26-36-26h0Z"/>
</svg>
</figcaption> </figcaption>
</figure> </figure>
</a> </a>
@@ -209,6 +234,7 @@ svg {
} }
figure { figure {
position: relative;
display: grid; display: grid;
justify-items: center; justify-items: center;
gap: .25rem; gap: .25rem;
@@ -223,7 +249,18 @@ svg {
figcaption { figcaption {
font-size: .75em; font-size: .75em;
text-align: center; text-align: center;
opacity: .75; color: var(--slate-500);
svg {
position: absolute;
top: -0.3rem;
right: -0.3rem;
z-index: 10;
pointer-events: none;
.fill { fill: var(--orange-500); }
.stroke { fill: var(--white); }
}
} }
} }
} }