diff --git a/app/assets/javascripts/masthead_height.js b/app/assets/javascripts/masthead_height.js deleted file mode 100644 index b8d4db8a..00000000 --- a/app/assets/javascripts/masthead_height.js +++ /dev/null @@ -1,38 +0,0 @@ -(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 98c16736..296272a8 100644 --- a/app/assets/stylesheets/hyrax/dashboard.scss +++ b/app/assets/stylesheets/hyrax/dashboard.scss @@ -37,33 +37,13 @@ $admin-panel-border-color: #dedede !default; body.dashboard { background-color: $body-background-color; - 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; - } + padding-top: $navbar-height; - .dashboard .main-content { - padding-left: 15px; - padding-right: 15px; + @media only screen and (max-width : 767px) { + padding-top: 0; } } -body.dashboard #content-wrapper::after { - clear: both; - content: ""; - display: table; -} - .dashboard { .count-display { font-size: 1.1em; @@ -90,9 +70,19 @@ body.dashboard #content-wrapper::after { border-top: 2px solid $tab-active-accent-color; } - /* Masthead positioning is managed globally in scholar.scss. */ + /* 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 { 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 1997d1ca..2e9176ad 100644 --- a/app/assets/stylesheets/scholar.scss +++ b/app/assets/stylesheets/scholar.scss @@ -189,12 +189,13 @@ a.visibility-link .label:visited { .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 { @@ -544,32 +545,26 @@ a.media.collection-work-row-link { margin-top: 50px; } -:root { - --masthead-height: 70px; -} - -html, -body { - min-height: 100%; -} - -body { - min-height: 100vh; - display: flex; - flex-direction: column; -} - +/* Fixed masthead styles */ header { - min-height: var(--masthead-height); + min-height: 60px; } #masthead.navbar-fixed-top { + position: fixed; top: 0; left: 0; right: 0; z-index: 1030; } -#content-wrapper { - flex: 1 0 auto; +@media (max-width: 767px) { + /* Let the masthead flow normally on small screens so expanded menus push content down */ + header { + min-height: 0; + } + + #masthead.navbar-fixed-top { + position: static; + } }