remove ':has' css rules, as they are not supported in FF.

js/src/bundle.js

@@ -22,6 +22,7 @@ import {Translation} from './translation.js';
 import {MainMenu} from './mainmenu.js';
 import {Header} from './header.js';
 import {MainArea} from './layout.js';
+import {Logo} from './logo.js';
 
 export * from './batcheditems.js';
 export * from './colormode.js';
@@ -40,6 +41,7 @@ export * from './utils.js';
 export * from './mainmenu.js';
 export * from './header.js';
 export * from './layout.js';
+export * from './logo.js';
 
 $(function() {
     new KeyBinder();
@@ -57,6 +59,7 @@ $(function() {
     ts.ajax.register(Scrollbar.initialize, true);
     ts.ajax.register(LiveSearch.initialize, true);
     ts.ajax.register(MainMenu.initialize, true);
+    ts.ajax.register(Logo.initialize, true);
     ts.ajax.register(Header.initialize, true);
     ts.ajax.register(MainArea.initialize, true);
     ts.ajax.register(Sidebar.initialize, true);

js/src/header.js

@@ -20,6 +20,7 @@ export class Header extends LayoutAware {
         this.header_content = ts.query_elem('#header-content', elem);
         this.navbar_content_wrapper = ts.query_elem('#navbar-content-wrapper', elem);
         this.navbar_content = ts.query_elem('#navbar-content', elem);
+        this.navbar_toggler = ts.query_elem('#navbar-toggler', this.elem);
         this.personal_tools = ts.query_elem('#personaltools', elem);
         this.mainmenu = ts.query_elem('#mainmenu', elem);
         this.mainmenu_elems = $('.nav-link.dropdown-toggle', this.mainmenu);
@@ -30,6 +31,10 @@ export class Header extends LayoutAware {
             $(el).on('hidden.bs.dropdown', this.render_mobile_scrollbar.bind(this));
         });
 
+        this.set_mobile_menu_open = this.set_mobile_menu_open.bind(this);
+        this.set_mobile_menu_closed = this.set_mobile_menu_closed.bind(this);
+        this.bind();
+
         ts.ajax.attach(this, elem);
 
         this.render_mobile_scrollbar = this.render_mobile_scrollbar.bind(this);
@@ -41,6 +46,9 @@ export class Header extends LayoutAware {
             $(el).off('shown.bs.dropdown', this.render_mobile_scrollbar.bind(this));
             $(el).off('hidden.bs.dropdown', this.render_mobile_scrollbar.bind(this));
         });
+        const wrapper = this.navbar_content_wrapper;
+        wrapper.off('show.bs.collapse shown.bs.collapse', this.set_mobile_menu_open);
+        wrapper.off('hide.bs.collapse hidden.bs.collapse', this.set_mobile_menu_closed);
     }
 
     render_mobile_scrollbar() {
@@ -49,6 +57,20 @@ export class Header extends LayoutAware {
         }
     }
 
+    bind() {
+        const wrapper = this.navbar_content_wrapper;
+        wrapper.on('show.bs.collapse shown.bs.collapse', this.set_mobile_menu_open);
+        wrapper.on('hidden.bs.collapse', this.set_mobile_menu_closed);
+    }
+
+    set_mobile_menu_open() {
+        this.elem.addClass('mobile-menu-open');
+    }
+
+    set_mobile_menu_closed() {
+        this.elem.removeClass('mobile-menu-open');
+    }
+
     on_is_compact(val) {
         if (val) {
             this.elem.removeClass('full').removeClass('navbar-expand');

js/src/logo.js

@@ -0,0 +1,26 @@
+import ts from 'treibstoff';
+import {LayoutAware} from './layout.js';
+
+export class Logo extends LayoutAware {
+
+    static initialize(context) {
+        const elem = ts.query_elem('#header-logo', context);
+        if (!elem) {
+            return;
+        }
+        new Logo(elem);
+    }
+
+    constructor(elem) {
+        super(elem);
+    }
+
+    on_sidebar_resize(inst, sidebar) {
+        console.log(sidebar.collapsed)
+        if (sidebar.collapsed) {
+            this.elem.removeClass('text-white');
+        } else {
+            this.elem.addClass('text-white');
+        }
+    }
+}

scss/form.scss

@@ -1,4 +1,4 @@
 // contentform
-#input-contentform-save:has(+ input.btn) {
+#input-contentform-save {
     margin-right: 1rem;
 }

scss/header.scss

@@ -11,91 +11,64 @@
 #header-logo-placeholder {
     visibility: hidden;
 }
-#header-main {
-    height: var(--navbar-height);
 
-    &.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;
-        }
+#main-area {
+    // display: flex;
+    // flex-direction: column;
 
-        #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;
+    &.compact {
+        #header-main.mobile-menu-open {
 
-            ul > li {
-                // XXX
-                display: block!important;
+            #header-logo-placeholder {
+                display: none;
             }
-        }
-    }
 
