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

Harmonize CSS

Browse Source
This commit is contained in:
Franzz
2026-05-03 16:45:21 +02:00
parent 36aa480205
commit 86082c513e
10 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/project.vue
View File

@@ -588,7 +588,7 @@ export default {
<div id="background"></div>
<div id="submap">
<div class="loader">
<SpotIcon :icon="'map'" :classes="'flicker'" fixed-width />
<SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
</div>
</div>
<div id="map"></div>
@@ -603,7 +603,7 @@ export default {
<div class="settings-sections">
<Simplebar id="settings-sections-scrollbox">
<div class="settings-section">
<h1><SpotIcon :icon="'project'" fixed-width :text="lang.get('project.hikes')" /></h1>
<h1><SpotIcon :icon="'project'" width="fixed" :text="lang.get('project.hikes')" /></h1>
<div class="settings-section-body">
<div class="radio" v-for="project in projects" :key="'project-'+project.id">
<input type="radio" :id="'project-'+project.id" :value="project.codename" v-model="$parent.hash.items[0]" />
@@ -617,7 +617,7 @@ export default {
</div>
</div>
<div class="settings-section">
<h1><SpotIcon :icon="'map'" fixed-width :text="lang.get('map.title')" /></h1>
<h1><SpotIcon :icon="'map'" width="fixed" :text="lang.get('map.title')" /></h1>
<div class="settings-section-body">
<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
<input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMap" />
@@ -626,7 +626,7 @@ export default {
</div>
</div>
<div class="settings-section newsletter">
<h1><SpotIcon :icon="'newsletter'" fixed-width :text="lang.get('newsletter.title')" /></h1>
<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
<div class="newsletter-form">
<input type="email" name="email" id="email" :placeholder="lang.get('newsletter.email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" />
<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('newsletter.'+nlAction)" :icon="nlAction" @click="manageSubs" />
@@ -639,7 +639,7 @@ export default {
{{ lang.get('newsletter.'+(subscribed?'subscribed':'unsubscribed')+'_desc') }}
</div>
<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
<h1><SpotIcon :icon="'admin'" fixed-width :text="lang.get('admin.title')" /></h1>
<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
<div class="admin-actions">
<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin.config')" /></a>
<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin.upload')" /></a>

2
src/components/projectMediaLink.vue
View File

@@ -57,7 +57,7 @@ export default {
</a>
<div style="display:none">
<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
<spotIcon :icon="'post'" fixed-width size="lg" :text-classes="'comment-text'" :text="options.comment" />
<spotIcon :icon="'post'" width="fixed" size="lg" :text-classes="'comment-text'" :text="options.comment" />
</span>
<span ref="postedon" class="lb-caption-line">
<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_time_local" :siteTime="options.posted_on_formatted_time" :offset="options.posted_on_day_offset" />

2
src/components/projectRelTime.vue
View File

@@ -23,6 +23,6 @@ export default {
</script>
<template>
<spotIcon v-if="icon" :icon="icon" :margin="margin" :title="title" :text="localTime" fixed-width size="lg" />
<spotIcon v-if="icon" :icon="icon" :margin="margin" :title="title" :text="localTime" width="fixed" size="lg" />
<span v-else :class="classes" :title="title">{{ localTime }}</span>
</template>

2
src/scripts/lightbox.js
View File

@@ -299,7 +299,7 @@ class Lightbox {
this.hideElements([this.image, this.video, this.nav, this.prev, this.next, this.caption, this.closeButton]);
this.resetImageTransform();
this.dataContainer.style.width = '200px';
this.dataContainer.style.height = '30px';
this.dataContainer.style.height = '35px';
this.outerContainer.classList.add('animating');
this.container.classList.remove('moveable', 'moving', 'lb-video-nav');

13
src/styles/_lightbox.scss
View File

@@ -1,4 +1,5 @@
@use "common";
@use "var";
@use "color";
body.lb-disable-scrolling {
@@ -34,17 +35,16 @@ body.lb-disable-scrolling {
.lb-dataContainer {
width: 100%;
height: 30px;
.lb-data {
flex-direction: row;
.lb-details {
width: calc(100% - 1.25rem);
flex: 1 1 auto;
.lb-caption {
.lb-caption-line {
padding-right: 1em;
padding-right: var.$block-spacing;
line-height: 1.33333333333em; //icon height
overflow: hidden;
@@ -68,7 +68,6 @@ body.lb-disable-scrolling {
flex-direction: row;
.lb-dataContainer {
width: 200px;
height: 100%;
.lb-data {
@@ -76,7 +75,7 @@ body.lb-disable-scrolling {
.lb-caption-line {
display: block;
margin-top: 1em;
margin-top: var.$block-spacing;
line-height: 1.33333333em;
&.comment {
@@ -85,7 +84,7 @@ body.lb-disable-scrolling {
}
.comment-text {
display: inline-block;
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
width: calc(100% - 1.25em*1.33333333333 - var.$elem-spacing);
vertical-align: top;
}
}
@@ -240,7 +239,7 @@ body.lb-disable-scrolling {
.lb-data {
text-align: left;
padding: 0.5rem 0.5rem 0 0.5rem;
padding: var.$elem-spacing;
display: flex;
color: color.$default-inv;

8
src/styles/_page.admin.scss
View File

@@ -1,3 +1,4 @@
@use "var";
@use "color";
#admin {
@@ -6,16 +7,19 @@
table {
margin-bottom: 1em;
border-collapse: collapse;
border-radius: var.$block-radius;
overflow: hidden;
tr {
th {
background: color.$default-inv-bg;
color: color.$default-inv;
padding: 0.2rem 0.5rem;
padding: var.$text-spacing var.$elem-spacing;
}
td {
background: color.$default-bg-light;
text-align: center;
padding: 0.2rem 0.5rem;
padding: var.$text-spacing var.$elem-spacing;
input {
&[type="number"] {

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

@@ -178,7 +178,7 @@
.spot-icon {
font-size: 1.3em;
vertical-align: middle;
height: 1rem;
height: var.$block-spacing;
background: color.$message;
color: color.$message-bg;
border-radius: var.$block-radius 0 0 var.$block-radius;
@@ -188,7 +188,7 @@
.temperature {
display: inline-block;
line-height: 1rem;
line-height: var.$block-spacing;
vertical-align: middle;
padding: var.$elem-spacing;
background: color.$message-bg;

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

@@ -56,7 +56,7 @@ $thumbnail-max-size: 60px;
.track-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var.$elem-spacing;
gap: var.$elem-spacing var.$block-spacing;
}
.medias-list {

8
src/styles/_page.project.settings.scss
View File

@@ -10,7 +10,7 @@
.logo {
background: color.$default-bg;
padding: 2rem 1rem;
padding: 2rem var.$block-spacing;
border-radius: var.$block-radius var.$block-radius 0 0;
img {
@@ -24,7 +24,7 @@
#last_update {
position: absolute;
margin-top: -2em;
padding: 0 1rem;
padding: 0 var.$block-spacing;
width: calc(100% - 2rem);
p {
@@ -77,11 +77,11 @@
.settings-section {
display: inline-block;
margin: 1.5rem 1rem 0 1rem;
margin: 2rem var.$block-spacing 0 var.$block-spacing;
width: calc(100% - 2 * var.$block-spacing);
&:last-child {
margin-bottom: 1.5rem;
margin-bottom: 2rem;
}
h1 {

11
src/styles/_page.upload.scss
View File

@@ -1,3 +1,4 @@
@use "var";
@use "color";
#upload {
@@ -5,8 +6,8 @@
.section {
border-radius: 3px;
margin-top: 1rem;
padding: 0 1rem 1rem 1rem;
margin-top: var.$block-spacing;
padding: 0 var.$block-spacing var.$block-spacing var.$block-spacing;
border-bottom: 1px solid color.$default-bg;
}
@@ -27,7 +28,7 @@
display: inline-block;
width: calc(70% - 2rem);
min-width: calc(100% - 100px - 2rem);
padding: 1rem;
padding: var.$block-spacing;
vertical-align: top;
box-sizing: border-box;
@@ -39,14 +40,14 @@
}
.save {
margin-top: 1rem;
margin-top: var.$block-spacing;
padding: 0.5em;
}
}
}
.logs {
padding: 1rem;
padding: var.$block-spacing;
p.log {
margin: 0;