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

Replace panels movements with translateX

Browse Source
This commit is contained in:
Franzz
2024-02-13 23:33:57 +01:00
parent 8c812f6b0a
commit 6e614042d1
4 changed files with 69 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/styles/_mobile.scss
View File

@@ -1,6 +1,8 @@
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}"; $panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
$panel-width-max: $panel-width;
$panel-actual-width: $panel-width;
.desktop { .desktop {
display: none !important; display: none !important;
@@ -12,40 +14,37 @@
max-width: calc(#{$panel-width}); max-width: calc(#{$panel-width});
} }
.map-container-left {
left: calc((#{$panel-width}) * -1);
}
.map-container-right {
right: calc((#{$panel-width}) * -1);
}
#title { #title {
width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
text-align: center; text-align: center;
} }
&.with-feed, &.with-settings {
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
#submap {
transform: translateX(0);
}
}
&.with-feed { &.with-feed {
.map-container-left { .map-container-left {
left: calc((#{$panel-width}) * -2); transform: translateX(-200vw);
} }
}
&.with-settings {
.map-container-right { .map-container-right {
right: calc((#{$panel-width}) * -2); transform: translateX(calc(#{$button-width} + #{$block-spacing} * 2));
} }
} }
&.with-feed, &.with-settings { &.with-settings {
#submap { .map-container-left {
width: 100%; transform: translateX(0);
left: 0;
} }
#title { .map-container-right {
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing}); transform: translateX(200vw);
} }
} }
} }

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

@@ -118,6 +118,7 @@
p { p {
font-size: 0.9em; font-size: 0.9em;
height: 1em;
margin: 0 0 $elem-spacing 0; margin: 0 0 $elem-spacing 0;
display: inline-block; display: inline-block;
width: 100%; width: 100%;

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

@@ -1,44 +1,45 @@
$panel-width: 30vw; $panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}"; $panel-width-max: "400px + 3 * #{$block-spacing}";
$panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
#projects { #projects {
&.with-feed, &.with-settings {
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
&.with-feed { &.with-feed {
#submap { #submap {
width: calc(100% - min(#{$panel-width}, #{$panel-width-max})); transform: translateX(calc(#{$panel-actual-width} / -2));
} }
.map-container-right { .map-container-right {
right: 0; transform: translateX(calc(100vw - #{$panel-actual-width}));
}
#title {
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
} }
} }
&.with-settings { &.with-settings {
#submap { #submap {
width: calc(100% - min(#{$panel-width}, #{$panel-width-max})); transform: translateX(calc(#{$panel-actual-width} / 2));
left: min(#{$panel-width}, #{$panel-width-max});
} }
.map-container-left { .map-container-left {
left: 0; transform: translateX(0);
}
#title { .map-panel {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2); box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
}
} }
} }
&.with-feed.with-settings { &.with-feed.with-settings {
#submap { #submap {
left: 0; transform: translateX(0);
width: 100%;
} }
#title { #title {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2); max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
} }
} }
@@ -50,6 +51,7 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
user-select: none; user-select: none;
width: #{$panel-width}; width: #{$panel-width};
max-width: calc(#{$panel-width-max}); max-width: calc(#{$panel-width-max});
transition: transform 0.5s;
&.moving { &.moving {
cursor: grabbing; cursor: grabbing;
@@ -91,17 +93,12 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
} }
.map-container-left { //#settings .map-container-left { //#settings
//left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1); transform: translateX(-100%);
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 .map-panel { //#settings-panel
width: calc(100% - #{$block-spacing}); width: calc(100% - #{$block-spacing});
margin: $block-spacing; margin: $block-spacing;
border-radius: $block-radius; border-radius: $block-radius;
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
color: $post-color; color: $post-color;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
display: flex; display: flex;
@@ -111,8 +108,7 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
} }
.map-container-right { //#feed .map-container-right { //#feed
right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1); transform: translateX(100vw);
transition: right 0.5s;
.map-panel { //#feed-panel .map-panel { //#feed-panel
width: 100%; width: 100%;
@@ -190,6 +186,8 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
#title { #title {
left: calc(100% + #{$button-width} + 2 * #{$block-spacing}); left: calc(100% + #{$button-width} + 2 * #{$block-spacing});
max-width: calc(100vw - #{$block-spacing} - (#{$button-width} + 2 * #{$block-spacing}) * 2);
transition: max-width 0.5s;
@include no-text-overflow(); @include no-text-overflow();
span { span {
@@ -197,4 +195,30 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
line-height: $block-spacing; line-height: $block-spacing;
} }
} }
#background {
background: #666;
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: #CCC;
}
}
} }

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

@@ -39,32 +39,6 @@ $legend-color: $post-color;
width: 100%; width: 100%;
height: 100%; height: 100%;
#background {
background: #666;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
#submap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
transition: width 0.5s, left 0.5s;
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(50% - 1.25em/2);
color: #CCC;
}
}
/* Drill & Map icons */ /* Drill & Map icons */
a.drill { a.drill {