Skip to content

Commit

Permalink
other approach independent of viewport width for mainmenu collapsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@lenadax
lenadax committed Aug 6, 2024
1 parent a6c325e commit 544dc69
Show file tree
Hide file tree
Showing 9 changed files with 192 additions and 135 deletions.
3 changes: 3 additions & 0 deletions js/src/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {Sidebar} from './sidebar.js';
import {TableToolbar} from './tabletoolbar.js';
import {Translation} from './translation.js';
import {MainMenu} from './mainmenu.js';
import {Header} from './header.js';

export * from './batcheditems.js';
export * from './colormode.js';
Expand All @@ -38,6 +39,7 @@ export * from './tabletoolbar.js';
export * from './translation.js';
export * from './utils.js';
export * from './mainmenu.js';
export * from './header.js';

$(function() {
new KeyBinder();
Expand All @@ -57,4 +59,5 @@ $(function() {
ts.ajax.register(PersonalTools.initialize, true);
ts.ajax.register(LiveSearch.initialize, true);
ts.ajax.register(MainMenu.initialize, true);
ts.ajax.register(Header.initialize, true);
});
36 changes: 36 additions & 0 deletions js/src/header.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import $ from 'jquery';
import ts from 'treibstoff';
import {global_events} from './globals.js';

export class Header extends ts.Events {

static initialize(context) {
const elem = ts.query_elem('#header-main', context);
if (!elem) {
return;
}
new Header(elem);
}

constructor(elem) {
super();
this.elem = elem;
this.logo_placeholder = ts.query_elem('#header-logo-placeholder', elem);

this.toggle_placeholder = this.toggle_placeholder.bind(this);
global_events.on('on_sidebar_resize', this.toggle_placeholder);
$(window).on('resize', this.toggle_placeholder);

ts.ajax.attach(this, elem);

this.toggle_placeholder();
}

toggle_placeholder() {
if ($(window).width() > this.elem.outerWidth()) {
this.logo_placeholder.hide();
} else {
this.logo_placeholder.show();
}
}
}
21 changes: 21 additions & 0 deletions js/src/mainmenu.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import $ from 'jquery';
import ts from 'treibstoff';
import {global_events} from './globals.js';

export class MainMenu extends ts.Events {

Expand Down Expand Up @@ -46,11 +47,31 @@ export class MainMenu extends ts.Events {
this.scrollbar.on('on_position', this.hide_dropdowns);

ts.ajax.attach(this, elem);

///
this.navbar_toggler = ts.query_elem('.navbar-toggler[data-bs-target="#navbar-content-wrapper"]', $('body'));
this.navbar_content_wrapper = ts.query_elem('#navbar-content-wrapper', $('body'));
this.handle = this.handle.bind(this);
global_events.on('on_sidebar_resize', this.handle);
$(window).on('resize', this.handle);
}

hide_dropdowns() {
this.elems.each((i, el) => {
$(el).dropdown('hide');
});
}

handle() {
const taken = $('#personaltools').outerWidth() + $('#header-logo').outerWidth();
if ($('#header-main').outerWidth() < taken + 500) {
if ($('#header-main').hasClass('navbar-expand')) {
$('#header-main').removeClass('navbar-expand');
}
} else {
if (!$('#header-main').hasClass('navbar-expand')) {
$('#header-main').addClass('navbar-expand');
}
}
}
}
109 changes: 42 additions & 67 deletions scss/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,17 +147,57 @@ body {
/* header */
#header-logo {
z-index: 4;

}
#header-logo, #header-logo-placeholder {
> span {
font-size: 1.5rem!important;
}
}
#header-logo-placeholder {
visibility: hidden;
}
#header-main {
height: 50px;

&.navbar-expand {
#header-content {
flex-direction: row-reverse;
}
#navbar-content-wrapper {
box-shadow: none!important;
background: none;
}
}
&:not(.navbar-expand) {
#header-content {
flex-direction: row;
}

#navbar-content {
flex-direction: column;
}
#livesearch {
order: 0;
width: 100%;
padding-left: 55px !important;
padding-right: 15px !important;
}
#mainmenu {
order: 1;
margin-left: 10px!important;
margin-top: 20px;
margin-bottom: 20px;

ul > li {
// XXX
display: block!important;
}
}
}

