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="background"></div>
<div id="submap"> <div id="submap">
<div class="loader"> <div class="loader">
<SpotIcon :icon="'map'" :classes="'flicker'" fixed-width /> <SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
</div> </div>
</div> </div>
<div id="map"></div> <div id="map"></div>
@@ -603,7 +603,7 @@ export default {
<div class="settings-sections"> <div class="settings-sections">
<Simplebar id="settings-sections-scrollbox"> <Simplebar id="settings-sections-scrollbox">
<div class="settings-section"> <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="settings-section-body">
<div class="radio" v-for="project in projects" :key="'project-'+project.id"> <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]" /> <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> </div>
<div class="settings-section"> <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="settings-section-body">
<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map"> <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" /> <input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMap" />
@@ -626,7 +626,7 @@ export default {
</div> </div>
</div> </div>
<div class="settings-section newsletter"> <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"> <div class="newsletter-form">
<input type="email" name="email" id="email" :placeholder="lang.get('newsletter.email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" /> <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" /> <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') }} {{ lang.get('newsletter.'+(subscribed?'subscribed':'unsubscribed')+'_desc') }}
</div> </div>
<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)"> <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"> <div class="admin-actions">
<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin.config')" /></a> <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> <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> </a>
<div style="display:none"> <div style="display:none">
<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop"> <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>
<span ref="postedon" class="lb-caption-line"> <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" /> <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> </script>
<template> <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> <span v-else :class="classes" :title="title">{{ localTime }}</span>
</template> </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.hideElements([this.image, this.video, this.nav, this.prev, this.next, this.caption, this.closeButton]);
this.resetImageTransform(); this.resetImageTransform();
this.dataContainer.style.width = '200px'; this.dataContainer.style.width = '200px';
this.dataContainer.style.height = '30px'; this.dataContainer.style.height = '35px';
this.outerContainer.classList.add('animating'); this.outerContainer.classList.add('animating');
this.container.classList.remove('moveable', 'moving', 'lb-video-nav'); this.container.classList.remove('moveable', 'moving', 'lb-video-nav');

13
src/styles/_lightbox.scss
View File

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

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

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

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

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

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

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

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

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

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

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