Modal preview image gets cropped on small screens (#499)

* Fix main sidebar z-index * Fix issue on relation tab when a qgis project has form with a tab contain relations and after time it remove a layers related to this relation * Remove close element tag * Use ZINDEX constant to manage sidebar-aside-toggle button element and avoid to be hide when open right content menu to 100%. * Remove useless scope style * Change less css property to work with sidebar-aside-toggle as sibling of main-header class and not child * comments * Update Sidebar.vue --------- Co-authored-by: Raruto <[email protected]>
g3w-suite · Oct 16, 2023 · a8ec492 · a8ec492
1 parent 4cf4771
commit a8ec492
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 98 deletions.
diff --git a/src/assets/style/less/admin-lte2-less/sidebar.less b/src/assets/style/less/admin-lte2-less/sidebar.less
@@ -6,14 +6,8 @@
 // ``` .left-side has been deprecated as of 2.0.0 in favor of .main-sidebar ```
 
 .main-sidebar,
+.sidebar-aside-toggle,
 .left-side {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding-top: 50px;
-  min-height: 100%;
-  width: @sidebar-width;
-  z-index: 810;
   //Using disposable variable to join statements with a comma
   @transition-rule: @transition-speed @transition-fn,
     width @transition-speed @transition-fn;
@@ -36,6 +30,15 @@
   }
 }
 
+.left-side {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-top: 50px;
+  min-height: 100%;
+  z-index: 810;
+}
+
 .sidebar {
   padding-bottom: 0px;
 }

diff --git a/src/assets/style/less/g3w-sidebar.less b/src/assets/style/less/g3w-sidebar.less
@@ -3,22 +3,24 @@
 @sidebar-width: 350px;
 @control-sidebar-width: 450px;
 
+a.sidebar-aside-toggle {
+  @media (max-width: @screen-xs-max) {
+    display: none !important;
+  }
+}
+
 .main-sidebar{
   &.iframe{
     padding-top:0 !important;
     a.sidebar-aside-toggle {
       top: 0! important;
     }
   }
-  a.sidebar-aside-toggle {
-    @media (max-width: @screen-xs-max) {
-      display: none !important;
-    }
-  }
+
   &.mobile {
     width: @sidebar-width-small;
   }
-  //z-index: 1 !important;
+  z-index: 1 !important;
 }
 
 #g3w-sidebar.sidebar {
