Merge pull request #41 from conestack/layout_rework

Layout rework

Author: rnixx

CHANGES.rst

@@ -4,6 +4,10 @@ Changes
 2.0a1 (unreleased)
 ------------------
 
+- Remove no longer used ``mainmenu_fluid`` and ``columns_fluid`` properties
+  from ``ILayoutConfig``. Replace with ``limit_content_width`` property.
+  [lenadax]
+
 - Cleanup js widgets to prevent DOM memory leaks.
   [lenadax]
 

docs/source/layout.rst

@@ -58,39 +58,44 @@ one or more model classes with ``cone.app.layout_config`` decorator.
         def __init__(self, model, request):
             super(ExampleNodeLayoutConfig, self).__init__(model, request)
             self.mainmenu = True
-            self.mainmenu_fluid = False
             self.livesearch = True
             self.personaltools = True
-            self.columns_fluid = False
+            self.limit_content_width = False
             self.pathbar = True
             self.sidebar_left = ['navtree']
             self.sidebar_right = ['my_tile']
+            self.sidebar_left_min_width = 250
+            self.sidebar_right_min_width = 250
 
 Provided layout settings:
 
 - **mainmenu**: Flag whether to display mainmenu.
 
-- **mainmenu_fluid**: Flag whether mainmenu is fluid.
-
 - **livesearch**: Flag whether to display livesearch.
 
 - **personaltools**: Flag whether to display personaltools.
 
-- **columns_fluid**: Flag whether columns are fluid.
+- **limit_content_width**: Flag whether content width should be limited on large screens.
 
 - **pathbar**: Flag whether to display pathbar.
 
-- **sidebar_left**: List of tiles by name which should be rendered in sidebar.
+- **sidebar_left**: List of tiles by name which should be rendered in left sidebar.
+
+- **sidebar_left_min_width**: Minimum left sidebar width as integer (in px).
 
-- **sidebar_left_grid_width**: Sidebar grid width as integer, total grid width
-  is 12.
+- **sidebar_right**: List of tiles by name which should be rendered in right sidebar.
 
-- **content_grid_width**: Content grid width as integer, total grid width
-  is 12.
+- **sidebar_right_min_width**: Minimum right sidebar width as integer (in px).
 
 .. note::
 
-    As of version 1.1, ``mainmenu_fluid`` defaults to ``True``.
+    As of version 2.0, ``limit_content_width`` defaults to ``False``.
+
+.. deprecated:: 2.0
+
+    ``mainmenu_fluid`` and ``columns_fluid`` have been removed in ``cone.app 2.0``.
+    The ``columns_fluid`` setting has been replaced with
+    ``limit_content_width``.
 
 .. deprecated:: 1.1
 

js/src/sidebar.js

@@ -97,6 +97,7 @@ export class Sidebar extends ResizeAware(ts.Motion) {
     constructor(elem) {
         super(elem);
         this.elem = elem;
+        this.min_width = elem.data('min-width') || 115;
         elem.css('width', this.sidebar_width + 'px');
 
         this.moving = false;
@@ -234,7 +235,7 @@ export class Sidebar extends ResizeAware(ts.Motion) {
     }
 
     /**
-     * Collapses the sidebar and.
+     * Collapses the sidebar.
      */
     collapse() {
         // Enable scroll to refresh page on mobile devices
@@ -392,10 +393,9 @@ export class SidebarLeft extends Sidebar {
         if ($('#sidebar_right').length > 0) {
             sidebar_w = $('#sidebar_right').outerWidth();
         }
-        const min_w = 115;
         // Allow a minimal content area width of 300px.
         const max_w = $(window).width() - sidebar_w - 300;
-        width = Math.max(min_w, Math.min(width, max_w));
+        width = Math.max(this.min_width, Math.min(width, max_w));
 
         return parseInt(width);
     }
@@ -490,10 +490,9 @@ export class SidebarRight extends Sidebar {
         if ($('#sidebar_left').length > 0) {
             sidebar_w = $('#sidebar_left').outerWidth();
         }
-        const min_w = 115;
         // Allow a minimal content area width of 300px.
         const max_w = $(window).width() - sidebar_w - 300;
-        width = Math.max(min_w, Math.min(width, max_w));
+        width = Math.max(this.min_width, Math.min(width, max_w));
 
         return parseInt(width);
     }

package.json

@@ -12,7 +12,7 @@
     "rollup": "^2.79.2",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.94.2",
+    "sass": "^1.97.2",
     "web-test-runner-qunit": "^2.0.0"
   },
   "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"

scss/colors.scss

@@ -20,7 +20,7 @@ $color-mode-type: data;
 
 /* dark mode */
 @include color-mode(dark) {
-    #content {
+    #content_area {
         color: $light;
         background-color: $dark;
     }
@@ -36,7 +36,6 @@ $color-mode-type: data;
 
     #footer {
         color: $light;
-        background-color: $black;
     }
 
     #contextmenu {
@@ -59,7 +58,7 @@ $color-mode-type: data;
 
 /* light mode */
 @include color-mode(light) {
-    #content {
+    #content_area {
         color: $dark;
         background-color: $gray-100;
     }
@@ -75,7 +74,6 @@ $color-mode-type: data;
 
     #footer {
         color: $dark;
-        background-color: $light;
     }
 
     #contextmenu {

