Fix blank space in admin content

In some situations where JavaScript makes content disappear, the height
of the element calculated by foundation's equalizer isn't recalculated,
leaving blank space at the bottom of the page. I've seen cases where a
blank vertical space of 2000 pixels is on the page.

Using flexbox solves the problem, since CSS takes care of everything.
This commit is contained in:
Javi Martín
2019-10-18 20:38:32 +02:00
parent 309c86bed7
commit f2e32b44b1
4 changed files with 27 additions and 10 deletions

View File

@@ -291,7 +291,29 @@ $sidebar-active: #f4fcd0;
margin-right: rem-calc(12);
}
.side-menu-and-admin-content {
display: flex;
@include breakpoint(small only) {
flex-direction: column;
}
}
.side-menu {
flex: 25%;
min-width: 250px;
> :last-child {
height: 100%;
.admin-sidebar {
height: 100%;
}
}
}
.admin-content {
flex: 75%;
.proposal-form {
padding-top: 0;
@@ -431,10 +453,6 @@ code {
background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%);
border-right: 1px solid $border;
@include breakpoint(medium) {
min-height: rem-calc(1100);
}
ul {
list-style-type: none;
margin-bottom: 0;

View File

@@ -1,4 +1,4 @@
<div class="admin-sidebar" data-equalizer-watch>
<div class="admin-sidebar">
<ul id="admin_menu" data-accordion-menu data-multi-open="false">
<% if feature?(:proposals) %>
<li class="section-title">

View File

@@ -19,9 +19,8 @@
<div class="off-canvas-content" data-off-canvas-content>
<%= render "layouts/admin_header" %>
<div class="no-margin-top row expanded collapse" data-equalizer>
<div class="small-12 medium-3 column" data-equalizer-watch>
<div class="side-menu-and-admin-content no-margin-top">
<div class="side-menu">
<div class="show-for-small-only">
<button type="button" class="button hollow expanded" data-toggle="offCanvas"><%= t("admin.menu.admin") %></button>
</div>
@@ -31,7 +30,7 @@
</div>
</div>
<div class="admin-content small-12 medium-9 column" data-equalizer-watch>
<div class="admin-content">
<%= render "layouts/flash" %>
<%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %>
<%= yield %>

View File

@@ -1,4 +1,4 @@
<div class="admin-sidebar" data-equalizer-watch>
<div class="admin-sidebar">
<ul id="officing_menu">
<% if vote_collection_shift? %>
<li class="<%= "js-vote-collection" %>