Takeover window manager styles, avoid masthead overlap

client/src/components/History/Content/ContentItem.vue

@@ -128,10 +128,11 @@ export default {
         onDisplay() {
             const id = this.item.id;
             useGalaxy((Galaxy) => {
+                const url = `datasets/${id}/display/?preview=True`;
                 if (Galaxy.frame && Galaxy.frame.active) {
                     Galaxy.frame.add({
                         title: this.name,
-                        url: `datasets/${id}/display/?preview=True`,
+                        url: url,
                     });
                 } else {
                     iframeRedirect(url);

client/src/style/scss/base.scss

@@ -24,7 +24,7 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 
 // galaxy sub-components
 @import "reports";
-@import "frame.scss";
+@import "windows.scss";
 @import "upload.scss";
 @import "ui.scss";
 @import "library.scss";

client/src/style/scss/frame.scss

@@ -1,155 +0,0 @@
-$frame-zindex: 1000;
-$frame-default-border: $border-color;
-
-.galaxy-frame {
-    .corner {
-        -moz-border-radius: $border-radius-large;
-        border-radius: $border-radius-large;
-    }
-
-    .toggle {
-        color: $dropdown-link-active-color;
-    }
-
-    .frame-background {
-        z-index: $frame-zindex;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 100%;
-        width: 100%;
-        opacity: 0.5;
-        background: $brand-dark;
-        overflow: auto;
-    }
-
-    .frame-shadow {
-        z-index: $frame-zindex + 1;
-        position: absolute;
-        display: none;
-        top: 0px;
-        left: 0px;
-        opacity: 0.5;
-        background: $brand-dark;
-        border: 1px solid $frame-default-border;
-    }
-
-    /*
-        panel menu button
-    */
-    .frame-menu {
-        z-index: $frame-zindex + 5;
-        position: absolute;
-        cursor: pointer;
-        color: $dropdown-link-active-color;
-        right: 10px;
-    }
-
-    .frame-scroll-up {
-        top: 50px;
-    }
-
-    .frame-scroll-down {
-        bottom: 20px;
-    }
-
-    /*
-        frame components
-    */
-
-    .frame {
-        z-index: $frame-zindex + 2;
-        overflow: hidden;
-        position: absolute;
-        background: $white;
-        border: 1px solid $frame-default-border;
-        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-
-        .f-content {
-            position: absolute;
-            overflow: hidden;
-            background: $white;
-            border: none;
-            top: 24px;
-            bottom: 3px;
-            left: 3px;
-            right: 3px;
-        }
-
-        .f-cover {
-            position: absolute;
-            display: none;
-            top: 0px;
-            left: 0px;
-            height: 100%;
-            width: 100%;
-            opacity: 0;
-            background: $white;
-        }
-
-        .f-iframe {
-            border: none;
-            width: 100%;
-            height: 100%;
-        }
-
-        .f-header {
-            height: 17px;
-            margin: 2px;
-            cursor: pointer;
-            border: 1px solid $black;
-            background: $brand-dark;
-            color: $white;
-            .f-icon-left {
-                cursor: pointer;
-                font-size: 15px;
-                margin-left: 3px;
-                float: left;
-                &[disabled] {
-                    opacity: 0.25;
-                }
-            }
-        }
-
-        .f-title {
-            position: absolute;
-            top: 2px;
-            left: 50px;
-            right: 50px;
-            font-size: 12px;
-            font-family: $font-family-sans-serif;
-            text-align: center;
-        }
-
-        /*
-            frame icons
-        */
-
-        .f-not-allowed {
-            cursor: not-allowed;
-        }
-
-        .f-close {
-            cursor: pointer;
-            position: absolute;
-            font-size: 15px;
-            right: 5px;
-            top: 2px;
-        }
-
-        .f-resize {
-            cursor: pointer;
-            position: absolute;
-            font-size: 15px;
-            right: 0px;
-            bottom: 0px;
-            background: $white;
-            width: 16px;
-            height: 16px;
-            color: $brand-dark;
-            text-align: center;
-            line-height: 16px;
-            border: 0px;
-        }
-    }
-}

client/src/style/scss/windows.scss

@@ -0,0 +1,26 @@
+.winbox {
+    border-radius: $border-radius-base;
+    @extend .m-1;
+    margin-top: 4rem;
+}
+
+.winbox.min {
+    @extend .m-0;
+}
+
+.wb-header {
+    border-radius: $border-radius-base;
+    background: $brand-info;
+}
+
+.wb-icon * {
+    opacity: 0.65;
+}
+
+.wb-icon *:hover {
+    opacity: 1;
+}
+
+.wb-full {
+    display: none !important;
+}