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

Rebuild panel navigation

Browse Source
This commit is contained in:
Franzz
2024-02-06 21:22:36 +01:00
parent b6fc305111
commit cab899e544
11 changed files with 800 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/styles/_page.project.panel.scss Normal file
View File

@@ -0,0 +1,200 @@
$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}";
#projects {
&.with-feed {
#submap {
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
}
.map-container-right {
right: 0;
}
#title {
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
&.with-settings {
#submap {
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
left: min(#{$panel-width}, #{$panel-width-max});
}
.map-container-left {
left: 0;
}
#title {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
&.with-feed.with-settings {
#submap {
left: 0;
width: 100%;
}
#title {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
.map-container { //#feed, #settings
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
user-select: none;
width: #{$panel-width};
max-width: calc(#{$panel-width-max});
&.moving {
cursor: grabbing;
transition: none;
}
.map-panel { //#feed-panel, #settings-panel
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
input, textarea {
background-color: $post-input-bg;
color: $post-color;
outline: none;
}
button, a.button {
background-color: $post-color;
color: $post-bg;
&:hover, &:hover a, &:hover a:visited {
background-color: $post-input-bg;
color: $post-color;
}
a, a:visited {
background-color: $post-color;
color: $post-bg;
text-decoration: none;
}
&+ button, &+ a.button {
margin-left: $elem-spacing;
}
}
}
.map-container-left { //#settings
//left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
left: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
transition: left 0.5s;
//width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
//max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow
.map-panel { //#settings-panel
width: calc(100% - #{$block-spacing});
margin: $block-spacing;
border-radius: $block-radius;
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
color: $post-color;
background: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}
.map-container-right { //#feed
right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
transition: right 0.5s;
.map-panel { //#feed-panel
width: 100%;
padding-top: $block-spacing;
}
}
.map-control {
position: absolute;
background-color: $post-bg;
padding: $elem-spacing;
border-radius: 3px;
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
font-size: 12px;
line-height: 1.5;
&.map-control-top {
top: $block-spacing;
}
&.map-control-bottom {
bottom: $block-spacing;
}
&.map-control-icon {
cursor: pointer;
.fa {
@extend .fa-fw;
color: $post-color;
}
&:hover .fa {
color: #000000;
}
}
}
.feed-control {
right: calc(100% + $block-spacing);
}
.settings-control {
left: calc(100% + $block-spacing);
}
#legend {
.track {
white-space: nowrap;
.line {
width: 2em;
height: 4px;
display: inline-block;
border-radius: 2px;
vertical-align: middle;
&.main {
background-color: $track-main-color;
}
&.off-track {
background-color: $track-off-track-color;
}
&.hitchhiking {
background-color: $track-hitchhiking-color;
}
}
.desc {
font-size: 1em;
margin-left: 0.5em;
color: $legend-color;
}
}
}
#title {
left: calc(100% + #{$button-width} + 2 * #{$block-spacing});
@include no-text-overflow();
span {
font-size: 1.3em;
line-height: $block-spacing;
}
}
}