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

Sort out panel CSS
All checks were successful
Deploy Spot / deploy (push) Successful in 34s
Details

Browse Source
This commit is contained in:
Franzz
2026-05-26 17:25:21 +02:00
parent c783cbe543
commit badae8a3a0
14 changed files with 747 additions and 856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1050
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
src/components/project.vue
View File

@@ -20,8 +20,8 @@ export default {
data() { data() {
return { return {
panels: { panels: {
feedOpen: false, leftOpen: false,
settingsOpen: false rightOpen: false
}, },
feed: null, feed: null,
settings: null, settings: null,
@@ -537,7 +537,7 @@ export default {
if(!this.isMobile() && this.map) this.updateMapPadding(iAnimDuration); if(!this.isMobile() && this.map) this.updateMapPadding(iAnimDuration);
//Open Close panels //Open Close panels
this.$el.classList.toggle('with-'+sPanel); this.$el.classList.toggle('with-'+sPanel+'-panel');
} }
}, },
setFeed(vPanel) { setFeed(vPanel) {
@@ -552,7 +552,7 @@ export default {
<template> <template>
<div class="projects"> <div class="projects">
<div id="background"></div> <div id="space"></div>
<div id="submap"> <div id="submap">
<div class="loader"> <div class="loader">
<SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" /> <SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
@@ -567,7 +567,7 @@ export default {
v-model:base-map="baseMap" v-model:base-map="baseMap"
:map-initializing="mapInitializing" :map-initializing="mapInitializing"
:hikes="hikes" :hikes="hikes"
@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('settings', bIsOpen, iAnimDuration)" @toggle="(bIsOpen, iAnimDuration) => onPanelToggle('left', bIsOpen, iAnimDuration)"
/> />
<ProjectFeed <ProjectFeed
:ref="setFeed" :ref="setFeed"
@@ -575,7 +575,7 @@ export default {
:mode-histo="modeHisto" :mode-histo="modeHisto"
@request-last-update="settings?.setLastUpdate" @request-last-update="settings?.setLastUpdate"
@new-markers="addNewMarkers" @new-markers="addNewMarkers"
@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('feed', bIsOpen, iAnimDuration)" @toggle="(bIsOpen, iAnimDuration) => onPanelToggle('right', bIsOpen, iAnimDuration)"
/> />
</div> </div>
</template> </template>

6
src/components/projectFeed.vue
View File

@@ -196,8 +196,8 @@ export default {
</script> </script>
<template> <template>
<div id="feed" class="map-container map-container-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd"> <div id="feed" class="panel panel-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar"> <Simplebar id="feed-panel" class="panel-content" ref="feedSimpleBar">
<div id="feed-header"> <div id="feed-header">
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" /> <ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
<ProjectPost v-else :options="{type: 'poster', relative_time: lang.get('post.new_message')}" /> <ProjectPost v-else :options="{type: 'poster', relative_time: lang.get('post.new_message')}" />
@@ -209,7 +209,7 @@ export default {
<ProjectPost :options="{type: 'loading', headerless: true}" /> <ProjectPost :options="{type: 'loading', headerless: true}" />
</div> </div>
</Simplebar> </Simplebar>
<div v-if="project" :class="'map-control map-control-icon feed-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle"> <div v-if="project" :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<SpotIcon :icon="isOpen?'next':'post'" /> <SpotIcon :icon="isOpen?'next':'post'" />
</div> </div>
</div> </div>

10
src/components/projectSettings.vue
View File

@@ -74,8 +74,8 @@ export default {
</script> </script>
<template> <template>
<div id="settings" class="map-container map-container-left"> <div id="settings" class="panel panel-left">
<div id="settings-panel" class="map-panel"> <div id="settings-panel" class="panel-content">
<div class="settings-header settings-box"> <div class="settings-header settings-box">
<a class="logo" href="#project"><img src="images/logo_title.svg" :alt="consts.title" /></a> <a class="logo" href="#project"><img src="images/logo_title.svg" :alt="consts.title" /></a>
<div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0"> <div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0">
@@ -129,16 +129,16 @@ export default {
<span>&nbsp;{{ lang.get('credits.license') }}</span> <span>&nbsp;{{ lang.get('credits.license') }}</span>
</div> </div>
</div> </div>
<div :class="'map-control map-control-icon settings-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle"> <div :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<SpotIcon :icon="isOpen?'prev':'menu'" /> <SpotIcon :icon="isOpen?'prev':'menu'" />
</div> </div>
<div v-if="project?.id && !isMobile()" id="legend" class="map-control settings-control map-control-bottom"> <div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
<div v-for="(color, hikeType) in hikes.colors" class="track"> <div v-for="(color, hikeType) in hikes.colors" class="track">
<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span> <span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
<span class="desc">{{ lang.get('track.'+hikeType) }}</span> <span class="desc">{{ lang.get('track.'+hikeType) }}</span>
</div> </div>
</div> </div>
<div v-if="project?.id" id="title" :class="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')"> <div v-if="project?.id" id="title" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
<span>{{ project.name }}</span> <span>{{ project.name }}</span>
</div> </div>
</div> </div>

86
src/styles/_common.scss
View File

@@ -1,21 +1,22 @@
@use "@styles/var";
@use "@styles/color"; @use "@styles/color";
/* Animations */ /* Animations */
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@-moz-keyframes fadeIn { @-moz-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@-ms-keyframes fadeIn { @-ms-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@-o-keyframes fadeIn { @-o-keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0.3; } from { opacity: 0.3; }
} }
@mixin animate($anim) { @mixin animate($anim) {
@@ -27,20 +28,7 @@
} }
.flicker { .flicker {
@include animate(fadeIn 0.5s infinite alternate); @include animate(fadeIn 0.5s infinite alternate);
}
@mixin rounded($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin drop-shadow($opacity) {
filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
} }
@mixin no-text-overflow() { @mixin no-text-overflow() {
@@ -49,27 +37,36 @@
white-space: nowrap; white-space: nowrap;
} }
@keyframes spotlogo { @keyframes spin {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
1.25% { 1.25% {
transform: scale(1.2); transform: scale(1.2);
} }
2.5% { 2.5% {
transform: scale(1); transform: scale(1);
transform:rotate(0deg); transform:rotate(0deg);
} }
5% { 5% {
transform:rotate(360deg); transform:rotate(360deg);
} }
100% { 100% {
transform:rotate(360deg); transform:rotate(360deg);
} }
} }
/* Common objects */ /* Common objects */
@mixin font() {
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
sans-serif;
}
*:focus { *:focus {
outline: 0px none transparent; outline: 0px none transparent;
} }
@@ -87,13 +84,8 @@ textarea:focus, input:focus {
} }
body, textarea, input, button, a.button { body, textarea, input, button, a.button {
@include font();
font-size: 14px; font-size: 14px;
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
sans-serif;
margin: 0; margin: 0;
} }
@@ -120,27 +112,27 @@ button, a.button {
input, textarea, button, a.button { input, textarea, button, a.button {
border: none; border: none;
padding: 0.5em 1em; padding: var.$elem-spacing var.$block-spacing;
border-radius: 3px; border-radius: var.$block-radius;
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
margin: 1em 0 0.5em; margin: var.$block-spacing 0 0 var.$elem-spacing;
} }
h2 { h2 {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
margin: 1em 0 0.5em; margin: var.$block-spacing 0 0 var.$elem-spacing;
} }
/* Feedback */ /* Feedback */
.feedback { .feedback {
p { p {
margin: 0 0 1em 0; margin: 0 0 var.$block-spacing 0;
&.error { &.error {
color: color.$error; color: color.$error;
} }

110
src/styles/_fonts.scss
View File

@@ -1,110 +0,0 @@
/* Google Fonts - Ubuntu v20 - https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext&display=swap */
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

2
src/styles/_lightbox.scss
View File

@@ -154,7 +154,7 @@ body.lb-disable-scrolling {
cursor: pointer; cursor: pointer;
color: color.$over-img; color: color.$over-img;
text-decoration: none; text-decoration: none;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow); filter: drop-shadow(var.$elem-shadow);
width: 150px; width: 150px;
height: 150px; height: 150px;
position: absolute; position: absolute;

16
src/styles/_mobile.scss
View File

@@ -11,7 +11,7 @@
} }
.projects { .projects {
.map-container { .panel {
width: calc(#{$panel-width}); width: calc(#{$panel-width});
max-width: calc(#{$panel-width}); max-width: calc(#{$panel-width});
} }
@@ -22,7 +22,7 @@
transition: none; transition: none;
} }
&.with-feed, &.with-settings { &.with-right-panel, &.with-left-panel {
#title { #title {
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2); max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
} }
@@ -32,22 +32,22 @@
} }
} }
&.with-feed { &.with-right-panel {
.map-container-left { .panel-left {
transform: translateX(-200vw); transform: translateX(-200vw);
} }
.map-container-right { .panel-right {
transform: translateX(calc(var.$button-width + var.$block-spacing * 2)); transform: translateX(calc(var.$button-width + var.$block-spacing * 2));
} }
} }
&.with-settings { &.with-left-panel {
.map-container-left { .panel-left {
transform: translateX(0); transform: translateX(0);
} }
.map-container-right { .panel-right {
transform: translateX(200vw); transform: translateX(200vw);
} }
} }

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

@@ -1,6 +1,7 @@
@use "@styles/common"; @use "@styles/common";
@use "@styles/var"; @use "@styles/var";
@use "@styles/color"; @use "@styles/color";
@use "@styles/page.project.panel";
$thumbnail-max-size: 60px; $thumbnail-max-size: 60px;
@@ -10,6 +11,7 @@ $thumbnail-max-size: 60px;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
@include common.font();
.maplibregl-marker-covered { .maplibregl-marker-covered {
pointer-events: none; pointer-events: none;
@@ -135,4 +137,17 @@ $thumbnail-max-size: 60px;
} }
} }
} }
.maplibregl-ctrl-bottom-right {
margin: var.$block-spacing;
transition: transform 0.5s;
@extend .panel-control;
.maplibregl-ctrl-scale {
margin: 0;
background-color: transparent;
border-color: color.$default;
color: color.$default;
}
}
} }

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

@@ -48,7 +48,7 @@
color: color.$post; color: color.$post;
border-radius: var.$block-radius; border-radius: var.$block-radius;
width: calc(100% - var.$block-spacing); width: calc(100% - var.$block-spacing);
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow; box-shadow: var.$map-shadow;
a { a {
color: color.$post; color: color.$post;
@@ -252,7 +252,7 @@
.drill-icon { .drill-icon {
.drill-image, .drill-video { .drill-image, .drill-video {
color: color.$media-bg; color: color.$media-bg;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow); filter: drop-shadow(var.$elem-shadow);
} }
} }
} }

210
src/styles/_page.project.panel.scss
View File

@@ -7,13 +7,23 @@ $panel-width-max: "400px + 3 * #{var.$block-spacing}";
$panel-actual-width: min($panel-width, #{$panel-width-max}); $panel-actual-width: min($panel-width, #{$panel-width-max});
.projects { .projects {
&.with-feed, &.with-settings { &.with-left-panel, &.with-right-panel {
#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 - $panel-actual-width - (var.$button-width + var.$block-spacing * 2) * 2);
} }
} }
&.with-feed { &.with-left-panel {
#submap {
transform: translateX(calc($panel-actual-width / 2));
}
.panel.panel-left {
transform: translateX(0);
}
}
&.with-right-panel {
#submap { #submap {
transform: translateX(calc($panel-actual-width / -2)); transform: translateX(calc($panel-actual-width / -2));
} }
@@ -22,22 +32,12 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
transform: translateX(calc($panel-actual-width * -1)); transform: translateX(calc($panel-actual-width * -1));
} }
.map-container-right { .panel.panel-right {
transform: translateX(calc(100vw - $panel-actual-width)); transform: translateX(calc(100vw - $panel-actual-width));
} }
} }
&.with-settings { &.with-right-panel.with-left-panel {
#submap {
transform: translateX(calc($panel-actual-width / 2));
}
.map-container-left {
transform: translateX(0);
}
}
&.with-feed.with-settings {
#submap { #submap {
transform: translateX(0); transform: translateX(0);
} }
@@ -47,7 +47,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
} }
} }
.map-container { //#feed, #settings .panel {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@@ -62,78 +62,85 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
transition: none; transition: none;
} }
.map-panel { //#feed-panel, #settings-panel &.panel-left {
transform: translateX(-100%);
.panel-content {
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$default;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.panel-control {
left: calc(100% + var.$block-spacing);
}
}
&.panel-right {
transform: translateX(100vw);
.panel-content {
width: 100%;
padding-top: var.$block-spacing;
}
.panel-control {
right: calc(100% + var.$block-spacing);
}
}
.panel-content {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
}
input, textarea { input, textarea {
background-color: color.$post-input-bg; background-color: color.$post-input-bg;
color: color.$post; color: color.$post;
outline: none; outline: none;
}
button, a.button {
background-color: color.$default-inv-bg;
color: color.$default-inv;
&:hover, &:hover a, &:hover a:visited {
background-color: color.$default-bg;
color: color.$default;
} }
a, a:visited { button, a.button {
background-color: color.$default-inv-bg; background-color: color.$default-inv-bg;
color: color.$default-inv; color: color.$default-inv;
text-decoration: none;
}
}
}
.map-container-left { //#settings
transform: translateX(-100%);
.map-panel { //#settings-panel
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$default;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}
.map-container-right { //#feed
transform: translateX(100vw);
.map-panel { //#feed-panel &:hover, &:hover a, &:hover a:visited {
width: 100%; background-color: color.$default-bg;
padding-top: var.$block-spacing; color: color.$default;
}
a, a:visited {
background-color: color.$default-inv-bg;
color: color.$default-inv;
text-decoration: none;
}
}
} }
} }
.map-control { .panel-control {
position: absolute; position: absolute;
background-color: color.$default-bg; background-color: color.$default-bg;
padding: var.$elem-spacing; padding: var.$elem-spacing;
border-radius: var.$block-radius; border-radius: var.$block-radius;
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow; box-shadow: var.$map-shadow;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
&.map-control-top { &.panel-control-top {
top: var.$block-spacing; top: var.$block-spacing;
} }
&.map-control-bottom { &.panel-control-bottom {
bottom: var.$block-spacing; bottom: var.$block-spacing;
} }
&.map-control-icon { &.panel-control-icon {
cursor: pointer; cursor: pointer;
.spot-icon { .spot-icon {
@@ -159,83 +166,4 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
} }
} }
} }
.feed-control {
right: calc(100% + var.$block-spacing);
}
.settings-control {
left: calc(100% + var.$block-spacing);
}
#legend {
.track {
white-space: nowrap;
.line {
width: 2em;
display: inline-block;
border-radius: 2px;
vertical-align: middle;
}
.desc {
font-size: 1em;
margin-left: 0.5em;
color: color.$legend;
}
}
}
#title {
left: calc(100% + var.$button-width + 2 * var.$block-spacing);
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
transition: max-width 0.5s;
@include common.no-text-overflow();
span {
font-size: 1.3em;
line-height: calc(var.$block-spacing / 1.3);
vertical-align: center;
}
}
#background {
background: color.$space;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
#map .maplibregl-ctrl-bottom-right {
margin: var.$block-spacing;
transition: transform 0.5s;
@extend .map-control;
.maplibregl-ctrl-scale {
margin: 0;
background-color: transparent;
border-color: color.$default;
color: color.$default;
font-family: "Ubuntu", sans-serif;
}
}
#submap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: transform 0.5s;
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(50% - 1.25em/2);
color: color.$loader;
}
}
} }

