scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-21 07:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6042 from aignatov-bio/ai-sci-9090-update-top-navigation-breadcrumbs

Browse source 
Make top navigation and breadcrumbs collapsable [SCI-9090]
This commit is contained in:
aignatov-bio 2023-08-23 10:48:48 +02:00 committed by GitHub
parent c111d287ef beed1cdb9d
commit 73aa04d336
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/stylesheets/navigation/general.scss
View file

@ -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 {

2
app/assets/stylesheets/shared/content_pane.scss
View file

@ -19,7 +19,7 @@
background-color: inherit;
position: sticky;
position: -webkit-sticky;
top: var(--navbar-height);
top: 0;
z-index: 250;
}

18
app/javascript/packs/application.js
View file

@ -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: {