From c78b941d19089675dc3ea0dcb4c0659cf3dfbb6c Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 6 Aug 2020 17:42:24 +0100
Subject: [PATCH] Add more space at bottom for mobile
---
.../organisms/LeftBar/style.module.scss | 29 +++++++-------
.../organisms/RightBar/style.module.scss | 39 ++++++++++---------
2 files changed, 37 insertions(+), 31 deletions(-)
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index 8f956f974..1527723bf 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -6,23 +6,22 @@
width: 0;
margin-left: -250px;
height: calc(100vh - 61px);
- padding-bottom: 72px;
- overflow-y: auto;
- overflow-x: hidden;
+ padding-bottom: 56px;
+ overflow-y: auto;
+ overflow-x: hidden;
background: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- z-index: 5000;
+ transition: all 0.5s ease;
+ z-index: 5000;
}
:global(#wrapper.toggledLeft) #leftbarWrapper {
- width: 250px;
+ width: 250px;
}
-
@media (max-width: 992px) {
.leftbarStatus {
margin-top: 30px;
@@ -37,6 +36,10 @@
width: max-content;
text-transform: uppercase;
}
+
+ #leftbarWrapper {
+ padding-bottom: 100px;
+ }
}
@media (min-width: 992px) {
@@ -50,13 +53,13 @@
letter-spacing: 0;
position: relative;
width: max-content;
- }
-
- #leftbarWrapper {
+ }
+
+ #leftbarWrapper {
width: 250px;
- }
-
- :global(#wrapper.toggledLeft) #leftbarWrapper{
+ }
+
+ :global(#wrapper.toggledLeft) #leftbarWrapper {
width: 0;
}
}
diff --git a/frontend/src/components/organisms/RightBar/style.module.scss b/frontend/src/components/organisms/RightBar/style.module.scss
index a1063ebfa..171b7f01b 100644
--- a/frontend/src/components/organisms/RightBar/style.module.scss
+++ b/frontend/src/components/organisms/RightBar/style.module.scss
@@ -4,18 +4,18 @@
position: fixed;
right: 250px;
width: 0;
- margin-right: -250px;
+ margin-right: -250px;
height: calc(100vh - 61px);
- padding-bottom: 72px;
- overflow-y: auto;
- overflow-x: hidden;
+ padding-bottom: 56px;
+ overflow-y: auto;
+ overflow-x: hidden;
background: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- z-index: 5000;
+ transition: all 0.5s ease;
+ z-index: 5000;
}
#rightbarWrapper::-webkit-scrollbar {
@@ -28,16 +28,15 @@
}
:global(#wrapper.toggledRight) #rightbarWrapper {
- width: 250px;
+ width: 250px;
}
-
@media (max-width: 992px) {
.rightbarStatus {
margin-top: 30px;
margin-left: 16px;
margin-right: 16px;
- margin-bottom: 0px;
+ margin-bottom: 0px;
font-size: 16px;
font-weight: 500;
color: #000000;
@@ -46,6 +45,10 @@
width: max-content;
text-transform: uppercase;
}
+
+ #rightbarWrapper {
+ padding-bottom: 100px;
+ }
}
@media (min-width: 992px) {
@@ -54,20 +57,20 @@
margin-left: 32px;
margin-right: 32px;
margin-bottom: 0px;
- font-size: 16px;
- font-weight: 500;
- text-align: right;
+ font-size: 16px;
+ font-weight: 500;
+ text-align: right;
color: #000000;
letter-spacing: 0;
position: relative;
width: max-content;
- }
-
- #rightbarWrapper {
+ }
+
+ #rightbarWrapper {
width: 250px;
- }
-
- :global(#wrapper.toggledRight) #rightbarWrapper{
+ }
+
+ :global(#wrapper.toggledRight) #rightbarWrapper {
width: 0;
}
}
--
GitLab