scss/content.scss

@@ -3,11 +3,19 @@
 /* content */
 #content {
     container: main-content / inline-size;
-    height: calc(100% - 40px);
+    height: 100%;
     width: 100%;
     position: relative;
 }
 
+#content_area {
+    height: 100%;
+}
+// pathbar adds 40px height to layout
+#content_area.has-pathbar {
+    height: calc(100% - 40px);
+}
+
 #main-area {
     width: 0!important; /* prevent 'jumping' between 1400 and 1440px */
 }

scss/sidebar.scss

@@ -25,7 +25,7 @@
 
     .lock-state {
         position: relative;
-        top: calc(100% - 4.5rem);
+        top: calc(100% - 2rem);
         width: min-content;
         height: 0; // required, as else it will take up space in flexbox
         z-index: 100;
@@ -111,7 +111,7 @@
 
         .collapse_btn {
             position: absolute;
-            bottom: 0px;
+            top: 100%;
             border-radius: 100%;
             z-index: 1000;
         }
@@ -127,6 +127,14 @@
         #sidebar_collapse .collapse_btn .btn-open {
             display: none;
         }
+        .sidebar-controls {
+            display: none;
+        }
+    }
+    &.responsive-collapsed:not(.expanded) {
+        .sidebar-controls {
+            display: none;
+        }
     }
     &.expanded {
         #sidebar_collapse .collapse_btn .btn-closed {

scss/styles.scss

@@ -40,6 +40,35 @@ select.form-control.referencebrowser[multiple="multiple"] + .referencebrowser_tr
     }
 }
 
+// SCROLLBARS
+
+// WebKit (Chrome, Edge, Safari, Opera)
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--bs-primary);
+    border-radius: 3px;
+}
+
+// Firefox ONLY (prevent scrollbar-width from affecting chromium)
+@supports (-moz-appearance: none) {
+    * {
+        scrollbar-width: auto;
+        scrollbar-color: var(--bs-primary) transparent;
+    }
+}
+
+// FOOTER
+#footer-spacer {
+    flex: 1; // fill available space
+}
+
+
 @import 'content.scss';
 @import 'form.scss';
 @import 'header.scss';

src/cone/app/__init__.py

@@ -68,10 +68,9 @@ class DefaultLayoutConfig(LayoutConfig):
     def __init__(self, model=None, request=None):
         super(DefaultLayoutConfig, self).__init__(model=model, request=request)
         self.mainmenu = True
-        self.mainmenu_fluid = True
         self.livesearch = True
         self.personaltools = True
-        self.columns_fluid = True
+        self.limit_content_width = True
         self.pathbar = True
         self.sidebar_left_mode = 'stacked' # 'toggle' or 'stacked'
         self.sidebar_left = ['navtree']

src/cone/app/browser/static/cone/cone.app.css

@@ -6,7 +6,7 @@
 
 /* sidebar colors */
 /* dark mode */