37
src/styles/_page.project.panel.settings.scss
View File

@@ -10,7 +10,7 @@
.settings-box { .settings-box {
background: color.$default-bg; background: color.$default-bg;
border-radius: var.$block-radius; border-radius: var.$block-radius;
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow; box-shadow: var.$map-shadow;
} }
.settings-header { .settings-header {
@@ -56,7 +56,7 @@
img { img {
width: 12px; width: 12px;
vertical-align: center; vertical-align: center;
animation: spotlogo 20s infinite; animation: spin 20s infinite;
} }
} }
@@ -74,7 +74,7 @@
justify-content: center; justify-content: center;
font-size: 0.7em; font-size: 0.7em;
color: color.$default-inv; color: color.$default-inv;
text-shadow: 0px 1px 1px color.$over-img-shadow; text-shadow: var.$elem-shadow;
a { a {
color: color.$default-inv; color: color.$default-inv;
@@ -188,4 +188,35 @@
} }
} }
} }
#title {
left: calc(100% + var.$button-width + 2 * var.$block-spacing);
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
transition: max-width 0.5s;
@include common.no-text-overflow();
span {
font-size: 1.3em;
line-height: calc(var.$block-spacing / 1.3);
vertical-align: center;
}
}
#legend {
.track {
white-space: nowrap;
.line {
width: 2em;
display: inline-block;
border-radius: 2px;
vertical-align: middle;
}
.desc {
font-size: 1em;
margin-left: 0.5em;
color: color.$legend;
}
}
}
} }

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

