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) {
$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
$panel-width-max: $panel-width;
$panel-actual-width: $panel-width;
.desktop {
display: none !important;
@@ -12,40 +14,37 @@
max-width: calc(#{$panel-width});
}
.map-container-left {
left: calc((#{$panel-width}) * -1);
}
.map-container-right {
right: calc((#{$panel-width}) * -1);
}
#title {
width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
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 {
.map-container-left {
left: calc((#{$panel-width}) * -2);
transform: translateX(-200vw);
}
}
&.with-settings {
.map-container-right {
right: calc((#{$panel-width}) * -2);
transform: translateX(calc(#{$button-width} + #{$block-spacing} * 2));
}
}
&.with-feed, &.with-settings {
#submap {
width: 100%;
left: 0;
&.with-settings {
.map-container-left {
transform: translateX(0);
}
#title {
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
.map-container-right {
transform: translateX(200vw);
}
}
}

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

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

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

@@ -1,44 +1,45 @@
$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}";
$panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
#projects {
&.with-feed, &.with-settings {
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
}
}
&.with-feed {
#submap {
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
transform: translateX(calc(#{$panel-actual-width} / -2));
}
.map-container-right {
right: 0;
}
#title {
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
transform: translateX(calc(100vw - #{$panel-actual-width}));
}
}
&.with-settings {
#submap {
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
left: min(#{$panel-width}, #{$panel-width-max});
transform: translateX(calc(#{$panel-actual-width} / 2));
}
.map-container-left {
left: 0;
}
transform: translateX(0);
#title {
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
.map-panel {
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
}
}
}
&.with-feed.with-settings {
#submap {
left: 0;
width: 100%;
transform: translateX(0);
}
#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;
width: #{$panel-width};
max-width: calc(#{$panel-width-max});
transition: transform 0.5s;
&.moving {
cursor: grabbing;
@@ -91,17 +93,12 @@ $panel-width-max: "400px + 3 * #{$block-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
transform: translateX(-100%);
.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;
@@ -111,8 +108,7 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
}
.map-container-right { //#feed
right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
transition: right 0.5s;
transform: translateX(100vw);
.map-panel { //#feed-panel
width: 100%;
@@ -190,6 +186,8 @@ $panel-width-max: "400px + 3 * #{$block-spacing}";
#title {
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();
span {
@@ -197,4 +195,30 @@ $panel-width-max: "400px + 3 * #{$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%;
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 */
a.drill {