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

Fix scrolling + hovering effect on feed posts
All checks were successful
Deploy Spot / deploy (push) Successful in 40s
Details

Browse Source
This commit is contained in:
Franzz
2026-05-20 09:42:03 +02:00
parent 0bb7ae2361
commit f63f5c240e
4 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/projectPost.vue
View File

@@ -55,6 +55,9 @@
drillMainIcon() { drillMainIcon() {
return this.mouseOverDrill?'drill-message':'marker'; return this.mouseOverDrill?'drill-message':'marker';
}, },
drillSubIcon() {
return this.mouseOverDrill?null:'footprint';
},
anchorLink() { anchorLink() {
return '#'+[this.hash.page, this.project.currProject.codename, this.options.type, this.options.id].join(this.consts.hash_sep); return '#'+[this.hash.page, this.project.currProject.codename, this.options.type, this.options.id].join(this.consts.hash_sep);
}, },
@@ -186,12 +189,12 @@
</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">
<div class="drill" @click.prevent="panMapToMarker" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"> <div class="drill" @click.prevent="panMapToMarker" @pointerenter="onMouseEnter" @pointerleave="onMouseLeave">
<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get('weather.'+options.weather_icon)"> <span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get('weather.'+options.weather_icon)">
<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('media.click_zoom')" :src="options.static_img_url" /> <img class="staticmap clickable" :title="lang.get('media.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="drillSubIcon" icon-sub-transform="rotate-270" />
<div class="comment" @click.stop> <div class="comment" @click.stop>
<p v-if="!isMobile()"> <p v-if="!isMobile()">
<spotIcon :icon="'coords'" margin="right" size="lg" /> <spotIcon :icon="'coords'" margin="right" size="lg" />

2
src/components/spotIconStack.vue
View File

@@ -45,7 +45,7 @@ export default {
<span :class="mainClass"> <span :class="mainClass">
<FontAwesomeLayers> <FontAwesomeLayers>
<spotIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" /> <spotIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" />
<spotIcon :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" /> <spotIcon v-if="iconSub" :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" />
</FontAwesomeLayers> </FontAwesomeLayers>
</span> </span>
</template> </template>

3
src/styles/_mobile.scss
View File

@@ -19,11 +19,12 @@
#title { #title {
text-align: center; text-align: center;
width: 100%; width: 100%;
transition: none;
} }
&.with-feed, &.with-settings { &.with-feed, &.with-settings {
#title { #title {
max-width: calc(100vw - var.$block-spacing - #{$panel-actual-width} - (var.$button-width + var.$block-spacing * 2) * 2); max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
} }
#submap { #submap {

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

@@ -154,28 +154,8 @@
} }
} }
.drill { .comment {
background: color.$message-bg-light;
.drill-icon {
.drill-hover-icon {
display: none;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
}
}
&:hover {
.sub {
display: none;
}
.drill-hover-icon {
color: color.$message-flashy;
}
}
.comment {
background: color.$message-bg-light;
}
} }
.weather { .weather {
@@ -261,7 +241,6 @@
} }
.drill-icon { .drill-icon {
.drill-image { .drill-image {
color: transparent; color: transparent;
} }