fix: Fix Display of Secion Menu when Small resolution screen - MEED-7…

…226 - Meeds-io/meeds#2276 (#158)
Meeds-io · Jul 9, 2024 · cc51b12 · cc51b12
1 parent 0739d25
commit cc51b12
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 3 deletions.
diff --git a/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -36,6 +36,7 @@
     <portlet-name>SiteManagement</portlet-name>
     <skin-name>Enterprise</skin-name>
     <css-path>/skin/css/siteManagement.css</css-path>
+    <additional-module>ImageCropper</additional-module>
   </portlet-skin>
 
   <portlet-skin>

diff --git a/layout-webapp/src/main/webapp/skin/less/editor.less b/layout-webapp/src/main/webapp/skin/less/editor.less
@@ -32,6 +32,9 @@
   left: 50% !important;
   transform: translateX(-50%) !important;
   width: @pageWidth;
+  &.normal-page-width {
+    max-width: ~"calc(100% - 20px)";
+  }
 }
 
 .layout-mobile-view {

diff --git a/layout-webapp/src/main/webapp/skin/less/siteManagement.less b/layout-webapp/src/main/webapp/skin/less/siteManagement.less
@@ -2,8 +2,6 @@
 @import 'mixins.less';
 @import './common/Style.less';
 
-@import (css) "/platform-ui/skin/css/component/ImageCropper/cropper.min.css";
-
 #sitePropertiesDrawer {
   .orderDisplay {
     .v-text-field .v-input__control .v-input__slot {

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Section.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Section.vue
@@ -32,7 +32,11 @@
     <v-hover :disabled="$root.mobileDisplayMode">
       <div
         slot-scope="{ hover }"
-        :class="hoverSectionMenuButton && 'z-index-two'"
+        :class="{
+          'z-index-two': hoverSectionMenuButton,
+          'normal-page-width': !$root.pageFullWindow,
+          'full-page-width': $root.pageFullWindow,
+        }"
         class="layout-section-border">
         <div class="position-relative full-height full-width">
           <layout-editor-section-menu

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditPageDrawer.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditPageDrawer.vue
@@ -179,6 +179,8 @@ export default {
           this.parentContainer.width = 'fullWindow';
         } else if (document.body.style.getPropertyValue('--allPagesWidth')) {
           this.parentContainer.width = 'singlePageApplication';
+        } else {
+          this.parentContainer.width = null;
         }
         await this.$refs.backgroundInput.apply();
         await this.$refs.appBackgroundInput.apply();

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/js/LayoutUtils.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/js/LayoutUtils.js
@@ -297,6 +297,7 @@ export function applyContainerStyle(container, containerStyle) {
   }
   Vue.set(container, 'cssClass', container.cssClass);
   Vue.set(container, 'height', container.height || null);
+  Vue.set(container, 'width', container.width || null);
   Vue.set(container, 'borderColor', containerStyle.borderColor || null);
   Vue.set(container, 'borderSize', containerStyle.borderSize || '0');
   Vue.set(container, 'boxShadow', containerStyle.boxShadow && 'true' || null);