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

Added breadcrumbs

Browse Source
This commit is contained in:
Alexis
2025-03-16 16:40:22 +01:00
parent 0a3f86b539
commit 29599f0c5b
9 changed files with 140 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/maps/MapOverlay.astro
View File

@@ -1,8 +1,9 @@
---
import type { MapMarker, PlayerMarker } from "@/types/Leaflet";
import type { MapOverlayProps } from "@/types/Map";
import SearchMarkers from "./overlay/SearchMarkers.vue";
import type { MapOverlayProps } from "@/types/Map";
import MapOverlayBreadcrumbs from "./MapOverlayBreadcrumbs.astro";
interface Props extends MapOverlayProps {}
@@ -14,12 +15,15 @@ const {
disableCapitals: false,
disableLandmarks: false,
disableQuests: false,
}
},
breadcrumbs = [],
} = Astro.props
---
<div class="world-overlay">
<SearchMarkers client:load mapKey={mapKey} markers={markers} players={players} searchConfig={searchConfig} />
<MapOverlayBreadcrumbs breadcrumbs={breadcrumbs} />
</div>
<style lang="scss">
@@ -32,5 +36,7 @@ const {
z-index: 10;
padding: 10px;
pointer-events: none;
display: grid;
row-gap: .25rem;
}
</style>

105
src/components/maps/MapOverlayBreadcrumbs.astro Normal file
View File

@@ -0,0 +1,105 @@
---
import type { BreadcrumbItem } from "@/types/Map";
interface Props {
breadcrumbs?: BreadcrumbItem[];
}
const { breadcrumbs = [] } = Astro.props
---
{breadcrumbs.length > 0 &&
<nav>
<menu>
{breadcrumbs.map((breadcrumb, index) => (
<li>
{index === breadcrumbs.length - 1 &&
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
<span class="breadcrumb" aria-current="page">
<span class="label">
{breadcrumb.name}
</span>
</span>
}
{!(index === breadcrumbs.length - 1) &&
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
<a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }}>
<span class="label">
{breadcrumb.name}
</span>
</a>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
}
</li>
))}
</menu>
</nav>
}
<style lang="scss">
menu {
width: fit-content;
display: flex;
flex-wrap: wrap;
gap: .25rem;
margin-top: .5rem;
padding-block: .25rem;
padding-inline: .8rem;
border: 1px solid var(--slate-400);
background: var(--white);
border-radius: 100vmax;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
pointer-events: all;
li {
display: flex;
align-items: center;
gap: .25ch;
&:has(a:hover, a:focus-visible) {
svg.folder {
fill: var(--blue-500);
}
}
}
.breadcrumb {
display: inline-flex;
align-items: center;
gap: .5ch;
font-weight: 600;
font-size: .85em;
white-space: nowrap;
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);
@media screen and (width < 900px) {
font-size: .76em;
}
.icon {
width: 1.1em;
}
.label {
text-underline-offset: .15rem;
}
&:is(a) {
cursor: pointer;
&:hover,
&:focus-visible {
.label {
text-decoration: underline;
}
}
}
}
}
</style>

5
src/components/maps/overlay/SearchMarkers.vue
View File

@@ -271,16 +271,14 @@ function resetAllFields(actionAfter?: "focusAfter") {
<style lang="scss" scoped>
.toolbar {
margin-left: calc(45px + .5rem);
@media screen and (width >= 900px) {
display: flex;
gap: .75rem;
align-items: start;
margin-left: 0;
}
.search-w {
margin-left: calc(45px + .5rem);
padding: .5rem 1.2rem;
width: calc(100% - 3rem);
background: var(--white);
@@ -293,6 +291,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
width: clamp(25rem, 35dvw, 30rem);
width: clamp(25rem, 35vw, 30rem);
margin-right: .75rem;
margin-left: 0;
}
.input-w {

4
src/pages/aldys/borelis/index.astro
View File

@@ -11,6 +11,10 @@ import MapOverlay from '@/components/maps/MapOverlay.astro'
disableCapitals: true,
disableQuests: true,
}}
breadcrumbs={[
{ name: 'Aldys', url: '/' },
{ name: 'Borélis', url: '/aldys/borelis' },
]}
/>
<Map
mapKey='aldys-borelis'

4
src/pages/aldys/cantane/index.astro
View File

@@ -18,6 +18,10 @@ const markers = markersData.data as MapMarker[]
disableCapitals: true,
disableQuests: true,
}}
breadcrumbs={[
{ name: 'Aldys', url: '/' },
{ name: 'Cantane', url: '/aldys/cantane' },
]}
/>
<Map
mapKey='aldys-cantane'

5
src/pages/aldys/cantane/mines-blanches.astro
View File

@@ -18,6 +18,11 @@ const markers = markersData.data as MapMarker[]
disableCapitals: true,
disableQuests: true,
}}
breadcrumbs={[
{ name: 'Aldys', url: '/' },
{ name: 'Cantane', url: '/aldys/cantane' },
{ name: 'Mines Blanches', url: '/aldys/cantane/mines-blanches' },
]}
/>
<Map
mapKey='aldys-cantane-mines'

3
src/pages/bamast/index.astro
View File

@@ -17,6 +17,9 @@ const players = playersData as PlayerMarker
mapKey='bamast'
markers={markers}
players={players}
breadcrumbs={[
{ name: 'Bamast', url: '/bamast' },
]}
/>
<Map
mapKey='bamast'

3
src/pages/index.astro
View File

@@ -25,6 +25,9 @@ const players = playersData as PlayerMarker
mapKey='aldys'
markers={markers}
players={players}
breadcrumbs={[
{ name: 'Aldys', url: '/' },
]}
/>
<Map
mapKey='aldys'

6
src/types/Map.ts
View File

@@ -1,5 +1,10 @@
import type { MapMarker, PlayerMarker } from "./Leaflet"
export interface BreadcrumbItem {
name: string;
url: string;
}
export interface SearchConfig {
disableQuests?: boolean
disableCapitals?: boolean
@@ -24,4 +29,5 @@ export interface MapOverlayProps {
markers?: MapMarker[]
players?: PlayerMarker
searchConfig?: SearchConfig
breadcrumbs?: BreadcrumbItem[]
}