mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
Merge pull request #6042 from aignatov-bio/ai-sci-9090-update-top-navigation-breadcrumbs
Make top navigation and breadcrumbs collapsable [SCI-9090]
This commit is contained in:
commit
73aa04d336
|
@ -51,9 +51,6 @@ body.navigator-collapsed {
|
|||
.sci--layout-navigation-top {
|
||||
grid-area: top;
|
||||
height: var(--top-navigation-height);
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 610;
|
||||
}
|
||||
|
@ -69,13 +66,14 @@ body.navigator-collapsed {
|
|||
}
|
||||
|
||||
.sci--layout-navigation-navigator {
|
||||
--navigator-top-margin: 0px;
|
||||
background-color: var(--sn-white);
|
||||
grid-area: navigator;
|
||||
height: calc(100vh - var(--top-navigation-height) - var(--breadcrumbs-navigation-height) - 1rem);
|
||||
height: calc(100vh - var(--navbar-height) - 1rem - var(--navigator-top-margin));
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
|
||||
transition: .4s $timing-function-sharp;
|
||||
top: 1rem;
|
||||
transition: width .4s $timing-function-sharp;
|
||||
width: var(--navigator-navigation-width);
|
||||
z-index: 550;
|
||||
}
|
||||
|
@ -84,9 +82,6 @@ body.navigator-collapsed {
|
|||
background-color: var(--sn-white);
|
||||
grid-area: breadcrumbs;
|
||||
height: var(--breadcrumbs-navigation-height);
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: var(--top-navigation-height);
|
||||
transition: .4s $timing-function-sharp;
|
||||
width: 100%;
|
||||
z-index: 600;
|
||||
|
@ -104,6 +99,8 @@ body.navigator-collapsed {
|
|||
}
|
||||
|
||||
&[data-grey-background="true"] {
|
||||
background-color: var(--sn-super-light-grey);
|
||||
|
||||
.sci--layout-content,
|
||||
.sci--layout-navigation-breadcrumbs,
|
||||
.sci--layout-navigation-navigator {
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
background-color: inherit;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: var(--navbar-height);
|
||||
top: 0;
|
||||
z-index: 250;
|
||||
}
|
||||
|
||||
|
|
|
@ -37,6 +37,24 @@ $(document).on('click', '.btn', function() {
|
|||
$(this).blur();
|
||||
});
|
||||
|
||||
$(document).on('turbolinks:load', () => {
|
||||
$(window).on('scroll', () => {
|
||||
const navbarHeight = 116;
|
||||
let scrollPosition = $(window).scrollTop();
|
||||
if (scrollPosition > navbarHeight) {
|
||||
scrollPosition = navbarHeight;
|
||||
}
|
||||
$('.sci--layout').css(
|
||||
'--navbar-height',
|
||||
`calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height) - ${scrollPosition}px)`
|
||||
);
|
||||
$('.sci--layout-navigation-navigator').css(
|
||||
'--navigator-top-margin',
|
||||
((scrollPosition / navbarHeight) * 16) + 'px'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Needed to support Turbolinks redirect_to responses as unsafe-inline is blocked by the CSP
|
||||
$.ajaxSetup({
|
||||
converters: {
|
||||
|
|
Loading…
Reference in a new issue