-[data-bs-theme=dark] #content {
+[data-bs-theme=dark] #content_area {
   color: #f8f9fa;
   background-color: #212529;
 }
@@ -19,7 +19,6 @@
 }
 [data-bs-theme=dark] #footer {
   color: #f8f9fa;
-  background-color: #000;
 }
 [data-bs-theme=dark] #contextmenu {
   color: #f8f9fa;
@@ -36,7 +35,7 @@
 }
 
 /* light mode */
-[data-bs-theme=light] #content {
+[data-bs-theme=light] #content_area {
   color: #212529;
   background-color: #f8f9fa;
 }
@@ -49,7 +48,6 @@
 }
 [data-bs-theme=light] #footer {
   color: #212529;
-  background-color: #f8f9fa;
 }
 [data-bs-theme=light] #contextmenu {
   color: #212529;
@@ -107,14 +105,46 @@ select.form-control.referencebrowser[multiple=multiple] + .referencebrowser_trig
   width: 100%;
 }
 
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bs-primary);
+  border-radius: 3px;
+}
+
+@supports (-moz-appearance: none) {
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: var(--bs-primary) transparent;
+  }
+}
+#footer-spacer {
+  flex: 1;
+}
+
 /* content */
 #content {
   container: main-content/inline-size;
-  height: calc(100% - 40px);
+  height: 100%;
   width: 100%;
   position: relative;
 }
 
+#content_area {
+  height: 100%;
+}
+
+#content_area.has-pathbar {
+  height: calc(100% - 40px);
+}
+
 #main-area {
   width: 0 !important; /* prevent 'jumping' between 1400 and 1440px */
 }
@@ -356,7 +386,7 @@ tr.selectable td {
 
 /* sidebar colors */
 /* dark mode */
-[data-bs-theme=dark] #content {
+[data-bs-theme=dark] #content_area {
   color: #f8f9fa;
   background-color: #212529;
 }
@@ -369,7 +399,6 @@ tr.selectable td {
 }
 [data-bs-theme=dark] #footer {
   color: #f8f9fa;
-  background-color: #000;
 }
 [data-bs-theme=dark] #contextmenu {
   color: #f8f9fa;
@@ -386,7 +415,7 @@ tr.selectable td {
 }
 
 /* light mode */
-[data-bs-theme=light] #content {
+[data-bs-theme=light] #content_area {
   color: #212529;
   background-color: #f8f9fa;
 }
@@ -399,7 +428,6 @@ tr.selectable td {
 }
 [data-bs-theme=light] #footer {
   color: #212529;
-  background-color: #f8f9fa;
 }
 [data-bs-theme=light] #contextmenu {
   color: #212529;
@@ -437,7 +465,7 @@ tr.selectable td {
 }
 #sidebar_left .lock-state, #sidebar_right .lock-state {
   position: relative;
-  top: calc(100% - 4.5rem);
+  top: calc(100% - 2rem);
   width: min-content;
   height: 0;
   z-index: 100;
@@ -508,7 +536,7 @@ tr.selectable td {
 }
 #sidebar_left #sidebar_collapse .collapse_btn, #sidebar_right #sidebar_collapse .collapse_btn {
   position: absolute;
-  bottom: 0px;
+  top: 100%;
   border-radius: 100%;
   z-index: 1000;
 }
@@ -522,6 +550,12 @@ tr.selectable td {
 #sidebar_left.collapsed #sidebar_collapse .collapse_btn .btn-open, #sidebar_right.collapsed #sidebar_collapse .collapse_btn .btn-open {
   display: none;
 }
+#sidebar_left.collapsed .sidebar-controls, #sidebar_right.collapsed .sidebar-controls {
+  display: none;
+}
+#sidebar_left.responsive-collapsed:not(.expanded) .sidebar-controls, #sidebar_right.responsive-collapsed:not(.expanded) .sidebar-controls {
+  display: none;
+}
 #sidebar_left.expanded #sidebar_collapse .collapse_btn .btn-closed, #sidebar_right.expanded #sidebar_collapse .collapse_btn .btn-closed {
   display: none;
 }