@@ -166,8 +168,9 @@
 .main-sidebar,
 .main-sidebar-mobile,
 .left-side {
+  width: @sidebar-width;
   @media (max-width: @screen-xs-max) {
-      width: @sidebar-width-mobile;
+    width: @sidebar-width-mobile;
   }
   @media (max-width: @screen-xs-max) {
     .translate(-@sidebar-width-mobile, 0);

diff --git a/src/components/FieldImage.vue b/src/components/FieldImage.vue
@@ -7,7 +7,7 @@
   <field :state="state">
     <div slot="field" style="text-align: left">
       <img v-for="(value, index) in values" class="img-responsive" style="max-height:50px" @click="showGallery(index)" :src="getSrc(value)"/>
-      <g3w-images-gallery :id="galleryId" :active="active" :images="getGalleryImages()"></g3w-images-gallery>
+      <g3w-images-gallery :id="galleryId" :active="active" :images="getGalleryImages()"/>
     </div>
   </field>
 </template>

diff --git a/src/components/GlobalImage.vue b/src/components/GlobalImage.vue
@@ -10,7 +10,7 @@
         <img class="img-thumbnail" @click="showGallery(index)" :src="getSrc(value)"/>
       </div>
     </div>
-    <g3w-images-gallery :id="galleryId" :active="active" :images="getGalleryImages()"></g3w-images-gallery>
+    <g3w-images-gallery :id="galleryId" :active="active" :images="getGalleryImages()"/>
   </div>
 </template>
 

diff --git a/src/components/GlobalTabsNode.vue b/src/components/GlobalTabsNode.vue
@@ -99,10 +99,10 @@
       }
     },
     methods: {
-      loadingRelation(relation){
+      loadingRelation(relation) {
         const layer = ProjectsRegistry.getCurrentProject().getLayerById(this.layerid);
-        const relation_project = layer.getRelationById(relation.name);
-        return relation_project.state;
+        // FIXME: prevent a fatal error when creating a relation Tab (even if the project has no relations)
+        return layer.getRelationById(relation.name) || ({ state: {loading: false} }).state;
       },
       isRelationDisabled(relation){
         return this.getRelationName(relation.name) === undefined || (this.contenttype === 'editing' && this.isRelationChildLayerNotEditable(relation));

diff --git a/src/components/QueryResults.vue b/src/components/QueryResults.vue
@@ -102,7 +102,7 @@
                         </tr>
                         <tr v-show="!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)" :id="`${layer.id}_${index}`" class="featurebox-body">
                           <td :colspan="getColSpan(layer)">
-                            <tabs :fields="getQueryFields(layer, feature)" :layerid="layer.id" :feature="feature" :tabs="getLayerFormStructure(layer)"></tabs>
+                            <tabs :fields="getQueryFields(layer, feature)" :layerid="layer.id" :feature="feature" :tabs="getLayerFormStructure(layer)"/>
                           </td>
                         </tr>
                         <tr v-for="({component}) in getLayerCustomComponents(layer.id, 'feature', 'after')">

diff --git a/src/components/Relations.vue b/src/components/Relations.vue
@@ -12,7 +12,7 @@
       </div>
     </div>
     <div class="query-relations-content" style="display: grid; grid-template-columns: repeat(2, auto); grid-column-gap: 5px; grid-row-gap: 5px;">
-      <div @click="showRelation(relation)" v-for="relation in relations" class="skin-border-color relation-grid-item">
+      <div @click.stop="showRelation(relation)" v-for="relation in relations" class="skin-border-color relation-grid-item">
         <span style="font-weight: bold; padding: 5px;" class="skin-color g3w-long-text">{{ relation.name }}</span>
       </div>
     </div>

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -4,102 +4,102 @@
 -->
 
 <template>
-  <aside
-    class  = "main-sidebar"
-    :class = "{ iframe: iframe}"
-  >
-
-    <!-- TOGGLE BUTTON (desktop only) -->
-    <a
-      href        = "#"
-      class       = "sidebar-aside-toggle"
-      :class      = "{ 'g3w-disabled': disabled }"
-      data-toggle = "offcanvas" role="button">
-      <i :class="g3wtemplate.getFontClass('bars')"></i>
-    </a>
-
-    <!-- SIDEBAR CONTENT (additional styles can be found in g3w-sidebar.less) -->
-    <div
-      id     = "g3w-sidebar"
-      class  = "sidebar"
-      :class = "{ 'g3w-disabled': disabled }"
-    >
-
-      <div id="disable-sidebar"></div>
-
+    <aside>
       <div
-        v-show = "panelsinstack"
-        class = "g3w-sidebarpanel"
+        class  = "main-sidebar"
+        :class = "{ iframe: iframe}"
       >
+        <!-- SIDEBAR CONTENT (additional styles can be found in g3w-sidebar.less) -->
         <div
-          id    = "g3w-sidebarpanel-header-placeholder"
-          style = "
-            overflow: hidden;
-            line-height: 14px;
-            font-size:1.5em
-          "
+          id     = "g3w-sidebar"
+          class  = "sidebar"
+          :class = "{ 'g3w-disabled': disabled }"
         >
+          <div id="disable-sidebar"></div>
+
           <div
-            style  = "display: flex;"
-            :style = "{ justifyContent: state.gui.title ? 'space-between' : 'flex-end' }"
+            v-show = "panelsinstack"
+            class = "g3w-sidebarpanel"
           >
-
-            <h4
-              v-if  = "title"
-              style = "display: inline-block; font-weight: bold"
-              v-t   = "title"
-            ></h4>
-
-            <div>
-              <span
-                v-if               = "panels.length > 1"
-                @click             = "closePanel"
-                data-placement     = "left"
-                data-toggle        = "tooltip"
-                v-t-tooltip.create = "'back'"
-                class              = "skin-tooltip-left g3w-span-button close-pane-button fa-stack"
-              >
-                <i :class="g3wtemplate.getFontClass('circle')"     class="fa-stack-1x panel-button"></i>
-                <i :class="g3wtemplate.getFontClass('arrow-left')" class="fa-stack-1x panel-icon"></i>
-              </span>
-              <span
-                @click             = "closeAllPanels"
-                data-placement     = "left"
-                data-toggle        = "tooltip"
-                v-t-tooltip.create = "'close'"
-                class              = "skin-tooltip-left g3w-span-button close-pane-button fa-stack"
+            <div
+              id    = "g3w-sidebarpanel-header-placeholder"
+              style = "overflow: hidden; line-height: 14px;font-size:1.5em"
               >
-                <i :class="g3wtemplate.getFontClass('circle')" class="fa-stack-1x panel-button"></i>
-                <i :class="g3wtemplate.getFontClass('close')"  class="fa-stack-1x panel-icon"></i>
-              </span>
+                <div
+                  style  = "display: flex;"
+                  :style = "{ justifyContent: state.gui.title ? 'space-between' : 'flex-end' }"
+                >
+
+                  <h4
+                    v-if  = "title"
+                    style = "display: inline-block; font-weight: bold"
+                    v-t   = "title"
+                  ></h4>
+
+                  <div>
+                    <span
+                      v-if               = "panels.length > 1"
+                      @click             = "closePanel"
+                      data-placement     = "left"
+                      data-toggle        = "tooltip"
+                      v-t-tooltip.create = "'back'"
+                      class              = "skin-tooltip-left g3w-span-button close-pane-button fa-stack"
+                    >
+                      <i :class="g3wtemplate.getFontClass('circle')"     class="fa-stack-1x panel-button"></i>
+                      <i :class="g3wtemplate.getFontClass('arrow-left')" class="fa-stack-1x panel-icon"></i>
+                    </span>
+                    <span
+                      @click             = "closeAllPanels"
+                      data-placement     = "left"
+                      data-toggle        = "tooltip"
+                      v-t-tooltip.create = "'close'"
+                      class              = "skin-tooltip-left g3w-span-button close-pane-button fa-stack"
+                    >
+                      <i :class="g3wtemplate.getFontClass('circle')" class="fa-stack-1x panel-button"></i>
+                      <i :class="g3wtemplate.getFontClass('close')"  class="fa-stack-1x panel-icon"></i>
+                    </span>
+                  </div>
+
+                </div>
             </div>
 
+            <div
+              id    = "g3w-sidebarpanel-placeholder"
+              class = "g3w-sidebarpanel-placeholder"
+            ></div>
           </div>
-        </div>
-        <div
-          id    = "g3w-sidebarpanel-placeholder"
-          class = "g3w-sidebarpanel-placeholder"
-        ></div>
-      </div>
 
-      <div id="g3w-sidebarcomponents-content" >
-        <ul
-          id     = "g3w-sidebarcomponents"
-          v-show = "showmainpanel"
-          class  = "sidebar-menu"
-          :class = "{ 'g3w-disabled': state.disabled }"
-        ></ul>
-      </div>
+          <div id="g3w-sidebarcomponents-content" >
+            <ul
+              id     = "g3w-sidebarcomponents"
+              v-show = "showmainpanel"
+              class  = "sidebar-menu"
+              :class = "{ 'g3w-disabled': state.disabled }"
+            ></ul>
+          </div>
 
-    </div>
+        </div>
 
-  </aside>
+      </div>
+      <!-- TOGGLE BUTTON (desktop only) -->
+      <a
+        href        = "#"
+        class       = "sidebar-aside-toggle"
+        :class      = "{ 'g3w-disabled': disabled }"
+        :style      = "{zIndex: zIndex}"
+        data-toggle = "offcanvas" role="button">
+          <i :class="g3wtemplate.getFontClass('bars')"></i>
+      </a>
+
+    </aside>
 </template>
 
 <script>
   import ApplicationState          from 'store/application-state';
   import { SidebarEventBus as VM } from 'app/eventbus';
   import sidebarService            from 'services/sidebar';
+  import { ZINDEXES }              from 'app/constant';
+
 
   const { t } = require('core/i18n/i18n.service');
 
@@ -115,6 +115,9 @@
         bPageMode:  false,
         header:     t('main navigation'),
         state:      sidebarService.state,
+        /** @since v3.9.0 */
+        zIndex:     ZINDEXES.usermessage.tool + 2,
+
       }
     },