@@ -1,11 +1,12 @@
@use "@styles/var"; @use "@styles/var";
@use "@styles/color"; @use "@styles/color";
@use '@styles/page.project.map' as map;
@use '@styles/page.project.panel' as panel; @use '@styles/page.project.panel' as panel;
@use '@styles/page.project.panel.feed' as feed; @use '@styles/page.project.panel.feed' as feed;
@use '@styles/page.project.panel.settings' as settings; @use '@styles/page.project.panel.settings' as settings;
@use '@styles/page.project.map' as map;
.projects { .projects {
--space: #{color.$space}; --space: #{color.$space};
--horizon: #{color.$horizon}; --horizon: #{color.$horizon};
@@ -20,6 +21,34 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
/* Background colors (below map) */
#space {
background: color.$space;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
#submap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: transform 0.5s;
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(50% - 1.25em/2);
color: color.$loader;
}
}
/* Drill icon */ /* Drill icon */
.drill { .drill {
@@ -36,7 +65,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2.5em; font-size: 2.5em;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow); filter: drop-shadow(var.$elem-shadow);
&.message { &.message {
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
@@ -53,7 +82,7 @@
.spot-icon-stack { .spot-icon-stack {
&:not(.drill-icon) { &:not(.drill-icon) {
font-size: 2.5em; font-size: 2.5em;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow); filter: drop-shadow(var.$elem-shadow);
} }
&.message, &.project { &.message, &.project {

10
src/styles/_var.scss
View File

@@ -1,7 +1,13 @@
//Feed width @use "@styles/color";
//Sizes
$elem-spacing: 0.5rem; $elem-spacing: 0.5rem;
$text-spacing: 0.3em; $text-spacing: 0.3em;
$block-spacing: 1rem; $block-spacing: 1rem;
$block-radius: 3px; $block-radius: 3px;
$block-shadow: 3px; $block-shadow: 3px;
$button-width: 31px; $button-width: 31px;
//Common elements
$map-shadow: 2px 2px $block-shadow 0px color.$over-img-shadow;
$elem-shadow: 0px 1px 1px color.$over-img-shadow;