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:
@@ -292,21 +292,10 @@ $sidebar-active: #f4fcd0;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-and-admin-content {
|
.side-menu-and-admin-content {
|
||||||
display: flex;
|
@include side-menu-and-content;
|
||||||
}
|
|
||||||
|
|
||||||
.side-menu {
|
|
||||||
flex: 25%;
|
|
||||||
min-width: 250px;
|
|
||||||
|
|
||||||
.admin-sidebar {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-content {
|
.admin-content {
|
||||||
flex: 75%;
|
|
||||||
|
|
||||||
.proposal-form {
|
.proposal-form {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
@@ -325,11 +314,6 @@ $sidebar-active: #f4fcd0;
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-content {
|
|
||||||
overflow: scroll;
|
|
||||||
padding: $line-height !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
|
|||||||
@@ -16,6 +16,10 @@
|
|||||||
// 01. Dashboard global
|
// 01. Dashboard global
|
||||||
// --------------------
|
// --------------------
|
||||||
|
|
||||||
|
.dashboard-menu-and-content {
|
||||||
|
@include side-menu-and-content;
|
||||||
|
}
|
||||||
|
|
||||||
.proposal-title {
|
.proposal-title {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
@@ -288,10 +292,6 @@
|
|||||||
background: #fbfbfb;
|
background: #fbfbfb;
|
||||||
border-right: 1px solid $border;
|
border-right: 1px solid $border;
|
||||||
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
min-height: $line-height * 45;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icon-"] {
|
[class^="icon-"] {
|
||||||
color: $text;
|
color: $text;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
// Table of Contents
|
// Table of Contents
|
||||||
//
|
//
|
||||||
// 01. Logo
|
// 01. Logo
|
||||||
// 02. Orbit bullets
|
// 02. Side menu and content
|
||||||
// 03. Direct uploads
|
// 03. Orbit bullets
|
||||||
|
// 04. Direct uploads
|
||||||
// ------------------
|
// ------------------
|
||||||
|
|
||||||
// 01. Logo
|
// 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 {
|
@mixin orbit-bullets {
|
||||||
@@ -49,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 03. Direct uploads
|
// 04. Direct uploads
|
||||||
// ------------------
|
// ------------------
|
||||||
|
|
||||||
@mixin direct-uploads {
|
@mixin direct-uploads {
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<%= render "layouts/admin_header" %>
|
<%= render "layouts/admin_header" %>
|
||||||
|
|
||||||
<div class="side-menu-and-admin-content no-margin-top">
|
<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 %>
|
<%= side_menu %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
|
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
|
||||||
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
|
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
|
||||||
<div class="show-for-small-only">
|
<div class="show-for-small-only">
|
||||||
<div class="dashboard-sidebar" data-equalizer-watch>
|
<div class="dashboard-sidebar">
|
||||||
<%= render "dashboard/menu" %>
|
<%= render "dashboard/menu" %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -38,22 +38,20 @@
|
|||||||
<div class="off-canvas-content" data-off-canvas-content>
|
<div class="off-canvas-content" data-off-canvas-content>
|
||||||
<%= render "layouts/header", with_subnavigation: false %>
|
<%= render "layouts/header", with_subnavigation: false %>
|
||||||
|
|
||||||
<div class="no-margin-top row expanded collapse" data-equalizer>
|
<div class="dashboard-menu-and-content no-margin-top">
|
||||||
<div class="small-12 medium-3 column" data-equalizer-watch>
|
<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">
|
<div class="show-for-small-only">
|
||||||
<button type="button" class="button hollow expanded" data-toggle="offCanvas">
|
<button type="button" class="button hollow expanded" data-toggle="offCanvas">
|
||||||
<%= t("admin.menu.admin") %>
|
<%= t("admin.menu.admin") %>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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/flash" %>
|
||||||
<%= render "layouts/dashboard/proposal_totals" %>
|
<%= render "layouts/dashboard/proposal_totals" %>
|
||||||
<%= render "layouts/dashboard/proposal_header" %>
|
<%= render "layouts/dashboard/proposal_header" %>
|
||||||
|
|||||||
Reference in New Issue
Block a user