Unverified Commit 7a2073c7 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub
Browse files

Adapt drawer layout for smaller screens (#734)

parent 04bbd5c8
Pipeline #272557 passed with stages
in 5 minutes and 5 seconds
......@@ -15,7 +15,6 @@
.value {
grid-column: value;
& > span + span {
margin-left: 10px;
}
......@@ -48,7 +47,8 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
column-gap: 30px;
row-gap: 10px;
}
.featureDetail {
......@@ -56,7 +56,6 @@
display: flex;
align-items: center;
flex-wrap: nowrap;
padding-right: 30px;
}
.featureSymbol {
......
......@@ -21,8 +21,6 @@
.value {
grid-column: value;
// width: calc(100vw - 320px - 45px - 46px - 220px); // FIXME: decide whether we want to explicitly set the max-width
& > span + span {
margin-left: 10px;
}
......@@ -70,7 +68,8 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
column-gap: 30px;
row-gap: 10px;
}
.featureDetail {
......@@ -78,7 +77,6 @@
display: flex;
align-items: center;
flex-wrap: nowrap;
padding-right: 30px;
}
.featureSymbol {
......
......@@ -59,16 +59,14 @@ $drawerWindowWidth: 45px;
position: absolute;
top: 0;
left: 0;
width: 100%;
width: calc(100% - 46px);
height: 100%;
display: flex;
z-index: 5;
transition: transform 0.3s ease-in-out;
&Open {
transform: translateX(
calc(100% - #{$sidebarContentWidth} - #{$sidebarToolstripWidth})
);
transform: translateX(calc(100% - #{$sidebarContentWidth}));
}
&DrawerOpen {
......@@ -76,7 +74,7 @@ $drawerWindowWidth: 45px;
}
&Closed {
transform: translateX(calc(100% - #{$sidebarToolstripWidth}));
transform: translateX(100%);
}
}
......@@ -132,9 +130,12 @@ $drawerWindowWidth: 45px;
height: 100%;
flex-grow: 1;
position: relative;
padding: 15px calc(#{$drawerWindowWidth} + 26px) 15px 30px;
padding: 15px 30px;
border-left: solid $medium-light-grey 1px;
background-color: white;
width: calc(
100% - #{$drawerWindowWidth} - #{$sidebarToolstripWidth} - #{$sidebarContentWidth}
);
}
.drawerWindow {
......@@ -148,6 +149,6 @@ $drawerWindowWidth: 45px;
.drawerClose {
position: absolute;
right: calc(#{$drawerWindowWidth} + 10px);
top: 10px;
right: 14px;
top: 15px;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment