Preliminary sidebar handling css

src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts

@@ -108,6 +108,8 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
 
     autoToggled ? (this.autoToggled = true) : (this.autoToggled = false);
 
+    this.$element.toggleClass("open");
+
     // if collapsing, hide contents immediately.
     if (this.isExpanded) {
       this.$top.attr("aria-hidden", "true");
@@ -118,7 +120,19 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
       this.$closed.show();
     }
 
+    // to allow for the css transition to finish
+    // TODO: get this var from config and make sure css uses the same
+    // although make sure it is +50 to allow for lag
+    // and re-introduce the animation check
     if (isReducedAnimation) {
+      this.toggled();
+    } else {
+      setTimeout(() => {
+        this.toggled();
+      }, 300);
+    }
+
+    /* if (isReducedAnimation) {
       // This is reduced motion.
       this.$element.css("width", this.getTargetWidth());
       this.$element.css("left", this.getTargetLeft());
@@ -135,7 +149,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
           this.toggled();
         }
       );
-    }
+    } */
   }
 
   toggled(): void {

src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts

@@ -67,4 +67,14 @@ export class LeftPanel<
       this.$element.width(this.$element.parent().width());
     }
   }
+
+  toggle(autoToggled?: boolean): void {
+    if (this.isExpanded) {
+      this.$element.parent().removeClass("leftPanelOpen");
+    } else {
+      this.$element.parent().addClass("leftPanelOpen");
+    }
+
+    super.toggle(autoToggled);
+  }
 }

src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts

@@ -66,4 +66,14 @@ export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
       ),
     });
   }
+
+  toggle(autoToggled?: boolean): void {
+    if (this.isExpanded) {
+      this.$element.parent().removeClass("rightPanelOpen");
+    } else {
+      this.$element.parent().addClass("rightPanelOpen");
+    }
+
+    super.toggle(autoToggled);
+  }
 }

src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less

@@ -4,7 +4,7 @@
         .hidden();
     }
 
-    .mainPanel {
+    /* .mainPanel {
 
         .leftPanel {
             .hidden();
@@ -13,7 +13,7 @@
         .rightPanel {
             .hidden();
         }
-    }
+    } */
 
     .footerPanel {
         .hidden();

src/content-handlers/iiif/modules/uv-shared-module/css/lg.less

@@ -10,4 +10,33 @@
 
         }
     }
+
+    .lg-mediaquery({
+        .headerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mainPanel {
+            .leftPanel {
+                display: block;
+                visibility: visible;
+            }
+
+            .rightPanel {
+                display: block;
+                visibility: visible;
+            }
+        }
+
+        .footerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mobileFooterPanel {
+            display: none;
+            visibility: hidden;
+        }
+    })
 }

src/content-handlers/iiif/modules/uv-shared-module/css/md.less

@@ -11,4 +11,33 @@
 
     }
 
+    .md-mediaquery({
+        .headerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mainPanel {
+            .leftPanel {
+                display: block;
+                visibility: visible;
+            }
+
+            .rightPanel {
+                display: block;
+                visibility: visible;
+            }
+        }
+
+        .footerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mobileFooterPanel {
+            display: none;
+            visibility: hidden;
+        }
+    })
+
 }

src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less

@@ -26,26 +26,6 @@
     }
 }
 
-.only-desktop() {
-    display: var(--uv-desktop-display, none);
-    visibility: var(--uv-desktop-visibility, hidden);
-}
-
-.only-mobile() {
-    display: var(--uv-mobile-display, block);
-    visibility: var(--uv-mobile-visibility, visible);
-}
-
-:root {
-    .md-mediaquery({
-        --uv-mobile-display: none;
-        --uv-mobile-visibility: hidden;
-
-        --uv-desktop-display: block;
-        --uv-desktop-visibility: visible;
-    });
-}
-
 
 // end media queries
 

src/content-handlers/iiif/modules/uv-shared-module/css/sm.less

@@ -10,4 +10,32 @@
         }
     }
 
+    .sm-mediaquery({
+        .headerPanel {
+            display: none;
+            visibility: hidden;
+        }
+
+        /* .mainPanel {
+            .leftPanel {
+                display: none;
+                visibility: hidden;
+            }
+
+            .rightPanel {
+                display: none;
+                visibility: hidden;
+            }
+        } */
+
+        .footerPanel {
+            display: none;
+            visibility: hidden;
+        }
+
+        .mobileFooterPanel {
+            display: block;
+            visibility: visible;
+        }
+    })
 }

src/content-handlers/iiif/modules/uv-shared-module/css/styles.less

@@ -18,6 +18,15 @@
 @import 'lg';
 @import 'xl';
 
+:root {
+    --uv-animation: 1;
+
+    --uv-grid-left-width-open: 271px;
+    --uv-grid-right-width-open: 271px;
+
+    --uv-grid-left-width: 30px;
+    --uv-grid-right-width: 30px;
+}
 
 .hidden {
     .hidden();
@@ -100,14 +109,62 @@
         background: @body-bg; // important, otherwise you see two spinners
     }
 
-    .leftPanel {
+    .mainPanel {
+
+        // TODO: set these at runtime in html element style attr by getting from config?
+
+
+        background: red;
+        margin: 0;
+        padding: 0;
+
+        overflow: hidden;
+
+        .md-mediaquery({
+            background: maroon;
+            padding: 0.5rem;
+            display: grid;
+            grid-template-columns: 
+                [left] var(--uv-grid-left-width) 
+                [center] minmax(0, 1fr)
+                [right] var(--uv-grid-right-width);
+            grid-template-areas: "left center right";
+
+            transition:all calc(var(--uv-animation) * 250ms) ease-in-out;
+        });
+    }
+
+    .mainPanel.leftPanelOpen {
+        --uv-grid-left-width: var(--uv-grid-left-width-open);
+    }
+
+    .mainPanel.rightPanelOpen {
+        --uv-grid-right-width: var(--uv-grid-right-width-open);
+    }
+
+    .centerPanel {
         position: absolute;
-        background: @panel-dark-bg;
-        border: @panel-border;
+        overflow: hidden;
     }
 
     .centerPanel {
+        width: 100% !important;
+        left: auto !important;
+
+        background: darkcyan;
+
+        .md-mediaquery({
+            background: darkolivegreen;
+
+            z-index: 15;
+            grid-area: center;
+        });
+    }
+
+    .leftPanel {
         position: absolute;
+        background: @panel-dark-bg;
+        border: @panel-border;
     }
 
     .rightPanel {
@@ -116,6 +173,81 @@
         border: @panel-border;
     }
 
+    .leftPanel, .rightPanel {
+        overflow: hidden;
+        z-index: 20;
+        /* display: none; */
+
+        transition:all calc(var(--uv-animation) * 250ms) ease-in-out;
+
+        position: absolute;
+        top: 2em !important;
+        right: 0em !important;
+        bottom: 2em !important;
+        left: 0em !important;
+
+        width: auto !important;
+        height: auto !important;
+
+        .md-mediaquery({
+            display: block !important;
+            position: relative;
+
+            top: 0rem !important;
+            right: 0rem !important;
+            bottom: 0rem !important;
+            left: 0rem !important;
+        });
+
+        &.open {
+            display: block;
+        }
+    }
+
+    .leftPanel {
+        background: pink;
+        transform: translateX(calc(-100% + 30px));
+
+        .md-mediaquery({
+            background: fuchsia;
+            grid-area: left;
+            transform: none;
+        });
+    }
+
+    .leftPanel.open {
+        left: 0 !important;
+        right: 3em !important;
+        transform: none;
+
+        .md-mediaquery({
+            left: initial !important;
+            right: initial !important;
+        });
+    }
+
+    .rightPanel {
+        background: lime;
+        transform: translateX(calc(100% - 30px));
+
+        .md-mediaquery({
+            background: yellowgreen;
+            grid-area: right;
+            transform: none;
+        });
+    }
+
+    .rightPanel.open {
+        right: 0 !important;
+        left: 3em !important;
+        transform: none;
+
+        .md-mediaquery({
+            left: initial !important;
+            right: initial !important;
+        });
+    }
+
     .footerPanel {
         position: relative;
         margin-top: 0;