Marker tooltip content is a component
This commit is contained in:
Alexis
@@ -16,121 +16,6 @@
|
|||||||
.leaflet-popup-content {
|
.leaflet-popup-content {
|
||||||
min-width: 20rem;
|
min-width: 20rem;
|
||||||
margin: 1rem;
|
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;
|
height: .8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-tooltip-pane {
|
.leaflet-tooltip-pane {
|
||||||
.leaflet-tooltip {
|
.leaflet-tooltip {
|
||||||
&.capital-name {
|
&.capital-name {
|
||||||
|
|||||||
@@ -5,8 +5,7 @@ import MarkerCreator from './overlay/MarkerCreator.vue';
|
|||||||
import { t } from '@/i18n/store';
|
import { t } from '@/i18n/store';
|
||||||
import { getLangFromUrl } from '@/i18n/utils';
|
import { getLangFromUrl } from '@/i18n/utils';
|
||||||
import { normalizeString } from '@/utils/Strings';
|
import { normalizeString } from '@/utils/Strings';
|
||||||
|
import MarkerContent from './MarkerContent.astro';
|
||||||
import CopyText from '../global/CopyText.astro';
|
|
||||||
|
|
||||||
interface Props extends MapProps {}
|
interface Props extends MapProps {}
|
||||||
|
|
||||||
@@ -23,11 +22,6 @@ const {
|
|||||||
rulerHideWalkDistance = false,
|
rulerHideWalkDistance = false,
|
||||||
backgroundColor = 'transparent',
|
backgroundColor = 'transparent',
|
||||||
} = Astro.props
|
} = 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">
|
<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;">
|
<div style="height: 0; width: 0; overflow: hidden; display: none;">
|
||||||
{markers.map((m, index) => (
|
{markers.map((m, index) => (
|
||||||
<div id="popup-template" data-id={`marker-${index}`} class="tooltip-content">
|
<div id="popup-template" data-id={`marker-${index}`}>
|
||||||
{m.cover && m.coverAuthor && m.coverLink && (
|
<MarkerContent marker={m} />
|
||||||
<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>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -87,9 +50,7 @@ const seeMapText = t('maps.go-to-map', lang)
|
|||||||
mapWidth,
|
mapWidth,
|
||||||
rulerDistanceRatio,
|
rulerDistanceRatio,
|
||||||
rulerMainUnit,
|
rulerMainUnit,
|
||||||
rulerHideWalkDistance,
|
rulerHideWalkDistance
|
||||||
byText,
|
|
||||||
seeMapText
|
|
||||||
}}
|
}}
|
||||||
defer
|
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