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

Replace button width sass variable with a css one
All checks were successful
Deploy Spot / deploy (push) Successful in 34s
Details

Browse Source
This commit is contained in:
Franzz
2026-06-07 14:09:15 +02:00
parent 76fdc4be43
commit c738fe8d50
5 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/styles/_mobile.scss
View File

@@ -2,8 +2,7 @@
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
$button-width: 51px; $panel-width: "100vw - var(--button-width) - 2 * #{var.$block-spacing}";
$panel-width: "100vw - #{$button-width} - 2 * #{var.$block-spacing}";
$panel-width-max: $panel-width; $panel-width-max: $panel-width;
$panel-actual-width: $panel-width; $panel-actual-width: $panel-width;
@@ -12,6 +11,8 @@
} }
.projects { .projects {
--button-width: 51px;
.panel-control { .panel-control {
font-size: 2em; font-size: 2em;
} }
@@ -22,8 +23,8 @@
} }
#settings #title { #settings #title {
left: calc(100% + $button-width + 2rem); left: calc(100% + var(--button-width) + 2rem);
max-width: calc(100vw - 1rem - ($button-width + 2rem) * 2); max-width: calc(100vw - 1rem - (var(--button-width) + 2rem) * 2);
text-align: center; text-align: center;
width: 100%; width: 100%;
transition: none; transition: none;
@@ -33,9 +34,17 @@
} }
} }
#settings #settings-panel .settings-header {
padding: var.$block-spacing;
img.logo-title {
margin-top: var.$elem-spacing;
}
}
&.with-right-panel, &.with-left-panel { &.with-right-panel, &.with-left-panel {
#title { #title {
max-width: calc(100vw - var.$block-spacing - ($button-width + 2 * var.$block-spacing) * 2); max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
} }
#submap { #submap {
@@ -49,7 +58,7 @@
} }
.panel.panel-right { .panel.panel-right {
transform: translateX(calc($button-width + var.$block-spacing * 2)); transform: translateX(calc(var(--button-width) + var.$block-spacing * 2));
} }
} }

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

@@ -9,7 +9,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
.projects { .projects {
&.with-left-panel, &.with-right-panel { &.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);
} }
} }
@@ -43,7 +43,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
} }
#title { #title {
max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var.$button-width + var.$block-spacing * 2) * 2); max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var(--button-width) + var.$block-spacing * 2) * 2);
} }
} }

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

@@ -11,13 +11,13 @@
} }
.settings-header { .settings-header {
padding: var.$block-spacing; padding: 2 * var.$block-spacing;
border-radius: var.$block-radius var.$block-radius; border-radius: var.$block-radius var.$block-radius;
@include common.topo-bg(radial, circle farthest-side at 50% 50%, color.$default-bg-light, 40%); @include common.topo-bg(radial, circle farthest-side at 50% 50%, color.$default-bg-light, 40%);
img { img {
display: block; display: block;
margin: auto; margin: 0 auto;
object-fit: contain; object-fit: contain;
&.logo-icon { &.logo-icon {
@@ -25,7 +25,7 @@
} }
&.logo-title { &.logo-title {
width: 70%; width: 70%;
margin-top: var.$elem-spacing; margin-top: var.$block-spacing;
} }
} }
@@ -45,6 +45,7 @@
.settings-sections { .settings-sections {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
border-radius: var.$block-radius;
#settings-sections-scrollbox { #settings-sections-scrollbox {
height: 100%; height: 100%;
@@ -165,8 +166,8 @@
} }
#title { #title {
left: calc(100% + var.$button-width + 2 * var.$block-spacing); 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); max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
transition: max-width 0.5s; transition: max-width 0.5s;
@include common.no-text-overflow(); @include common.no-text-overflow();

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

@@ -13,6 +13,7 @@
--track-main: #{color.$main-track}; --track-main: #{color.$main-track};
--track-off-track: #{color.$off-track}; --track-off-track: #{color.$off-track};
--track-hitchhiking: #{color.$hitchhiking}; --track-hitchhiking: #{color.$hitchhiking};
--button-width: 31px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;

1
src/styles/_var.scss
View File

@@ -6,7 +6,6 @@ $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;
//Common elements //Common elements
$map-shadow: 2px 2px $block-shadow 0px color.$over-img-shadow; $map-shadow: 2px 2px $block-shadow 0px color.$over-img-shadow;