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)
this.markers.medias.forEach(msg => {
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);
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>
<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>
</div>
<div v-else-if="options.type == 'media'" class="body-box">

8
src/components/spotIconStack.vue
View File

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

5
src/styles/_fa.scss
View File

@@ -43,6 +43,8 @@
/* Map */
.#{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-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); }
@@ -71,11 +73,8 @@
.#{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}-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-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-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}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
.#{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 {
transform: translate(-16px, -32px);
.fa-message-in {
top: -1px;
}
}
&:hover {
.fa-message {
.#{variables.$fa-css-prefix}-stack-2x {
@extend .#{variables.$fa-css-prefix}-drill-message;
top: 13px;
left: 3px;
}
.fa-message-in {
.#{variables.$fa-css-prefix}-stack-1x {
display: none;
}
}
@@ -236,6 +232,7 @@
.drill-icon {
.fa-drill-image, .fa-drill-video {
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%;
height: 100%;
/* Drill & Map icons */
/* Drill icon */
a.drill {
position: relative;
@@ -31,36 +31,46 @@
transform: translate(-50%,-50%);
i {
transition: color 0.3s;
transition: color 0.3s, text-shadow 0.3s;
}
}
}
.#{variables.$fa-css-prefix}-stack {
.#{variables.$fa-css-prefix}-message {
/* Icon Stack */
.icon-stack {
.#{variables.$fa-css-prefix}-stack-2x {
font-size: 32px;
text-shadow: color.$over-img-shadow 3px 3px 3px;
color: color.$message-flashy;
}
.#{variables.$fa-css-prefix}-media {
@extend .#{variables.$fa-css-prefix}-message;
color: color.$media-flashy;
.#{variables.$fa-css-prefix}-stack-1x {
font-size: 13px;
}
.#{variables.$fa-css-prefix}-message-in {
font-size: 13px;
color: color.$message;
top: 1px;
&.message {
.#{variables.$fa-css-prefix}-stack-2x {
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;
font-size: 14px;
top: 1px;
}
.#{variables.$fa-css-prefix}-track-end {
color: color.$track-end;
&.track {
.#{variables.$fa-css-prefix}-stack-1x {
font-size: 14px;
top: 1px;
}
.#{variables.$fa-css-prefix}-track-start {
color: color.$track-start;
}
.#{variables.$fa-css-prefix}-track-end {
color: color.$track-end;
}
}
}
}