Merge pull request #81 from JsSucks/fullscreen-modals

Fullscreen modal z-index fix

client/src/styles/partials/bdsettings/button.scss

@@ -32,7 +32,7 @@
         }
     }
 
-    &.active {
+    &.bd-active {
         background: transparent;
         opacity: 1;
         box-shadow: none;

client/src/styles/partials/bdsettings/plugin-settings-modal.scss

@@ -3,13 +3,7 @@
         padding: 0;
     }
 
-    .bd-scroller-wrap .bd-scroller {
-        margin: 0;
-        padding: 0;
-    }
-
     .bd-plugin-settings-body {
-        margin-bottom: 80px;
         padding: 0 15px;
 
         .bd-setting-switch {

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -98,3 +98,16 @@
         }
     }
 }
+
+.bd-settings .bd-sidebar-view.bd-stop .bd-content-region {
+	z-index: 3003;
+}
+
+.bd-backdrop {
+	z-index: 3003;
+}
+
+.bd-sidebar .bd-settings-button {
+    position: absolute;
+	top: 0;
+}

client/src/styles/partials/generic/modals.scss

@@ -1,5 +1,5 @@
 .bd-backdrop {
-    position: absolute;
+    position: fixed;
     right: 0px;
     left: 0px;
     top: 0px;
@@ -31,6 +31,7 @@
     box-sizing: border-box;
     pointer-events: none;
     z-index: 9001;
+    justify-content: center;
 }
 
 .bd-modal .bd-modal-inner {
@@ -46,6 +47,8 @@
     flex-grow: 1;
     border-radius: 4px;
     max-height: 100%;
+    max-width: 500px;
+    width: 500px;
 }
 
 .bd-modal .bd-modal-body {
@@ -106,10 +109,8 @@
 
     .bd-modal-footer {
         .bd-footer-alert {
-            position: absolute;
-            bottom: 80px;
-            left: 70px;
-            right: 70px;
+            margin: 10px;
+            height: 0;
             display: flex;
             background-color: rgba(32, 34, 37, 0.9);
             box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
@@ -126,6 +127,7 @@
             }
 
             &.bd-active {
+                height: auto;
                 opacity: 1;
                 transform: none;
             }

client/src/styles/partials/layouts.scss

@@ -17,3 +17,7 @@
 .bd-flex-spacer {
     flex-grow: 1;
 }
+
+.bd-hide {
+    display: none;
+}

client/src/styles/partials/sidebarview/content.scss

@@ -36,7 +36,9 @@
     > div:not(.active) {
         opacity: 0;
         position: absolute;
-        width: 100%;
+        left: 310px;
+        right: 0;
+        // width: 100%;
         height: 100%;
         pointer-events: none;
     }

client/src/styles/partials/sidebarview/main.scss

@@ -39,9 +39,15 @@
         backface-visibility: hidden;
     }
 
+    &.bd-stop {
+        .bd-content-region {
+            transform: none;
+        }
+    }
+
     &.active {
         .bd-content-region {
-            animation: bd-slidein .6s forwards;
+            animation: bd-slidein .6s;
         }
     }
 }

client/src/ui/components/BdSettings.vue

@@ -10,8 +10,11 @@
 
 <template>
     <div class="bd-settings" :class="{active: active}" @keyup="close">
-        <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
+        <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
             <Sidebar slot="sidebar">
+                <div class="bd-settings-button bd-active">
+                    <div class="bd-settings-button-btn"></div>
+                </div>
                 <div class="bd-settings-x" @click="close">
                     <MiClose size="17"/>
                     <span class="bd-x-text">ESC</span>
@@ -101,11 +104,8 @@
                 this.lastActiveIndex = this.activeIndex;
                 this.activeIndex = id;
 
-                if (this.first) {
-                    this.first = false;
-                }
-
                 setTimeout(() => {
+                    this.first = false;
                     this.animating = false;
                     this.lastActiveIndex = -1;
                 }, 400);

client/src/ui/components/BdSettingsWrapper.vue

@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
-        <div class="bd-settings-button" :class="{active: active}" @click="showSettings">
+        <div class="bd-settings-button" :class="{'bd-hide': active}" @click="showSettings">
             <div class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
         </div>
         <BdSettings :active="active" :close="hideSettings" />