Task #CR-970 - Navigation (#3190)

* Task #CR-970 - Navigation

* navbar-toggler: added margin-top of 20px

* changed popover message to modal (trying to resume later, when in preview mode)

assets/survey_themes/ls6_surveytheme/core/ls6_core_theme.js

@@ -91,7 +91,7 @@ export var ThemeScripts = function () {
 
     var initTopMenuLanguageChanger = function (selectorItem, selectorGlobalForm) {
         // $(selectorContainer).height($('#main-row').height());
-        $(selectorItem).on('click', function () {
+        $(document).on('click', selectorItem, function () {
             var lang = $(this).data('limesurvey-lang');
             /* The limesurvey form exist in document, move select and button inside and click */
             $(selectorGlobalForm + ' [name=\'lang\']').remove();                        // Remove existing lang selector

assets/survey_themes/ls6_surveytheme/core/template_core_pre.js

@@ -185,7 +185,7 @@ export function activateLanguageChanger(){
         limesurveyForm.submit();
     };
     autoSizeSelect();
-    $('.form-change-lang a.ls-language-link').on('click', function() {
+    $(document).on('click', 'a.ls-language-link', function() {
         var closestForm = $(this).closest('form');
         if (!closestForm.length) {
             /* we are not in a forum, can not submit directly */
@@ -300,7 +300,7 @@ export function activateActionLink(){
     }
     /* Submit limesurvey form on click */
     else{
-        $('[data-limesurvey-submit]').on('click',function(event) {
+        $(document).on('click', '[data-limesurvey-submit]', function(event) {
             event.preventDefault();
             var submit=$(this).data('limesurvey-submit');
             var confirmedby=$(this).data('confirmedby');

assets/survey_themes/ls6_surveytheme/ls6_javascript_modules.js

@@ -3,4 +3,5 @@
  */
 
 import ThemeScripts from './core/ls6_core_theme.js';
-import ArrayScripts from './questiontypes/array/array.js';
+import ArrayScripts from './questiontypes/array/array.js';
+import NavbarScripts from './navbar/navbar.js';

assets/survey_themes/ls6_surveytheme/ls6_theme_variables.scss

@@ -13,6 +13,7 @@ $font-weight-500: 500;
 $font-weight-600: 600;
 $font-weight-900: 900;
 
+$line-height-16: 16px;
 $line-height-20: 20px;
 $line-height-24: 24px;
 $line-height-26: 26px;

assets/survey_themes/ls6_surveytheme/navbar/navbar.js

@@ -0,0 +1,31 @@
+export var NavbarScripts = function () {
+    var getContentByElementId = function getContentByElementId(elementId) {
+        var targetHtml = document.getElementById(elementId);
+        return targetHtml.innerHTML;
+    };
+
+    var replaceContent = function replaceContent(replacementContent,targetElementId) {
+        var element = document.getElementById(targetElementId);
+        element.innerHTML = '';
+        element.innerHTML = replacementContent;
+    };
+
+    var initNavbarEvents = function () {
+
+        $(document).on('click', '[data-navtargetid]', function() {
+            replaceContent(getContentByElementId('main-dropdown'), 'back-content');
+            //replace menu content with submenu content
+            replaceContent(getContentByElementId($(this).data('navtargetid')), 'main-dropdown');
+        });
+        $(document).on('click', '.back-link', function() {
+            // switch menu content back to original content (this currently works only with one level nested elements)
+            replaceContent(getContentByElementId('back-content'), 'main-dropdown');
+        });
+    };
+
+    return {
+        initNavbarEvents: initNavbarEvents,
+    };
+};
+// register to global scope
+window.NavbarScripts = NavbarScripts;

assets/survey_themes/ls6_surveytheme/navbar/navbar.scss

@@ -41,9 +41,6 @@ Responsive navbar-brand image CSS
     padding-top: 2em;
 }
 
-body .navbar-default .navbar-brand:hover {
-}
-
 /* text overflows, ellipsis and hyphens */
 .navbar-brand {
     overflow: hidden;
@@ -61,11 +58,6 @@ body .navbar-default .navbar-brand:hover {
 .navbar {
     border-radius    : 0 !important;
 
-    a {
-        text-decoration : none;
-        line-height     : 1.8rem;
-        font-size       : 1.2rem;
-    }
 
     @media(min-width : 769px) {
         .navbar-nav .nav-item .nav-link:hover {
@@ -103,4 +95,51 @@ body .navbar-default .navbar-brand:hover {
         padding-bottom : 15px;
     }
 
-}
+}
+
+#survey-nav {
+    &.navbar {
+        box-shadow: none;
+    }
+    .navbar-toggler {
+        border: none;
+        padding: 0;
+        margin-top: 20px;
+        .ri-more-fill {
+            font-size: $font-size-xl * 1.125;
+        }
+    }
+
+    #main-dropdown {
+        min-width: 250px;
+    }
+    .dropdown-header {
+        font-weight : $font-weight-500;
+        font-size   : $font-size-xs;
+        line-height : $line-height-16;
+    }
+    .dropdown-divider {
+        padding: 0;
+        margin: 0 1rem;
+    }
+    .dropdown-menu > li > a {
+        text-decoration : none;
+        font-weight : $font-weight-normal;
+        font-size   : $font-size-sm;
+        line-height : $line-height-20;
+    }
+    .dropdown-toggle::after {
+        display: none;
+    }
+
+    .back-link .ri-arrow-left-s-line, .nav-link .ri-arrow-right-s-line {
+        vertical-align : -0.10em;
+        font-size      : $font-size-lg;
+    }
+    .back-link .ri-arrow-left-s-line {
+        margin-right   : 16px;
+    }
+    .form-change-lang {
+        padding-bottom: 0;
+    }
+}

assets/survey_themes/ls6_surveytheme/navbar/navbar_colors.scss

@@ -8,10 +8,10 @@
 
 .navbar {
     background-color : $white !important;
-    box-shadow : 0 1px 20px 0 rgba(196, 196, 196, 1);
+    box-shadow       : 0 1px 20px 0 rgba(196, 196, 196, 1);
 
     @media(max-width : 768px) {
-        box-shadow     : 1px 2px 3px $color_gunsmoke_10_approx;
+        box-shadow : 1px 2px 3px $color_gunsmoke_10_approx;
     }
 }
 
@@ -22,4 +22,48 @@
 
 .navbar-toggle .icon-bar {
     background-color : $base-color;
+}
+
+#survey-nav {
+    .navbar-toggler {
+        .ri-more-fill {
+            color : $g-700;
+        }
+    }
+
+    .dropdown-menu > li > a {
+        color : $g-900;
+        //&:hover {
+        //    background  : none !important;
+        //    border-left : $base-color solid 8px;
+        //}
+    }
+
+    #main-dropdown {
+        .list-group-item {
+            border : none;
+
+            a.disabled {
+                color: $g-600;
+            }
+            a.index-warning {
+                background  : none;
+                border-left : $warning solid 8px;
+            }
+
+            a.index-danger {
+                background  : none;
+                border-left : $error solid 8px;
+            }
+
+            a:not(.index-danger):not(.index-warning) {
+                background  : none;
+                border-left : transparent solid 8px;
+            }
+        }
+        .dropdown-divider {
+            border-top: 1px solid $g-400;
+        }
+    }
+
 }

assets/survey_themes/ls6_surveytheme/src/definitions.scss

@@ -189,9 +189,6 @@ body {
         background-color : $white;
         border           : 1px solid $color_alto_approx;
     }
-    hr {
-        border-top : 1px solid $color_norway_approx;
-    }
     .page-header {
         border-bottom : 1px solid $color_norway_approx;
     }