franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Clean up popup css

Browse Source
This commit is contained in:
Franzz
2026-04-30 12:33:32 +02:00
parent 3567f521f8
commit 560b22c039
2 changed files with 56 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/projectPopup.vue
View File

@@ -28,7 +28,7 @@ export default {
</script> </script>
<template> <template>
<div :class="'info-window '+type"> <div :class="type">
<div class="header" v-if="type=='message'"> <div class="header" v-if="type=='message'">
<h1> <h1>
<spotIcon :icon="'message'" size="lg" :text="lang.get('feed.counter', options.displayed_id)" width="auto" /> <spotIcon :icon="'message'" size="lg" :text="lang.get('feed.counter', options.displayed_id)" width="auto" />
@@ -36,23 +36,23 @@ export default {
</h1> </h1>
<div class="separator"></div> <div class="separator"></div>
</div> </div>
<div class="info coordinates"> <div class="section coordinates">
<spotIcon :icon="'coords'" fixed-width size="lg" margin="right" /> <spotIcon :icon="'coords'" fixed-width size="lg" margin="right" />
<projectMapLink :options="options" /> <projectMapLink :options="options" />
</div> </div>
<div class="info altitude" v-if="options.altitude"> <div class="section altitude" v-if="options.altitude">
<spotIcon :icon="'altitude'" fixed-width size="lg" :text="options.altitude+'m'" /> <spotIcon :icon="'altitude'" fixed-width size="lg" :text="options.altitude+'m'" />
</div> </div>
<div class="info time"> <div class="section time">
<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" /> <projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span> <span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
</div> </div>
<div class="info weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)"> <div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
<spotIcon :icon="options.weather_icon" fixed-width size="lg" :text="options.weather_temp+'°C'" /> <spotIcon :icon="options.weather_icon" fixed-width size="lg" :text="options.weather_temp+'°C'" />
</div> </div>
<div v-if="medias.length > 0" class="info"> <div v-if="medias.length > 0" class="section medias">
<spotIcon icon="media" fixed-width size="lg" :text="lang.get('media.nearby')" /> <spotIcon v-if="type=='message'" icon="media" fixed-width size="lg" :text="lang.get('media.nearby')" />
<div class="medias"> <div class="medias-list">
<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" /> <projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
</div> </div>
</div> </div>

51
src/styles/_page.project.map.scss
View File

@@ -11,7 +11,6 @@ $thumbnail-max-size: 60px;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
/* Popup */
.maplibregl-popup { .maplibregl-popup {
max-width: 300px; max-width: 300px;
} }
@@ -20,9 +19,7 @@ $thumbnail-max-size: 60px;
padding: var.$block-spacing; padding: var.$block-spacing;
background-color: color.$default-bg-light; background-color: color.$default-bg-light;
/* Marker Popup */ .header h1 {
.info-window {
h1 {
font-size: 1.4em; font-size: 1.4em;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
@@ -42,7 +39,7 @@ $thumbnail-max-size: 60px;
margin: var.$elem-spacing 0; margin: var.$elem-spacing 0;
} }
.info { .section {
font-size: 1.0em; font-size: 1.0em;
margin: var.$elem-spacing 0 0 0; margin: var.$elem-spacing 0 0 0;
@@ -51,6 +48,9 @@ $thumbnail-max-size: 60px;
} }
} }
.medias-list {
line-height: 0;
a.media-link { a.media-link {
img { img {
width: auto; width: auto;
@@ -75,10 +75,9 @@ $thumbnail-max-size: 60px;
} }
} }
} }
}
&.message { .message .medias-list {
.medias {
line-height: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var.$elem-spacing; gap: var.$elem-spacing;
@@ -98,47 +97,17 @@ $thumbnail-max-size: 60px;
} }
} }
} }
}
&.media { .media {
.coordinates { .coordinates {
margin: 0; margin-top: 0;
} }
.medias { .medias-list {
a.media-link img { a.media-link img {
width: 100%; width: 100%;
} }
} }
} }
} }
/* Track Popup */
.track_tooltip {
p {
margin: 0;
&.description {
font-size: 1.15em;
}
}
h1, .description {
@include common.no-text-overflow();
}
.body {
padding-left: calc(1.25em * 1.4 + var.$elem-spacing );
.details {
margin-top: var.$block-spacing * -1;
p.detail {
margin-top: var.$block-spacing;
width: 50%;
display: inline-block;
}
}
}
}
}
} }