From 27f922168ad828a990d2e73facc84935158df1a6 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 20 Sep 2019 10:52:14 +0200
Subject: [Glitch] Fix page body not being scrollable in admin layout
Port SCSS changes from b9a8b38844278f26b9d1d1d53256e0781ba3575a to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
app/javascript/flavours/glitch/packs/public.js | 10 ++
app/javascript/flavours/glitch/styles/admin.scss | 138 ++++++++++++++++++----
app/javascript/flavours/glitch/styles/basics.scss | 3 -
3 files changed, 126 insertions(+), 25 deletions(-)
(limited to 'app')
diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index 019de2167..5a15830df 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -114,6 +114,16 @@ function main() {
this.parentElement.parentElement.nextElementSibling.classList.toggle('hidden');
});
});
+
+ delegate(document, '.sidebar__toggle__icon', 'click', () => {
+ const target = document.querySelector('.sidebar ul');
+
+ if (target.style.display === 'block') {
+ target.style.display = 'none';
+ } else {
+ target.style.display = 'block';
+ }
+ });
}
loadPolyfills().then(main).catch(error => {
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index bdd6686f6..1d25d0129 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -5,21 +5,66 @@ $content-width: 840px;
.admin-wrapper {
display: flex;
justify-content: center;
- height: 100%;
+ width: 100%;
+ min-height: 100vh;
.sidebar-wrapper {
- flex: 1 1 $sidebar-width;
- height: 100%;
- background: $ui-base-color;
- display: flex;
- justify-content: flex-end;
+ min-height: 100vh;
+ overflow: hidden;
+ pointer-events: none;
+ flex: 1 1 auto;
+
+ &__inner {
+ display: flex;
+ justify-content: flex-end;
+ background: $ui-base-color;
+ height: 100%;
+ }
}
.sidebar {
width: $sidebar-width;
- height: 100%;
padding: 0;
- overflow-y: auto;
+ pointer-events: auto;
+
+ &__toggle {
+ display: none;
+ background: lighten($ui-base-color, 8%);
+ height: 48px;
+
+ &__logo {
+ flex: 1 1 auto;
+
+ a {
+ display: inline-block;
+ padding: 15px;
+ }
+
+ svg {
+ fill: $primary-text-color;
+ height: 20px;
+ position: relative;
+ bottom: -2px;
+ }
+ }
+
+ &__icon {
+ display: block;
+ color: $darker-text-color;
+ text-decoration: none;
+ flex: 0 0 auto;
+ font-size: 20px;
+ padding: 15px;
+ }
+
+ a {
+ &:hover,
+ &:focus,
+ &:active {
+ background: lighten($ui-base-color, 12%);
+ }
+ }
+ }
.logo {
display: block;
@@ -52,6 +97,9 @@ $content-width: 840px;
transition: all 200ms linear;
transition-property: color, background-color;
border-radius: 4px 0 0 4px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
i.fa {
margin-right: 5px;
@@ -99,12 +147,30 @@ $content-width: 840px;
}
.content-wrapper {
- flex: 2 1 $content-width;
- overflow: auto;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: $content-width;
+ flex: 1 1 auto;
+ }
+
+ @media screen and (max-width: $content-width + $sidebar-width) {
+ .sidebar-wrapper--empty {
+ display: none;
+ }
+
+ .sidebar-wrapper {
+ width: $sidebar-width;
+ flex: 0 0 auto;
+ }
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ .sidebar-wrapper {
+ width: 100%;
+ }
}
.content {
- max-width: $content-width;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
@@ -123,6 +189,12 @@ $content-width: 840px;
padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin-bottom: 40px;
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ border-bottom: 0;
+ padding-bottom: 0;
+ font-weight: 700;
+ }
}
h3 {
@@ -147,7 +219,7 @@ $content-width: 840px;
font-size: 16px;
color: $secondary-text-color;
line-height: 28px;
- font-weight: 400;
+ font-weight: 500;
}
.fields-group h6 {
@@ -176,7 +248,7 @@ $content-width: 840px;
& > p {
font-size: 14px;
- line-height: 18px;
+ line-height: 21px;
color: $secondary-text-color;
margin-bottom: 20px;
@@ -208,20 +280,42 @@ $content-width: 840px;
@media screen and (max-width: $no-columns-breakpoint) {
display: block;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- .sidebar-wrapper,
- .content-wrapper {
- flex: 0 0 auto;
- height: auto;
- overflow: initial;
+ .sidebar-wrapper {
+ min-height: 0;
}
.sidebar {
width: 100%;
padding: 0;
height: auto;
+
+ &__toggle {
+ display: flex;
+ }
+
+ & > ul {
+ display: none;
+ }
+
+ ul a,
+ ul ul a {
+ border-radius: 0;
+ border-bottom: 1px solid lighten($ui-base-color, 4%);
+ transition: none;
+
+ &:hover {
+ transition: none;
+ }
+ }
+
+ ul ul {
+ border-radius: 0;
+ }
+
+ ul .simple-navigation-active-leaf a {
+ border-bottom-color: $ui-highlight-color;
+ }
}
}
}
@@ -270,10 +364,10 @@ body,
.filter-subset {
flex: 0 0 auto;
- margin: 0 40px 10px 0;
+ margin: 0 40px 20px 0;
&:last-child {
- margin-bottom: 20px;
+ margin-bottom: 30px;
}
ul {
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 4de3955a6..64e543b78 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -74,9 +74,6 @@ body {
&.admin {
background: darken($ui-base-color, 4%);
- position: fixed;
- width: 100%;
- height: 100%;
padding: 0;
}
--
cgit