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

Harmonize drill/stacked icons

Browse Source
This commit is contained in:
Franzz
2026-04-24 17:31:54 +02:00
parent eb0ded0d26
commit 64cacaf16e
6 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/project.vue
View File

@@ -313,7 +313,7 @@ export default {
//TODO Use same way of displaying markers (so that openMarkerPopup works on all markers) //TODO Use same way of displaying markers (so that openMarkerPopup works on all markers)
this.markers.medias.forEach(msg => { this.markers.medias.forEach(msg => {
const $Marker = document.createElement('div'); const $Marker = document.createElement('div');
const app = createApp(SpotIconStack, {iconMain: 'media', iconSub: msg.subtype+'-in'}); const app = createApp(SpotIconStack, {mainClasses: 'media', iconMain: 'marker', iconSub: msg.subtype});
app.mount($Marker); app.mount($Marker);
const $Popup = document.createElement('div'); const $Popup = document.createElement('div');

2
src/components/projectPost.vue
View File

@@ -167,7 +167,7 @@
<span class="temperature">{{ options.weather_temp+'°C' }}</span> <span class="temperature">{{ options.weather_temp+'°C' }}</span>
</span> </span>
<img class="staticmap clickable" :title="spot.lang('click_zoom')" :src="options.static_img_url" /> <img class="staticmap clickable" :title="spot.lang('click_zoom')" :src="options.static_img_url" />
<spotIconStack :iconMain="'message'" :iconSub="'message-in'" :iconSubClasses="'fa-rotate-270'" /> <spotIconStack :mainClasses="'message drill-icon'" :iconMain="'marker'" :iconSub="'footprint'" :iconSubClasses="'fa-rotate-270'" />
</a> </a>
</div> </div>
<div v-else-if="options.type == 'media'" class="body-box"> <div v-else-if="options.type == 'media'" class="body-box">

8
src/components/spotIconStack.vue
View File

@@ -6,16 +6,22 @@ export default {
spotIcon spotIcon
}, },
props: { props: {
mainClasses: String,
iconMain: String, iconMain: String,
iconMainClasses: String, iconMainClasses: String,
iconSub: String, iconSub: String,
iconSubClasses: String, iconSubClasses: String,
},
computed: {
mainClass() {
return 'icon-stack fa-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
}
} }
} }
</script> </script>
<template> <template>
<span class="drill-icon fa-stack clickable"> <span :class="mainClass">
<spotIcon :icon="iconMain" :classes="'fa-stack-2x clickable'+(iconMainClasses?' '+iconMainClasses:'')" /> <spotIcon :icon="iconMain" :classes="'fa-stack-2x clickable'+(iconMainClasses?' '+iconMainClasses:'')" />
<spotIcon :icon="iconSub" :classes="'fa-stack-1x'+(iconSubClasses?' '+iconSubClasses:'')" /> <spotIcon :icon="iconSub" :classes="'fa-stack-1x'+(iconSubClasses?' '+iconSubClasses:'')" />
</span> </span>

5
src/styles/_fa.scss
View File

@@ -43,6 +43,8 @@
/* Map */ /* Map */
.#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); } .#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); }
.#{variables.$fa-css-prefix}-marker:before { content: functions.fa-content(variables.$fa-var-map-marker); }
.#{variables.$fa-css-prefix}-footprint:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
.#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); } .#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); } .#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); } .#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); }
@@ -71,11 +73,8 @@
.#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); } .#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); }
.#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); } .#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); }
.#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); } .#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); }
.#{variables.$fa-css-prefix}-video-in:before { content: functions.fa-content(variables.$fa-var-film); }
.#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); } .#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); }
.#{variables.$fa-css-prefix}-image-in:before { content: functions.fa-content(variables.$fa-var-image); }
.#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); } .#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); }
.#{variables.$fa-css-prefix}-message-in:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
.#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); } .#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); }
.#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); } .#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
.#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); } .#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); }

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

@@ -127,19 +127,15 @@
.drill-icon { .drill-icon {
transform: translate(-16px, -32px); transform: translate(-16px, -32px);
.fa-message-in {
top: -1px;
}
} }
&:hover { &:hover {
.fa-message { .#{variables.$fa-css-prefix}-stack-2x {
@extend .#{variables.$fa-css-prefix}-drill-message; @extend .#{variables.$fa-css-prefix}-drill-message;
top: 13px; top: 13px;
left: 3px; left: 3px;
} }
.fa-message-in { .#{variables.$fa-css-prefix}-stack-1x {
display: none; display: none;
} }
} }
@@ -236,6 +232,7 @@
.drill-icon { .drill-icon {
.fa-drill-image, .fa-drill-video { .fa-drill-image, .fa-drill-video {
color: color.$media-bg; color: color.$media-bg;
text-shadow: color.$over-img-shadow 3px 3px 3px;
} }
} }

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

@@ -15,7 +15,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
/* Drill & Map icons */ /* Drill icon */
a.drill { a.drill {
position: relative; position: relative;
@@ -31,36 +31,46 @@
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
i { i {
transition: color 0.3s; transition: color 0.3s, text-shadow 0.3s;
} }
} }
} }
.#{variables.$fa-css-prefix}-stack { /* Icon Stack */
.#{variables.$fa-css-prefix}-message {
.icon-stack {
.#{variables.$fa-css-prefix}-stack-2x {
font-size: 32px; font-size: 32px;
text-shadow: color.$over-img-shadow 3px 3px 3px; text-shadow: color.$over-img-shadow 3px 3px 3px;
color: color.$message-flashy;
} }
.#{variables.$fa-css-prefix}-media {
@extend .#{variables.$fa-css-prefix}-message; .#{variables.$fa-css-prefix}-stack-1x {
color: color.$media-flashy; font-size: 13px;
} }
.#{variables.$fa-css-prefix}-message-in {
font-size: 13px; &.message {
color: color.$message; .#{variables.$fa-css-prefix}-stack-2x {
top: 1px; color: color.$message-flashy;
}
} }
.#{variables.$fa-css-prefix}-media-in {
color: color.$media; &.media {
.#{variables.$fa-css-prefix}-stack-2x {
color: color.$media-flashy;
}
} }
.#{variables.$fa-css-prefix}-track-start, .#{variables.$fa-css-prefix}-track-end {
color: color.$track-start; &.track {
font-size: 14px; .#{variables.$fa-css-prefix}-stack-1x {
top: 1px; font-size: 14px;
} top: 1px;
.#{variables.$fa-css-prefix}-track-end { }
color: color.$track-end; .#{variables.$fa-css-prefix}-track-start {
color: color.$track-start;
}
.#{variables.$fa-css-prefix}-track-end {
color: color.$track-end;
}
} }
} }
} }