From b081d90347b10e644c5474174c8db3c104daca50 Mon Sep 17 00:00:00 2001
From: Francesco Boccacci <boccacci.francesco@gmail.com>
Date: Tue, 28 Feb 2023 12:10:47 +0100
Subject: [PATCH] Prevent top menu clipping on small screens (ref: viewport
 width < 768 px) (#359)

* Fix https://github.com/g3w-suite/g3w-client/issues/358

* code indentation

* comments

* todo

---------

Co-authored-by: Raruto <Raruto@users.noreply.github.com>
---
 .../style/less/admin-lte2-less/header.less    |   2 +-
 src/components/App.vue                        | 168 +++++++++++++++---
 2 files changed, 142 insertions(+), 28 deletions(-)

diff --git a/src/assets/style/less/admin-lte2-less/header.less b/src/assets/style/less/admin-lte2-less/header.less
index 4403b1e81..f49f8b1f7 100644
--- a/src/assets/style/less/admin-lte2-less/header.less
+++ b/src/assets/style/less/admin-lte2-less/header.less
@@ -204,7 +204,7 @@
   color: #fff;
   border: 0;
   padding: 11px 15px 9px 15px;
-  margin: 5px 4px 4px 4px;
+  margin: 5px 20px 4px 4px;
 }
 //Control navbar scaffolding on x-small screens
 @media (max-width: @screen-sm-max) {
diff --git a/src/components/App.vue b/src/components/App.vue
index 68678ccb5..41c1572ef 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -5,25 +5,48 @@
 
 <template>
 <div class="wrapper" v-disabled="app.disabled">
+
   <cookie-law theme="dark-lime" :buttonText="cookie_law_buttonText">
     <div slot="message" v-t="'cookie_law.message'">
     </div>
   </cookie-law>
+
   <header v-if="!isIframe" class="main-header">
-    <!-- Logo -->
-    <!-- Header Navbar: style can be found in header.less -->
+
+    <!-- NAVBAR TOP (MAIN MENU) -->
+    <!-- TODO: extract/refactor into sub-components or move into a dedicated single file component -->
+    <!-- NB: additional styles can be found in `header.less` -->
     <nav ref="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+
       <div class="container-fluid">
+
         <div class="navbar-header">
-          <button ref='navbar_toggle' type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
+
+          <!-- ELLIPSIS BUTTON (MAIN MENU) -->
+          <button
+            ref='navbar_toggle'
+            type="button"
+            class="navbar-toggle"
+            data-toggle="collapse"
+            data-target="#main-navbar"
+          >
             <i style="font-size: 1.3em;" :class="g3wtemplate.getFontClass('ellips-v')"></i>
           </button>
-          <!-- Toggle button on navbar only for mobile -->
+
+          <!-- HAMBURGER BUTTON (SIDEBAR MENU) -->
+          <!-- TODO: replace isMobile() with a css media query -->
           <a v-if="isMobile()" href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
             <i style="font-size: 1.3em;" :class="g3wtemplate.getFontClass('bars')"></i>
           </a>
+
+          <!-- LOGO -->
           <div class="logo-wrapper" :class="{'mobile': isMobile()}">
-            <a  v-if="logo_url" :href="logo_link" :target="logo_link_target" class="project_logo_link">
+            <a
+              v-if="logo_url"
+              :href="logo_link"
+              :target="logo_link_target"
+              class="project_logo_link"
+            >
               <img class="img-responsive" style="max-width: 250px;" ref="img_logo" :src="logo_url">
             </a>
             <div ref="main_title_project_title" class="project_title_content">
@@ -31,25 +54,61 @@
               <div class="sub_title">{{project_title}}</div>
             </div>
           </div>
+
         </div>
-        <div ref="mainnavbar" class="collapse navbar-collapse" id="main-navbar" style="text-align: center; overflow: hidden; max-height: 50px;">
-          <navbarleftitems></navbarleftitems>
-          <navbarrightitems></navbarrightitems>
-          <ul ref="app-navbar-nav" class="nav navbar-nav navbar-right app-navbar-nav">
+
+        <!-- TODO: add description -->
+        <div
+          ref="mainnavbar"
+          id="main-navbar"
+          class="collapse navbar-collapse"
+          style="text-align: center; overflow: hidden; margin: 0 0;"
+        >
+
+          <!-- TODO: add description -->
+          <navbarleftitems />
+
+          <!-- TODO: add description -->
+          <navbarrightitems />
+
+          <ul
+            ref="app-navbar-nav"
+            class="nav navbar-nav navbar-right app-navbar-nav"
+          >
+
+            <!-- LOGIN -->
             <li v-if="!user" class="dropdown user user-menu">
               <a :href="login_url">
                 <i :class="g3wtemplate.getFontClass('sign-in')" aria-hidden="true"></i>
                 <span v-t="'sign_in'"></span>
               </a>
             </li>
-            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[0]" :key="state.id"></header-item>
-            <li id="changemaps" class="dropdown user" v-if="numberOfProjectsInGroup > 1">
+
+            <!-- TODO: add description -->
+            <header-item
+              v-for="state in custom_header_items_position[0]"
+              :key="state.id"
+              :state="state"
+              @show-custom-modal-content="showCustomModalContent"
+            />
+
+            <!-- CHANGE MAP -->
+            <li v-if="numberOfProjectsInGroup > 1" id="changemaps" class="dropdown user">
               <a href="#" @click="openProjectsMenu" class="dropdown-toggle" data-toggle="dropdown">
                 <i :class="g3wtemplate.getFontClass('change-map')" aria-hidden="true"></i>
                 <span v-t="'changemap'"></span>
               </a>
             </li>
-            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[1]" :key="state.id"></header-item>
+
+            <!-- TODO: add description -->
+            <header-item
+              v-for="state in custom_header_items_position[1]"
+              :key="state.id"
+              :state="state"
+              @show-custom-modal-content="showCustomModalContent"
+            />
+
+            <!-- ADMIN / LOGOUT -->
             <li v-if="user" class="dropdown user user-menu">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i :class="g3wtemplate.getFontClass('user')"></i>
@@ -63,40 +122,87 @@
                 </li>
                 <li class="user-footer">
                   <div class="pull-left" v-if="user.admin_url">
-                    <a :href="user.admin_url" class="btn btn-default btn-flat skin-color bold" ><i :class="g3wtemplate.getFontClass('folder')"></i> Admin</a>
+                    <a :href="user.admin_url" class="btn btn-default btn-flat skin-color bold" >
+                      <i :class="g3wtemplate.getFontClass('folder')"></i> Admin
+                    </a>
                   </div>
                   <div class="pull-right">
-                    <a :href="user.logout_url" class="btn btn-default btn-flat skin-color bold" v-t="'logout'"><i :class="g3wtemplate.getFontClass('sign-out')" style="margin-right: 2px;"></i></a>
+                    <a :href="user.logout_url" class="btn btn-default btn-flat skin-color bold" v-t="'logout'">
+                      <i :class="g3wtemplate.getFontClass('sign-out')" style="margin-right: 2px;"></i>
+                    </a>
                   </div>
                 </li>
               </ul>
             </li>
-            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[2]" :key="state.id"></header-item>
+
+            <!-- TODO: add description -->
+            <header-item
+              v-for="state in custom_header_items_position[2]"
+              :key="state.id"
+              :state="state"
+              @show-custom-modal-content="showCustomModalContent"
+            />
+
+            <!-- CREDITS -->
             <li class="dropdown user user-menu">
               <a href="#" data-toggle="modal" data-target="#credits" class="dropdown-toggle">
                 <i :class="g3wtemplate.getFontClass('credits')" aria-hidden="true"></i>
                 <span>Credits</span>
               </a>
             </li>
-            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[3]" :key="state.id"></header-item>
+
+            <!-- TODO: add description -->
+            <header-item
+              v-for="state in custom_header_items_position[3]"
+              :key="state.id"
+              :state="state"
+              @show-custom-modal-content="showCustomModalContent"
+            />
+
+            <!-- LANGUAGE SWITCHER -->
             <li v-if="languages" class="g3w-languages">
-              <select v-select2="'language'" class="form-control" :templateSelection="templateResultLanguages" :templateResult="templateResultLanguages" v-model="language" style="cursor:pointer; width: 130px;">
-                <option v-for="_language in languages" :key="_language[0]" :value="_language[0]" :selected="_language[0] === language && 'selected'">
-                  {{_language[1]}}
+              <select
+                v-select2="'language'"
+                class="form-control"
+                :templateSelection="templateResultLanguages"
+                :templateResult="templateResultLanguages"
+                v-model="language"
+                style="cursor:pointer; width: 130px;"
+              >
+                <option
+                  v-for="lang in languages"
+                  :key="lang[0]"
+                  :value="lang[0]"
+                  :selected="lang[0] === language && 'selected'"
+                >
+                  {{ lang[1] }}
                 </option>
               </select>
             </li>
+
+            <!-- HOME PAGE -->
             <li v-if="frontendurl" class="dropdown">
               <a :href="frontendurl">
                 <span><i :class="g3wtemplate.getFontClass('home')"></i> Home</span>
               </a>
             </li>
-            <header-item :state="state" @show-custom-modal-content="showCustomModalContent" v-for="state in custom_header_items_position[4]" :key="state.id"></header-item>
+
+            <!-- TODO: add description -->
+            <header-item
+              v-for="state in custom_header_items_position[4]"
+              :key="state.id"
+              :state="state"
+              @show-custom-modal-content="showCustomModalContent"
+            />
+
           </ul>
+
         </div>
+
       </div>
     </nav>
   </header>
+
   <!-- Left side column. contains the logo and sidebar -->
   <sidebar></sidebar>
   <!-- Content Wrapper. Contains page content -->
@@ -1020,16 +1126,24 @@ export default {
     },
   },
   methods: {
+
+    /**
+     * Language switcher item template (select2)
+     * 
+     * @TODO find out how to replace `justify-content: space-around` with `justify-content: center` (it's really weird on mobile)
+     */
     templateResultLanguages(state) {
-      if (!state.id) return state.text;
-      const flagsurl = `${this.staticurl}img/flags`;
-      const $state = $(`<div style="font-weight: bold; display:flex; align-items: center; justify-content: space-around">
-            <img src="${flagsurl}/${state.element.value.toLowerCase()}.png" />
-            <span style="margin-left: 5px;">${state.text}</span> 
-          </span>`
+      if (!state.id) {
+        return state.text;
+      }
+      return $(`
+        <div style="font-weight: bold; display:flex; align-items: center; justify-content: space-around;">
+          <img src="${this.staticurl}img/flags/${state.element.value.toLowerCase()}.png" />
+          <span style="margin-left: 5px;">${state.text}</span> 
+        </span>`
       );
-      return $state;
     },
+
     async resize(){
       if (!this.isIframe) {
         await this.$nextTick();