Marker tooltip content is a component
This commit is contained in:
Alexis
@@ -16,121 +16,6 @@
|
||||
.leaflet-popup-content {
|
||||
min-width: 20rem;
|
||||
margin: 1rem;
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
margin-inline: -1.1rem;
|
||||
margin-top: -1.1rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&.landscape {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
aspect-ratio: 15 / 16;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
// Make a linear gradient from top to bottom, from transparent to black
|
||||
background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
figcaption cite {
|
||||
position: absolute;
|
||||
font-size: 85%;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
bottom: .5rem;
|
||||
right: 1rem;
|
||||
color: var(--white);
|
||||
z-index: 20;
|
||||
opacity: .6;
|
||||
transition-property: opacity;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
|
||||
|
||||
a {
|
||||
padding-right: 0;
|
||||
color: var(--white);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: .15rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--blue-500);
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
figcaption cite {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
strong.title {
|
||||
color: var(--green-500);
|
||||
}
|
||||
|
||||
a.title,
|
||||
a.map-link {
|
||||
text-underline-offset: 2px;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
text-decoration: none;
|
||||
color: var(--green-500);
|
||||
}
|
||||
}
|
||||
|
||||
.map-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5ch;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-content > * + * {
|
||||
margin: 0;
|
||||
margin-top: .66em;
|
||||
}
|
||||
|
||||
.tooltip-footer {
|
||||
display: grid;
|
||||
gap: .15em;
|
||||
font-size: .95em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,6 +24,7 @@
|
||||
height: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-tooltip-pane {
|
||||
.leaflet-tooltip {
|
||||
&.capital-name {
|
||||
|
||||
@@ -5,8 +5,7 @@ import MarkerCreator from './overlay/MarkerCreator.vue';
|
||||
import { t } from '@/i18n/store';
|
||||
import { getLangFromUrl } from '@/i18n/utils';
|
||||
import { normalizeString } from '@/utils/Strings';
|
||||
|
||||
import CopyText from '../global/CopyText.astro';
|
||||
import MarkerContent from './MarkerContent.astro';
|
||||
|
||||
interface Props extends MapProps {}
|
||||
|
||||
@@ -23,11 +22,6 @@ const {
|
||||
rulerHideWalkDistance = false,
|
||||
backgroundColor = 'transparent',
|
||||
} = Astro.props
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
|
||||
const byText = t('common.by', lang)
|
||||
const seeMapText = t('maps.go-to-map', lang)
|
||||
---
|
||||
|
||||
<div class="map-wrapper">
|
||||
@@ -39,39 +33,8 @@ const seeMapText = t('maps.go-to-map', lang)
|
||||
|
||||
<div style="height: 0; width: 0; overflow: hidden; display: none;">
|
||||
{markers.map((m, index) => (
|
||||
<div id="popup-template" data-id={`marker-${index}`} class="tooltip-content">
|
||||
{m.cover && m.coverAuthor && m.coverLink && (
|
||||
<figure class={m.coverPortrait ? 'portrait' : 'landscape'}>
|
||||
<img src={`/images/cover/${m.cover}`} alt={m.title} width={m.coverPortrait ? 210 : 420} />
|
||||
<figcaption>
|
||||
<cite>{byText} <a href={m.coverLink} target="_blank">{m.coverAuthor}</a></cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
)}
|
||||
{m.link ? (
|
||||
<a href={m.link} target="_blank" class="title">{m.title}</a>
|
||||
) : (
|
||||
<strong class="title">{m.title}</strong>
|
||||
)}
|
||||
{m.description && <p>{m.description}</p>}
|
||||
|
||||
<div class="tooltip-footer">
|
||||
{m.mapId && (
|
||||
<div>
|
||||
<a href={m.mapId} class="map-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||
|
||||
<span>
|
||||
{ seeMapText }
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="popup-template" data-id={`marker-${index}`}>
|
||||
<MarkerContent marker={m} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -87,9 +50,7 @@ const seeMapText = t('maps.go-to-map', lang)
|
||||
mapWidth,
|
||||
rulerDistanceRatio,
|
||||
rulerMainUnit,
|
||||
rulerHideWalkDistance,
|
||||
byText,
|
||||
seeMapText
|
||||
rulerHideWalkDistance
|
||||
}}
|
||||
defer
|
||||
>
|
||||
|
||||
176
src/components/maps/MarkerContent.astro
Normal file
176
src/components/maps/MarkerContent.astro
Normal file
@@ -0,0 +1,176 @@
|
||||
---
|
||||
import type { MapMarker } from '@/types/Leaflet';
|
||||
import { normalizeString } from '@/utils/Strings';
|
||||
import { getLangFromUrl } from '@/i18n/utils';
|
||||
import { t } from '@/i18n/store';
|
||||
|
||||
import CopyText from '@/components/global/CopyText.astro';
|
||||
|
||||
interface Props {
|
||||
marker: MapMarker
|
||||
}
|
||||
|
||||
const { marker: m } = Astro.props as Props;
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
|
||||
const byText = t('common.by', lang)
|
||||
const seeMapText = t('maps.go-to-map', lang)
|
||||
---
|
||||
|
||||
<div class="tooltip-content">
|
||||
{m.cover && m.coverAuthor && m.coverLink && (
|
||||
<figure class={m.coverPortrait ? 'portrait' : 'landscape'}>
|
||||
<img src={`/images/cover/${m.cover}`} alt={m.title} width={m.coverPortrait ? 210 : 420} />
|
||||
<figcaption>
|
||||
<span class="author">
|
||||
<span>{byText}</span>
|
||||
<cite>
|
||||
<a href={m.coverLink} target="_blank">{m.coverAuthor}</a>
|
||||
</cite>
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
)}
|
||||
{m.link ? (
|
||||
<a href={m.link} target="_blank" class="title">{m.title}</a>
|
||||
) : (
|
||||
<strong class="title">{m.title}</strong>
|
||||
)}
|
||||
{m.description && <p set:html={m.description} />}
|
||||
|
||||
<div class="tooltip-footer">
|
||||
{m.mapId && (
|
||||
<div>
|
||||
<a href={m.mapId} class="map-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||
|
||||
<span>
|
||||
{ seeMapText }
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
figure {
|
||||
position: relative;
|
||||
margin-inline: -1.1rem;
|
||||
margin-top: -1.1rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&.landscape {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
aspect-ratio: 15 / 16;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
// Make a linear gradient from top to bottom, from transparent to black
|
||||
background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
figcaption .author {
|
||||
position: absolute;
|
||||
font-size: 85%;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
bottom: .5rem;
|
||||
right: 1rem;
|
||||
color: var(--white);
|
||||
z-index: 20;
|
||||
opacity: .6;
|
||||
transition-property: opacity;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
|
||||
|
||||
a {
|
||||
padding-right: 0;
|
||||
color: var(--white);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: .15rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--blue-500);
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
figcaption .author {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
strong.title {
|
||||
color: var(--green-500);
|
||||
}
|
||||
|
||||
a.title,
|
||||
a.map-link {
|
||||
text-underline-offset: 2px;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
text-decoration: none;
|
||||
color: var(--green-500);
|
||||
}
|
||||
}
|
||||
|
||||
.map-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5ch;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-content > * + * {
|
||||
margin: 0;
|
||||
margin-top: .66em;
|
||||
}
|
||||
|
||||
.tooltip-footer {
|
||||
display: grid;
|
||||
gap: .15em;
|
||||
font-size: .95em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user