From d847ade833294ce087242220670440c8e89b1d73 Mon Sep 17 00:00:00 2001 From: mrzapp Date: Tue, 31 Oct 2017 16:21:38 +0100 Subject: [PATCH] Fixed navbar item click --- public/css/client.css | 29 +++++++++++++++++-- public/js/client.js | 8 +++-- public/js/dashboard.js | 6 ++-- src/Client/Helpers/UIHelper.js | 6 ++-- src/Client/Style/Pages/Environment.scss | 23 +++++++++++++-- src/Client/Style/Views/Editors/Editor.scss | 5 ++++ .../Style/Views/Navigation/NavbarMain.scss | 27 ++++++++++++++++- src/Client/Views/Navigation/NavbarMain.js | 2 ++ 8 files changed, 92 insertions(+), 14 deletions(-) diff --git a/public/css/client.css b/public/css/client.css index 99f130054..8e60ac854 100644 --- 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 index a3b2cdac9..8013b0009 100644 --- 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 index 5bbff9bc8..a8e662986 100644 --- 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 index 467a45651..185fe5fa4 100644 --- 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 index 34402afee..2ea22d369 100644 --- a/src/Client/Style/Pages/Environment.scss +++ b/src/Client/Style/Pages/Environment.scss @@ -11,6 +11,7 @@ } } + // Spaces &__spaces { display: flex; height: 100%; @@ -18,11 +19,18 @@ 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 index 6253eb1d4..85ec18ab6 100644 --- 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 index 1c80cec1c..cab5cc4ce 100644 --- 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 index bc925cf2d..2aff1e963 100644 --- 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); });