diff --git a/app/assets/javascripts/masthead_height.js b/app/assets/javascripts/masthead_height.js new file mode 100644 index 000000000..b8d4db8af --- /dev/null +++ b/app/assets/javascripts/masthead_height.js @@ -0,0 +1,38 @@ +(function() { + function updateMastheadHeight() { + var masthead = document.getElementById('masthead'); + + if (!masthead) { + return; + } + + var height = Math.ceil(masthead.getBoundingClientRect().height); + + if (height > 0) { + document.documentElement.style.setProperty('--masthead-height', height + 'px'); + } + } + + function scheduleHeightUpdate() { + window.setTimeout(updateMastheadHeight, 0); + } + + function bindEvents() { + var collapse = $('#top-navbar-collapse'); + + if (collapse.length) { + collapse + .off('.mastheadHeight') + .on('shown.bs.collapse.mastheadHeight hidden.bs.collapse.mastheadHeight', scheduleHeightUpdate); + } + + $(window) + .off('resize.mastheadHeight orientationchange.mastheadHeight') + .on('resize.mastheadHeight orientationchange.mastheadHeight', scheduleHeightUpdate); + } + + $(document).on('turbolinks:load', function() { + updateMastheadHeight(); + bindEvents(); + }); +})(); diff --git a/app/assets/stylesheets/hyrax/dashboard.scss b/app/assets/stylesheets/hyrax/dashboard.scss index 296272a8a..98c16736e 100644 --- a/app/assets/stylesheets/hyrax/dashboard.scss +++ b/app/assets/stylesheets/hyrax/dashboard.scss @@ -37,13 +37,33 @@ $admin-panel-border-color: #dedede !default; body.dashboard { background-color: $body-background-color; - padding-top: $navbar-height; + padding-top: 0; +} + +@media only screen and (max-width : 767px) { + /* Hyrax sidebar layout uses absolute positioning; restore normal flow on mobile. */ + .dashboard .sidebar, + .dashboard .main-content { + position: static; + width: 100%; + } + + .dashboard .sidebar { + min-height: 0; + } - @media only screen and (max-width : 767px) { - padding-top: 0; + .dashboard .main-content { + padding-left: 15px; + padding-right: 15px; } } +body.dashboard #content-wrapper::after { + clear: both; + content: ""; + display: table; +} + .dashboard { .count-display { font-size: 1.1em; @@ -70,19 +90,9 @@ body.dashboard { border-top: 2px solid $tab-active-accent-color; } - /* The #masthead selector below could (and ideally, should) be removed if we can - * replace the "navbar-static-top" class with "navbar-fixed-top" for the Admin UI only - */ + /* Masthead positioning is managed globally in scholar.scss. */ #masthead { border: 0; - left: 0; - position: fixed; - right: 0; - top: 0; - - @media only screen and (max-width : 767px) { - position: initial; - } } /* This is needed in Chrome for the admin/admin_sets edit view AND the collection diff --git a/app/assets/stylesheets/scholar.scss b/app/assets/stylesheets/scholar.scss index 1862fe191..5cf0e216f 100644 --- a/app/assets/stylesheets/scholar.scss +++ b/app/assets/stylesheets/scholar.scss @@ -161,13 +161,12 @@ div[class*="_admin_set_id"] { .scholar-footer { padding: 10px; - position: absolute; - bottom: 0; width: 100%; background-color: #222; border-color: #090909; color: #fff; font-size:12px; + margin-top: auto; } .scholar-footer a { @@ -440,3 +439,33 @@ label[for=user_password] { .whats-new h3 { margin-top: 50px; } + +:root { + --masthead-height: 70px; +} + +html, +body { + min-height: 100%; +} + +body { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + min-height: var(--masthead-height); +} + +#masthead.navbar-fixed-top { + top: 0; + left: 0; + right: 0; + z-index: 1030; +} + +#content-wrapper { + flex: 1 0 auto; +} diff --git a/app/views/_masthead.html.erb b/app/views/_masthead.html.erb index 141a3e059..1af7d6fd0 100644 --- a/app/views/_masthead.html.erb +++ b/app/views/_masthead.html.erb @@ -1,5 +1,5 @@
-