Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Use border-box sizing for admin controls 

Fixes floating issues in admin site settings on screen widths between
768 and 880 pixels. This also cleans up spacing on mobile.
This commit is contained in:
Penar Musaraj 2020-09-17 11:45:32 -04:00
parent 931d8725de
commit dbdb5b9a47
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
1 changed files with 7 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -80,7 +80,7 @@ $mobile-breakpoint: 700px;
.nav-stacked { .nav-stacked {
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
margin: 0 10px 0 -10px; margin: 0 15px 0 -10px;
} }
} }
@ -658,7 +658,8 @@ $mobile-breakpoint: 700px;
} }
.admin-nav { .admin-nav {
width: 18.018%; width: 18%;
box-sizing: border-box;
position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
position: absolute; position: absolute;
@ -671,21 +672,14 @@ $mobile-breakpoint: 700px;
} }
.admin-detail { .admin-detail {
width: 76.5765%; background-color: var(--secondary);
@media (max-width: $mobile-breakpoint) {
z-index: z("base");
width: 100%;
}
background-color: var(
--secondary
); // Todo: set this properly - it needs to be >= the menu height
min-height: 875px;
margin-left: 0; margin-left: 0;
border-left: solid 1px var(--primary-low); border-left: solid 1px var(--primary-low);
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
width: 82%;
box-sizing: border-box;
@media (max-width: $mobile-breakpoint) { @media (max-width: $mobile-breakpoint) {
padding: 30px 0; width: 95%;
border: none; border: none;
} }
} }
@ -706,7 +700,6 @@ $mobile-breakpoint: 700px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
@include transform(translateX(0)); @include transform(translateX(0));
margin-left: -10px; margin-left: -10px;
padding-left: 10px;
} }
} }