Merge branch 'master' into stable

HashBrownCMS · Oct 31, 2017 · 5829f5c · 5829f5c
2 parents 39ae380 + d847ade
commit 5829f5c
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 14 deletions.
diff --git a/public/css/client.css b/public/css/client.css
@@ -251,6 +251,9 @@ h1, h2, h3, h4, h5, h6 {
   opacity: 1;
   position: relative;
   z-index: 2; }
+  @media (max-width: 767px) {
+    .page--environment__spaces {
+      flex-direction: column; } }
 
 .page--environment__space {
   position: relative; }
@@ -272,7 +275,12 @@ h1, h2, h3, h4, h5, h6 {
     transition: width 0.5s, flex-basis 0.5s; }
     @media (max-width: 991px) {
       .page--environment__space--nav {
-        overflow-x: hidden; } }
+        overflow: hidden;
+        width: 100%;
+        height: 80vh; }
+        .page--environment__space--nav:not(.expanded) {
+          flex-basis: 6rem;
+          height: 6rem; } }
   .page--environment__space--editor {
     flex-grow: 1;
     height: 100%;
@@ -353,6 +361,9 @@ h1, h2, h3, h4, h5, h6 {
   width: 100%;
   position: relative;
   z-index: 100; }
+  @media (max-width: 767px) {
+    .navbar-main {
+      flex-direction: column; } }
   .navbar-main.hide-tabs .navbar-main__tabs {
     display: none; }
   .navbar-main__panes, .navbar-main__tabs {
@@ -368,6 +379,12 @@ h1, h2, h3, h4, h5, h6 {
     background-image: url("/img/bg-secondary.jpg");
     background-attachment: fixed;
     background-position: 0px 0px; }
+    @media (max-width: 767px) {
+      .navbar-main__tabs {
+        display: flex;
+        width: 100%;
+        height: 6rem;
+        overflow-x: auto; } }
     .navbar-main__tabs:after {
       content: '';
       display: block;
@@ -380,7 +397,8 @@ h1, h2, h3, h4, h5, h6 {
   .navbar-main__tab {
     background-color: transparent;
     height: 6rem;
-    width: 100%;
+    width: 6rem;
+    min-width: 6rem;
     color: #ffffff;
     padding: 1.5rem 0 1rem 0;
     margin: 0;
@@ -414,6 +432,10 @@ h1, h2, h3, h4, h5, h6 {
     position: relative;
     z-index: 5;
     border-right: 1px solid #21303b; }
+    @media (max-width: 767px) {
+      .navbar-main__panes {
+        border-right: 0;
+        border-bottom: 1px solid #21303b; } }
   .navbar-main__pane {
     display: none;
     height: 100%; }
@@ -705,6 +727,9 @@ h1, h2, h3, h4, h5, h6 {
     border-bottom: 1px solid #dddddd; }
     .editor__field:last-of-type {
       border-bottom: 0; }
+    @media (max-width: 767px) {
+      .editor__field {
+        display: block; } }
     .editor__field__value.collapsed .editor__field,
     .editor__field__value.sorting .editor__field, .editor__field.collapsed {
       height: 4rem;

diff --git a/public/js/client.js b/public/js/client.js
@@ -10341,6 +10341,8 @@ var NavbarMain = function (_Crisp$View) {
 
 
     NavbarMain.prototype.showTab = function showTab(tabRoute) {
+        $('.page--environment__space--nav').toggleClass('expanded', true);
+
         this.$element.find('.navbar-main__pane').each(function (i) {
             $(this).toggleClass('active', $(this).attr('data-route') == tabRoute);
         });
@@ -33389,10 +33391,10 @@ var UIHelper = function () {
         });
 
         element.addEventListener('click', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
             if (e.which === 3 || e.ctrlKey) {
+                e.preventDefault();
+                e.stopPropagation();
+
                 openContextMenu(e);
             }
         });

diff --git a/public/js/dashboard.js b/public/js/dashboard.js
@@ -28565,10 +28565,10 @@ var UIHelper = function () {
         });
 
         element.addEventListener('click', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
             if (e.which === 3 || e.ctrlKey) {
+                e.preventDefault();
+                e.stopPropagation();
+
                 openContextMenu(e);
             }
         });

diff --git a/src/Client/Helpers/UIHelper.js b/src/Client/Helpers/UIHelper.js
@@ -644,10 +644,10 @@ class UIHelper {
         });
 
         element.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
             if(e.which === 3 || e.ctrlKey) {
+                e.preventDefault();
+                e.stopPropagation();
+
                 openContextMenu(e);
             }
         });

diff --git a/src/Client/Style/Pages/Environment.scss b/src/Client/Style/Pages/Environment.scss
@@ -11,18 +11,26 @@
         }
     }
 
+    // Spaces
     &__spaces {
         display: flex;
         height: 100%;
         transition: opacity 0.5s ease;
         opacity: 1;
         position: relative;
         z-index: 2;
+
+        // Mobile mode
+        @media($xs) {
+            flex-direction: column;
+        }
     }
 
+    // Space
     &__space {
         position: relative;
 
+        // Menu
         &--menu {
             position: absolute;
             right: 0.5rem;
@@ -35,24 +43,35 @@
             z-index: 50;
         }
 
+        // Navigation
         &--nav {
             width: 30rem;
             flex-basis: 30rem;
             flex-shrink: 0;
             height: 100%;
             transition: width 0.5s, flex-basis 0.5s;
-
+
+            // Mobile mode
             @media($sm) {
-                overflow-x: hidden;
+                overflow: hidden;
+                width: 100%;
+                height: 80vh;
+
+                &:not(.expanded) {
+                    flex-basis: 6rem;
+                    height: 6rem;
+                }
             }
         }
 
+        // Editor
         &--editor {
             flex-grow: 1;
             height: 100%;
             display: flex;
             align-items: center;
 
+            // Text presentation
             &__text {
                 width: 100%;
                 max-width: calc(100% - 7rem);

diff --git a/src/Client/Style/Views/Editors/Editor.scss b/src/Client/Style/Views/Editors/Editor.scss
@@ -150,6 +150,11 @@
             border-bottom: 0;
         }
 
+        // Mobile mode
+        @media($xs) {
+            display: block;
+        }
+
         // Collapsed & sorting mode
         .editor__field__value.collapsed &,
         .editor__field__value.sorting &,

diff --git a/src/Client/Style/Views/Navigation/NavbarMain.scss b/src/Client/Style/Views/Navigation/NavbarMain.scss
@@ -17,6 +17,11 @@
     position: relative;
     z-index: 100;
 
+    // Mobile mode
+    @media($xs) {
+        flex-direction: column;
+    }
+
     &.hide-tabs &__tabs {
         display: none;
     }
@@ -37,6 +42,14 @@
 
         @include background('secondary');
 
+        // Mobile mode
+        @media($xs) {
+            display: flex;
+            width: 100%;
+            height: 6rem;
+            overflow-x: auto;
+        }
+
         &:after {
             content: '';
             display: block;
@@ -53,7 +66,8 @@
     &__tab {
         background-color: transparent;
         height: 6rem;
-        width: 100%;
+        width: 6rem;
+        min-width: 6rem;
         color: $secondary-text;
         padding: 1.5rem 0 1rem 0;
         margin: 0;
@@ -62,6 +76,11 @@
         position: relative;
         display: block;
         z-index: 2;
+
+        // Mobile mode
+        @media($xs) {
+
+        }
 
         &[data-route="about"] {
             font-weight: bold;
@@ -98,6 +117,12 @@
         position: relative;
         z-index: 5;
         border-right: 1px solid $secondary;
+
+        // Mobile mode
+        @media($xs) {
+            border-right: 0;
+            border-bottom: 1px solid $secondary;
+        }
     }
 
     // Individual pane

diff --git a/src/Client/Views/Navigation/NavbarMain.js b/src/Client/Views/Navigation/NavbarMain.js
@@ -81,6 +81,8 @@ class NavbarMain extends Crisp.View {
      * @param {String} tabName
      */
     showTab(tabRoute) {
+        $('.page--environment__space--nav').toggleClass('expanded', true);
+
         this.$element.find('.navbar-main__pane').each(function(i) {
             $(this).toggleClass('active', $(this).attr('data-route') == tabRoute);
         });