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

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});
.projects {
&.with-feed, &.with-settings {
&.with-left-panel, &.with-right-panel {
#title {
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 {
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));
}
.map-container-right {
.panel.panel-right {
transform: translateX(calc(100vw - $panel-actual-width));
}
}
&.with-settings {
#submap {
transform: translateX(calc($panel-actual-width / 2));
}
.map-container-left {
transform: translateX(0);
}
}
&.with-feed.with-settings {
&.with-right-panel.with-left-panel {
#submap {
transform: translateX(0);
}
@@ -47,7 +47,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
}
}
.map-container { //#feed, #settings
.panel {
position: absolute;
top: 0;
bottom: 0;
@@ -62,78 +62,85 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
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;
top: 0;
bottom: 0;
left: 0;
}
input, textarea {
background-color: color.$post-input-bg;
color: color.$post;
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;
input, textarea {
background-color: color.$post-input-bg;
color: color.$post;
outline: none;
}
a, a:visited {
button, a.button {
background-color: color.$default-inv-bg;
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
width: 100%;
padding-top: var.$block-spacing;
&:hover, &:hover a, &:hover a:visited {
background-color: color.$default-bg;
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;
background-color: color.$default-bg;
padding: var.$elem-spacing;
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;
line-height: 1.5;
&.map-control-top {
&.panel-control-top {
top: var.$block-spacing;
}
&.map-control-bottom {
&.panel-control-bottom {
bottom: var.$block-spacing;
}
&.map-control-icon {
&.panel-control-icon {
cursor: pointer;
.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;
}
}
}