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

Reposition medias in popup

Browse Source
This commit is contained in:
Franzz
2026-04-29 23:44:55 +02:00
parent 15c044ac52
commit fe2a3d91c0
2 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/projectPopup.vue
View File

@@ -31,27 +31,27 @@ export default {
<div :class="'info-window '+type"> <div :class="'info-window '+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)" /> <spotIcon :icon="'message'" size="lg" :text="lang.get('feed.counter', options.displayed_id)" width="auto" />
<span class="message-type">({{ options.type }})</span> <span class="message-type">({{ options.type }})</span>
</h1> </h1>
<div class="separator"></div> <div class="separator"></div>
</div> </div>
<p class="coordinates"> <div class="info 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" />
</p> </div>
<p class="altitude" v-if="options.altitude"> <div class="info 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'" />
</p> </div>
<p class="time"> <div class="info 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>
</p> </div>
<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)"> <div class="info 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'" />
</p> </div>
<div v-if="medias.length > 0"> <div v-if="medias.length > 0" class="info">
<div class="separator"></div> <spotIcon icon="media" fixed-width size="lg" :text="lang.get('media.nearby')" />
<div class="medias"> <div class="medias">
<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" /> <projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
</div> </div>

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

@@ -20,28 +20,29 @@ $thumbnail-max-size: 60px;
padding: var.$block-spacing; padding: var.$block-spacing;
background-color: color.$default-bg-light; background-color: color.$default-bg-light;
h1 {
font-size: 1.4em;
margin: 0;
font-weight: bold;
}
.separator {
border-top: 1px solid color.$default-bg;
margin: var.$elem-spacing 0;
}
/* Marker Popup */ /* Marker Popup */
.info-window { .info-window {
h1 .message-type { h1 {
color: color.$default; font-size: 1.4em;
font-weight: normal; margin: 0;
font-size: calc(1em / 1.4); font-weight: bold;
margin-left: 0.5em; text-align: center;
vertical-align: middle;
.message-type {
color: color.$default;
font-weight: normal;
font-size: calc(1em / 1.4);
margin-left: 0.5em;
vertical-align: center;
}
} }
p { .separator {
border-top: 1px solid color.$default-bg;
margin: var.$elem-spacing 0;
}
.info {
font-size: 1.0em; font-size: 1.0em;
margin: var.$elem-spacing 0 0 0; margin: var.$elem-spacing 0 0 0;
@@ -78,20 +79,23 @@ $thumbnail-max-size: 60px;
&.message { &.message {
.medias { .medias {
line-height: 0; line-height: 0;
display: grid; display: flex;
flex-wrap: wrap;
gap: var.$elem-spacing; gap: var.$elem-spacing;
grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr)); align-items: center;
place-items: center; margin-top: var.$elem-spacing;
a.media-link { a.media-link {
&:last-child { flex: 0 0 auto;
margin-right: 0;
}
img { img {
max-width: $thumbnail-max-size; max-width: $thumbnail-max-size;
max-height: calc($thumbnail-max-size * 2/3); max-height: calc($thumbnail-max-size * 2/3);
} }
&.drill .drill-icon {
font-size: 1.5em;
}
} }
} }
} }