Fix double scroll bar in admin content

We were using `overflow: scroll` as a workaround with a problem we had
with the equalizer. But now we never need an extra vertical scroll bar,
and we only need an extra horizontal scroll bar on small screens.

Since the dashboard was using the class `admin-content` as well, we need
to apply to the dashboard the same changes we've done in the admin
section. I've extracted them into a mixin.
This commit is contained in:
Javi Martín
2019-10-19 15:23:02 +02:00
parent 91d4624443
commit 42106e6601
5 changed files with 41 additions and 36 deletions

View File

@@ -292,21 +292,10 @@ $sidebar-active: #f4fcd0;
}
.side-menu-and-admin-content {
display: flex;
}
.side-menu {
flex: 25%;
min-width: 250px;
.admin-sidebar {
height: 100%;
}
@include side-menu-and-content;
}
.admin-content {
flex: 75%;
.proposal-form {
padding-top: 0;
}
@@ -325,11 +314,6 @@ $sidebar-active: #f4fcd0;
display: none;
}
.admin-content {
overflow: scroll;
padding: $line-height !important;
}
@include breakpoint(medium) {
tr {

View File

@@ -16,6 +16,10 @@
// 01. Dashboard global
// --------------------
.dashboard-menu-and-content {
@include side-menu-and-content;
}
.proposal-title {
display: inline-block;
@@ -288,10 +292,6 @@
background: #fbfbfb;
border-right: 1px solid $border;
@include breakpoint(medium) {
min-height: $line-height * 45;
}
[class^="icon-"] {
color: $text;
display: inline-block;

View File

@@ -1,8 +1,9 @@
// Table of Contents
//
// 01. Logo
// 02. Orbit bullets
// 03. Direct uploads
// 02. Side menu and content
// 03. Orbit bullets
// 04. Direct uploads
// ------------------
// 01. Logo
@@ -21,7 +22,29 @@
}
}
// 02. Orbit bullet
// 02. Side menu and content
// -------------------------
@mixin side-menu-and-content {
display: flex;
> :first-child {
flex: 25%;
min-width: 250px;
> :first-child {
height: 100%;
}
}
> :last-child {
flex: 75%;
overflow-x: auto;
padding: $line-height !important;
}
}
// 03. Orbit bullet
// ----------------
@mixin orbit-bullets {
@@ -49,7 +72,7 @@
}
}
// 03. Direct uploads
// 04. Direct uploads
// ------------------
@mixin direct-uploads {

View File

@@ -20,7 +20,7 @@
<%= render "layouts/admin_header" %>
<div class="side-menu-and-admin-content no-margin-top">
<div id="side_menu" class="side-menu hide-for-small-only">
<div id="side_menu" class="hide-for-small-only">
<%= side_menu %>
</div>

View File

@@ -29,7 +29,7 @@
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<div class="show-for-small-only">
<div class="dashboard-sidebar" data-equalizer-watch>
<div class="dashboard-sidebar">
<%= render "dashboard/menu" %>
</div>
</div>
@@ -38,22 +38,20 @@
<div class="off-canvas-content" data-off-canvas-content>
<%= render "layouts/header", with_subnavigation: false %>
<div class="no-margin-top row expanded collapse" data-equalizer>
<div class="small-12 medium-3 column" data-equalizer-watch>
<div class="dashboard-menu-and-content no-margin-top">
<div id="side_menu" class="hide-for-small-only">
<div class="dashboard-sidebar">
<%= render "dashboard/menu" %>
</div>
</div>
<div class="admin-content">
<div class="show-for-small-only">
<button type="button" class="button hollow expanded" data-toggle="offCanvas">
<%= t("admin.menu.admin") %>
</button>
</div>
<div id="side_menu" class="hide-for-small-only">
<div class="dashboard-sidebar" data-equalizer-watch>
<%= render "dashboard/menu" %>
</div>
</div>
</div>
<div class="admin-content small-12 medium-9 column" data-equalizer-watch>
<%= render "layouts/flash" %>
<%= render "layouts/dashboard/proposal_totals" %>
<%= render "layouts/dashboard/proposal_header" %>