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

Move message atrributes to image overlay

Browse Source
This commit is contained in:
Franzz
2026-04-27 23:59:20 +02:00
parent c39b7705be
commit 13c48a559f
4 changed files with 49 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/projectPost.vue
View File

@@ -161,20 +161,22 @@
</div> </div>
<div class="body"> <div class="body">
<div v-if="options.type == 'message'" class="body-box"> <div v-if="options.type == 'message'" class="body-box">
<p> <div class="drill" @click.prevent="executeMainAction" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
<spotIcon :icon="'coords'" margin="right" size="lg" />
<projectMapLink :options="options" />
</p>
<p v-if="timeDiff">
<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
</p>
<a class="drill" @click.prevent="executeMainAction" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)"> <span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)">
<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" /> <spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
</span> </span>
<img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" /> <img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" />
<spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" /> <spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" />
</a> <div class="comment">
<p>
<spotIcon :icon="'coords'" margin="right" size="lg" />
<projectMapLink :options="options" />
</p>
<p v-if="timeDiff">
<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
</p>
</div>
</div>
</div> </div>
<div v-else-if="options.type == 'media'" class="body-box"> <div v-else-if="options.type == 'media'" class="body-box">
<projectMediaLink :options="options" :type="'post'" ref="medialink" /> <projectMediaLink :options="options" :type="'post'" ref="medialink" />

3
src/styles/_color.scss
View File

@@ -22,12 +22,13 @@ $message: hsl(109, 45%, 27%);
$message-flashy: hsl(148, 100%, 50%); $message-flashy: hsl(148, 100%, 50%);
$message-hover: color.adjust($message, $lightness: -10%, $space: hsl); $message-hover: color.adjust($message, $lightness: -10%, $space: hsl);
$message-bg: color.adjust($message, $lightness: 60%, $space: hsl); $message-bg: color.adjust($message, $lightness: 60%, $space: hsl);
$message-bg-light: color.adjust($message, $lightness: 70%, $alpha: -0.3, $space: hsl);
$media: hsl(214, 45%, 27%); $media: hsl(214, 45%, 27%);
$media-flashy: hsl(193, 100%, 50%); $media-flashy: hsl(193, 100%, 50%);
$media-hover: color.adjust($media, $lightness: -10%, $space: hsl); $media-hover: color.adjust($media, $lightness: -10%, $space: hsl);
$media-bg: color.adjust($media, $lightness: 60%, $space: hsl); $media-bg: color.adjust($media, $lightness: 60%, $space: hsl);
$media-bg-light: color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl); $media-bg-light: color.adjust($media, $lightness: 70%, $alpha: -0.3, $space: hsl);
//Over image colors //Over image colors
$over-img: #DDD; $over-img: #DDD;

59
src/styles/_page.project.feed.scss
View File

@@ -106,18 +106,25 @@
} }
} }
.comment {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: var.$elem-spacing;
line-height: normal;
box-sizing: border-box;
border-radius: 0 0 var.$block-radius var.$block-radius;
transition: opacity 0.3s;
cursor: auto;
font-size: 0.9em;
}
&.message { &.message {
background: color.$message-bg; background: color.$message-bg;
color: color.$message; color: color.$message;
p {
font-size: 0.9em;
height: 1em;
margin: 0 0 var.$elem-spacing 0;
display: inline-block;
width: 100%;
}
a { a {
color: color.$message; color: color.$message;
&:hover { &:hover {
@@ -125,8 +132,7 @@
} }
} }
a.drill { .drill {
line-height: 0;
.drill-icon { .drill-icon {
@@ -143,6 +149,24 @@
.drill-hover-icon { .drill-hover-icon {
color: color.$message-flashy; color: color.$message-flashy;
} }
.comment {
opacity: 0.3;
}
}
.comment {
background: color.$message-bg-light;
&:hover {
opacity: 1;
}
p {
margin: 0;
}
p + p {
margin-top: var.$elem-spacing;
}
} }
} }
@@ -256,21 +280,6 @@
outline: none; outline: none;
border-radius: var.$block-radius; border-radius: var.$block-radius;
} }
.comment {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: normal;
box-sizing: border-box;
margin: 0;
padding: 0.5em;
text-align: justify;
border-radius: 0 0 var.$block-radius var.$block-radius;
transition: opacity 0.3s;
opacity: 1;
}
} }
} }
} }

3
src/styles/_page.project.scss
View File

@@ -16,11 +16,12 @@
/* Drill icon */ /* Drill icon */
a.drill { .drill {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
line-height: 0;
.drill-icon { .drill-icon {
position: absolute; position: absolute;