Fix page body not being scrollable in admin layout (#11893)

Hide navigation behind hamburger icon on small screens in admin layout
This commit is contained in:
Eugen Rochko 2019-09-20 10:52:14 +02:00 committed by GitHub
parent 37ccafec8f
commit b9a8b38844
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 29 deletions

View file

@ -247,6 +247,16 @@ function main() {
input.readonly = oldReadOnly; input.readonly = oldReadOnly;
}); });
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 => { loadPolyfills().then(main).catch(error => {

View file

@ -5,21 +5,66 @@ $content-width: 840px;
.admin-wrapper { .admin-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 100%; width: 100%;
min-height: 100vh;
.sidebar-wrapper { .sidebar-wrapper {
flex: 1 1 $sidebar-width; min-height: 100vh;
height: 100%; overflow: hidden;
background: $ui-base-color; pointer-events: none;
flex: 1 1 auto;
&__inner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
background: $ui-base-color;
height: 100%;
}
} }
.sidebar { .sidebar {
width: $sidebar-width; width: $sidebar-width;
height: 100%;
padding: 0; 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 { .logo {
display: block; display: block;
@ -52,6 +97,9 @@ $content-width: 840px;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color; transition-property: color, background-color;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
i.fa { i.fa {
margin-right: 5px; margin-right: 5px;
@ -99,12 +147,30 @@ $content-width: 840px;
} }
.content-wrapper { .content-wrapper {
flex: 2 1 $content-width; box-sizing: border-box;
overflow: auto; 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 { .content {
max-width: $content-width;
padding: 20px 15px; padding: 20px 15px;
padding-top: 60px; padding-top: 60px;
padding-left: 25px; padding-left: 25px;
@ -123,6 +189,12 @@ $content-width: 840px;
padding-bottom: 40px; padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
margin-bottom: 40px; margin-bottom: 40px;
@media screen and (max-width: $no-columns-breakpoint) {
border-bottom: 0;
padding-bottom: 0;
font-weight: 700;
}
} }
h3 { h3 {
@ -147,7 +219,7 @@ $content-width: 840px;
font-size: 16px; font-size: 16px;
color: $secondary-text-color; color: $secondary-text-color;
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 500;
} }
.fields-group h6 { .fields-group h6 {
@ -176,7 +248,7 @@ $content-width: 840px;
& > p { & > p {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 21px;
color: $secondary-text-color; color: $secondary-text-color;
margin-bottom: 20px; margin-bottom: 20px;
@ -208,20 +280,42 @@ $content-width: 840px;
@media screen and (max-width: $no-columns-breakpoint) { @media screen and (max-width: $no-columns-breakpoint) {
display: block; display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.sidebar-wrapper, .sidebar-wrapper {
.content-wrapper { min-height: 0;
flex: 0 0 auto;
height: auto;
overflow: initial;
} }
.sidebar { .sidebar {
width: 100%; width: 100%;
padding: 0; padding: 0;
height: auto; 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 { .filter-subset {
flex: 0 0 auto; flex: 0 0 auto;
margin: 0 40px 10px 0; margin: 0 40px 20px 0;
&:last-child { &:last-child {
margin-bottom: 20px; margin-bottom: 30px;
} }
ul { ul {

View file

@ -86,9 +86,6 @@ body {
&.admin { &.admin {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;
padding: 0; padding: 0;
} }

View file

@ -4,11 +4,21 @@
- content_for :content do - content_for :content do
.admin-wrapper .admin-wrapper
.sidebar-wrapper .sidebar-wrapper
.sidebar-wrapper__inner
.sidebar .sidebar
= link_to root_path do = link_to root_path do
= image_pack_tag 'logo.svg', class: 'logo', alt: 'Mastodon' = image_pack_tag 'logo.svg', class: 'logo', alt: 'Mastodon'
.sidebar__toggle
.sidebar__toggle__logo
= link_to root_path do
= svg_logo_full
= link_to '#', class: 'sidebar__toggle__icon' do
= fa_icon 'bars'
= render_navigation = render_navigation
.content-wrapper .content-wrapper
.content .content
%h2= yield :page_title %h2= yield :page_title
@ -17,4 +27,6 @@
= yield = yield
.sidebar-wrapper.sidebar-wrapper--empty
= render template: 'layouts/application' = render template: 'layouts/application'