#navbar-content-wrapper {
min-width: 0;
z-index: 3000;
z-index: 1;
}
#navbar-content {
min-width: 0;
Expand All @@ -175,71 +215,6 @@ body {
color: $primary;
}
}
@include media-breakpoint-up(sm) {
#personaltools .dropdown-toggle {
&.show {
background-color: $dropdown-border-color;
}
&::after {
margin-right: 10px;
margin-left: 0;
}
}
}

@include media-breakpoint-down(lg) {
#navbar-content {
flex-direction: column;
}
#mainmenu {
order: 2;
}
#livesearch {
order: 1;
width: 100%;
padding-left: 40px !important;
}
}
@include media-breakpoint-down(sm) {
#personaltools {
flex-direction: row-reverse;
}
#personaltools > div {
padding-left: 15px !important;
padding-right: 5px !important;
}
#personaltools-dropdown {
order: 1;
}
#language-dropdown {
order: 2;
}
#colortoggler {
order: 3;
}
}
@include media-breakpoint-up(lg) {
#navbar-content-wrapper {
box-shadow: none !important;
}
#navbar-content-wrapper, #navbar-content, #mainmenu {
height: 100%;
}
#personaltools-dropdown {
order: 3;
}
#language-dropdown {
order: 2;
}
#colortoggler {
order: 1;
}
}
@include media-breakpoint-between(lg, xxl) {
#navbar-content-wrapper {
margin-left: 200px;
}
}
}
#personaltools-dropdown {
.dropdown-item a {
Expand Down
99 changes: 35 additions & 64 deletions src/cone/app/browser/static/cone/cone.app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,16 +183,49 @@ body {
#header-logo {
z-index: 4;
}
#header-logo > span {

#header-logo > span, #header-logo-placeholder > span {
font-size: 1.5rem !important;
}

#header-logo-placeholder {
visibility: hidden;
}

#header-main {
height: 50px;
}
#header-main.navbar-expand #header-content {
flex-direction: row-reverse;
}
#header-main.navbar-expand #navbar-content-wrapper {
box-shadow: none !important;
background: none;
}
#header-main:not(.navbar-expand) #header-content {
flex-direction: row;
}
#header-main:not(.navbar-expand) #navbar-content {
flex-direction: column;
}
#header-main:not(.navbar-expand) #livesearch {
order: 0;
width: 100%;
padding-left: 55px !important;
padding-right: 15px !important;
}
#header-main:not(.navbar-expand) #mainmenu {
order: 1;
margin-left: 10px !important;
margin-top: 20px;
margin-bottom: 20px;
}
#header-main:not(.navbar-expand) #mainmenu ul > li {
display: block !important;
}
#header-main #navbar-content-wrapper {
min-width: 0;
z-index: 3000;
z-index: 1;
}
#header-main #navbar-content {
min-width: 0;
Expand All @@ -208,68 +241,6 @@ body {
#header-main #mainmenu .nav-item.active .nav-link {
color: #4e7bba;
}
@media (min-width: 576px) {
#header-main #personaltools .dropdown-toggle.show {
background-color: var(--bs-border-color-translucent);
}
#header-main #personaltools .dropdown-toggle::after {
margin-right: 10px;
margin-left: 0;
}
}
@media (max-width: 991.98px) {
#header-main #navbar-content {
flex-direction: column;
}
#header-main #mainmenu {
order: 2;
}
#header-main #livesearch {
order: 1;
width: 100%;
padding-left: 40px !important;
}
}
@media (max-width: 575.98px) {
#header-main #personaltools {
flex-direction: row-reverse;
}
#header-main #personaltools > div {
padding-left: 15px !important;
padding-right: 5px !important;
}
#header-main #personaltools-dropdown {
order: 1;
}
#header-main #language-dropdown {
order: 2;
}
#header-main #colortoggler {
order: 3;
}
}
@media (min-width: 992px) {
#header-main #navbar-content-wrapper {
box-shadow: none !important;
}
#header-main #navbar-content-wrapper, #header-main #navbar-content, #header-main #mainmenu {
height: 100%;
}
#header-main #personaltools-dropdown {
order: 3;
}
#header-main #language-dropdown {
order: 2;
}
#header-main #colortoggler {
order: 1;
}
}
@media (min-width: 992px) and (max-width: 1399.98px) {
#header-main #navbar-content-wrapper {
margin-left: 200px;
}
}

#personaltools-dropdown .dropdown-item a {
text-decoration: none;
Expand Down
Loading

0 comments on commit 544dc69

Please sign in to comment.