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

Simplify title & panels mecanism

Browse Source
This commit is contained in:
Franzz
2021-10-18 20:54:58 +02:00
parent 74d8d66e23
commit a5f4ba2bb4
6 changed files with 96 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
style/_mask_project.scss
View File

@@ -3,8 +3,9 @@ $elem-spacing: 0.5rem;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$panel-width: 30%;
$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}";
$button-width: 44px;
//Feed colors
$post-input-bg: #ffffff; //#d9deff;
@@ -41,15 +42,18 @@ $legend-color: $post-color;
}
.leaflet-right {
width: $panel-width;
max-width: calc(#{$panel-width-max});
right: min(#{$panel-width}, #{$panel-width-max});
}
#post-button {
#feed-button {
.fa {
@extend .fa-next;
}
}
#title {
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
&.with-settings {
@@ -58,20 +62,23 @@ $legend-color: $post-color;
min-width: calc(100% - #{$panel-width-max});
}
.leaflet-left {
width: $panel-width;
max-width: calc(#{$panel-width-max});
}
#settings {
left: 0;
}
.leaflet-left {
left: min(#{$panel-width}, #{$panel-width-max});
}
#settings-button {
.fa {
@extend .fa-prev;
}
}
#title {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
&.with-feed.with-settings {
@@ -79,6 +86,10 @@ $legend-color: $post-color;
width: calc(100% - #{$panel-width} * 2);
min-width: calc(100% - #{$panel-width-max} * 2);
}
#title {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
#background {
@@ -226,9 +237,12 @@ $legend-color: $post-color;
margin: $block-spacing;
box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
&+ .leaflet-control {
&+ .leaflet-control:not(.leaflet-control-inline) {
margin-top: 0;
}
&+ .leaflet-control.leaflet-control-inline {
margin-left: 0;
}
&.leaflet-control-scale {
padding: 0.5em;
@@ -237,23 +251,19 @@ $legend-color: $post-color;
background: none;
}
}
&.leaflet-control-inline {
clear: none;
}
}
/* Pull right/left controls by $panel-width */
.leaflet-right, .leaflet-left {
transition: width 0.5s, max-width 0.5s, left 0.5s, right 0.5s;
width: 0;
max-width: 0;
}
.leaflet-right .leaflet-control {
left: -100%;
}
.leaflet-left .leaflet-control {
right: -100%;
transition: left 0.5s, right 0.5s;
}
/* Hide default layer control */
.leaflet-top.leaflet-left .leaflet-control-layers {
.leaflet-top.leaflet-left .leaflet-control-layers .leaflet-control-layers-toggle {
display: none;
}
@@ -287,19 +297,20 @@ $legend-color: $post-color;
}
#title {
left: calc(44px + 1rem);
width: auto;
cursor: inherit;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: $button-width;
height: $button-width;
padding: 0 $block-spacing;
margin-bottom: 0;
span#project_name {
font-size: 1.5em;
line-height: 44px;
padding: 0 $block-spacing;
text-shadow: none;
font-size: 1.3em;
}
}
#post-button .fa {
#feed-button .fa {
@extend .fa-post;
}
#settings-button .fa {