-    &.compact:has(.show) {
-        // XXX: has is not supported in Firefox!!!!
-        height: 100%;
-    }
-    &.compact:has(.show), &.compact:has(.collapsing) {
-        #header-logo-placeholder {
-            display: none;
-        }
+            #navbar-content-wrapper {
+                max-height: calc(100vh - 50px);
+                position: relative;
+                overflow: hidden;
+                padding: 0 !important;
+                z-index: 3;
 
-        #navbar-content-wrapper {
-            position: relative;
-            overflow: hidden;
-            height: 100%;
-            padding: 0 !important;
-
-            @media screen and (max-width: 768px) {
-                z-index: 1200;
+                @media screen and (max-width: 768px) {
+                    z-index: 1200;
+                }
             }
-        }
-        #header-content {
-            align-items: flex-start;
-        }
-        .navbar-toggler {
-            height: 50px!important; // XXX variable
-        }
-
-        #mainmenu {
-            .scrollable-content {
-                right: 0!important;
+            #header-content {
+                align-items: flex-start;
+            }
+            .navbar-toggler {
+                height: 50px!important; // XXX variable
             }
 
-            .dropdown-menu {
-                border: none;
+            #mainmenu {
+                align-items: baseline;
 
-                > li {
-                    .dropdown-item {
-                        padding: 8px 20px;
-                    }
-                    &:first-child {
+                .scrollbar {
+                    display: none!important;
+                }
+                .scrollable-content {
+                    right: 0!important;
+                }
+
+                .dropdown-menu {
+                    border: none;
+
+                    > li {
                         .dropdown-item {
-                            padding-top: 0;
+                            padding: 8px 20px;
+                        }
+                        &:first-child {
+                            .dropdown-item {
+                                padding-top: 0;
+                            }
                         }
                     }
                 }
             }
         }
+    }
+    &.super-compact {
         #personaltools {
             height: 50px;
             justify-content: space-between;
@@ -106,7 +79,6 @@
             }
         }
     }
-
     &.full {
         #mainmenu {
             .dropdown-menu {
@@ -117,36 +89,75 @@
             height: 100%;
         }
     }
+    #header-main {
+        height: var(--navbar-height);
 
-    #navbar-content-wrapper {
-        min-width: 0;
-        z-index: 1;
+        &.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 {
-            min-width: 0;
+            #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;
+                }
+            }
         }
-    }
-    #mainmenu {
-        > ul {
-            padding-left: 8px;
-            white-space: nowrap;
+
+        #navbar-content-wrapper {
+            min-width: 0;
+            z-index: 1;
+
+            #navbar-content {
+                min-width: 0;
+            }
         }
-        .nav-item.active .nav-link {
-            color: $primary;
+        #mainmenu {
+            > ul {
+                padding-left: 8px;
+                white-space: nowrap;
+            }
+            .nav-item.active .nav-link {
+                color: $primary;
+            }
         }
-    }
 
-    #personaltools {
-        #language-dropdown > div.dropdown-toggle > a {
-            height: 20px;
+        #personaltools {
+            #language-dropdown > div.dropdown-toggle > a {
+                height: 20px;
 
-            img {
-                vertical-align: baseline;
+                img {
+                    vertical-align: baseline;
+                }
+            }
+            #colortoggler #colortoggle-switch {
+                width: 2rem;
+                height: 1rem;
             }
-        }
-        #colortoggler #colortoggle-switch {
-            width: 2rem;
-            height: 1rem;
         }
     }
 }

scss/styles.scss

@@ -12,6 +12,9 @@ html {
 body {
     height: 100%;
 }
+#footer {
+    z-index: 1;
+}
 
 @import 'content.scss';
 @import 'form.scss';