geosolutions-it#6946: Minor style fixes due to latest less update (ge…

…osolutions-it#6963)
dsuren1 · Jul 15, 2021 · 0c54aa6 · 0c54aa6
1 parent e5d0877
commit 0c54aa6
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 51 deletions.
diff --git a/web/client/actions/geostory.js b/web/client/actions/geostory.js
@@ -247,13 +247,6 @@ export const updateUrlOnScroll = value => ({type: SET_UPDATE_URL_SCROLL, value})
 
 export const updateMediaEditorSettings = mediaEditorSettings => ({ type: UPDATE_MEDIA_EDITOR_SETTINGS, mediaEditorSettings });
 
-/**
- * This action can be used to disable/enable URL update during story load,
- * to avoid conflicts due to the initial scroll when the user opens a link pointing to a section/column.
- * @param {boolean} status true if the application is actually scrolling
- * @returns the action
- */
-export const geostoryScrolling = (status) => ({ type: GEOSTORY_SCROLLING, status});
 
 /**
  * Set the feature drawn

diff --git a/web/client/themes/default/less/geostory.less b/web/client/themes/default/less/geostory.less
@@ -251,7 +251,7 @@
 }
 
 .ms-sections-container-small-screen {
-    @ms-story-padding-small-screen: @square-btn-medium-size / 2 + 8px;
+    @ms-story-padding-small-screen: (@square-btn-medium-size / 2 + 8px);
     .ms-section .ms-section-background .ms-section-background-container .ms-media {
         /* alignment of content */
         .ms-story-align-center();
@@ -297,25 +297,25 @@
         &.ms-content-text {
             .ms-content-body {
                 /* font size for all the main classes in text content */
-                p { font-size: @ms-story-font-size-base * 0.75; }
-                h1 { font-size: @ms-story-font-size-h1 * 0.75; }
-                h2 { font-size: @ms-story-font-size-h2 * 0.75; }
-                h3 { font-size: @ms-story-font-size-h3 * 0.75; }
-                h4 { font-size: @ms-story-font-size-h4 * 0.75; }
-                h5 { font-size: @ms-story-font-size-h5 * 0.75; }
-                h6 { font-size: @ms-story-font-size-h6 * 0.75; }
+                p { font-size: (@ms-story-font-size-base * 0.75); }
+                h1 { font-size: (@ms-story-font-size-h1 * 0.75); }
+                h2 { font-size: (@ms-story-font-size-h2 * 0.75); }
+                h3 { font-size: (@ms-story-font-size-h3 * 0.75); }
+                h4 { font-size: (@ms-story-font-size-h4 * 0.75); }
+                h5 { font-size: (@ms-story-font-size-h5 * 0.75); }
+                h6 { font-size: (@ms-story-font-size-h6 * 0.75); }
             }
         }
     }
     .ms-section.ms-expandable-background {
         &.ms-section-title .ms-content-text,
         &.ms-section-immersive .ms-content-column {
-            padding-right: @square-btn-medium-size + 8px;
+            padding-right: (@square-btn-medium-size + 8px);
         }
     }
 }
 .ms-sections-container-medium-screen {
-    @ms-story-padding-medium-screen: @square-btn-medium-size * 1.5;
+    @ms-story-padding-medium-screen: (@square-btn-medium-size * 1.5);
     .ms-section .ms-section-background .ms-section-background-container {
         /* size of content */
         &.ms-size-full .ms-media { width: @ms-story-size-full; }
@@ -337,13 +337,13 @@
     .ms-content {
         &.ms-content-text {
             .ms-content-body {
-                p { font-size: @ms-story-font-size-base * 0.80; }
-                h1 { font-size: @ms-story-font-size-h1 * 0.80; }
-                h2 { font-size: @ms-story-font-size-h2 * 0.80; }
-                h3 { font-size: @ms-story-font-size-h3 * 0.80; }
-                h4 { font-size: @ms-story-font-size-h4 * 0.80; }
-                h5 { font-size: @ms-story-font-size-h5 * 0.80; }
-                h6 { font-size: @ms-story-font-size-h6 * 0.80; }
+                p { font-size: (@ms-story-font-size-base * 0.80); }
+                h1 { font-size: (@ms-story-font-size-h1 * 0.80); }
+                h2 { font-size: (@ms-story-font-size-h2 * 0.80); }
+                h3 { font-size: (@ms-story-font-size-h3 * 0.80); }
+                h4 { font-size: (@ms-story-font-size-h4 * 0.80); }
+                h5 { font-size: (@ms-story-font-size-h5 * 0.80); }
+                h6 { font-size: (@ms-story-font-size-h6 * 0.80); }
             }
         }
         /* size of content */
@@ -483,7 +483,7 @@
                 .ms-content-toolbar {
                     display: flex;
                     padding: 0 16px;
-                    padding-top: @square-btn-medium-size / 2;
+                    padding-top: (@square-btn-medium-size / 2);
                     .btn-group {
                         margin-right: 0;
                         margin-left: auto;
@@ -590,7 +590,7 @@
             border-top: 1px solid @ms-story-bg-grey;
             border-right: 1px solid @ms-story-bg-grey;
             border-left: 1px solid @ms-story-bg-grey;
-            width: @square-btn-medium-size + 2;
+            width: (@square-btn-medium-size + 2);
             border-top-left-radius: 50%;
             margin-left: 50%;
             transform: translateX(-50%);
@@ -642,8 +642,8 @@
                 /* render the toolbar has a floating container at top left corner of title container */
                 .ms-content-toolbar {
                     position: absolute;
-                    margin-left: -@square-btn-medium-size / 2;
-                    margin-top: -@square-btn-medium-size * 0.6;
+                    margin-left: (-@square-btn-medium-size / 2);
+                    margin-top: (-@square-btn-medium-size * 0.6);
                     padding: 0;
                     z-index: 2;
                     .shadow-soft();
@@ -655,8 +655,8 @@
                 where the alignment effect is not visible without this improvement
                 */
                 &.ms-align-center .ms-content-body { margin-left: auto; margin-right: auto; }
-                &.ms-align-left .ms-content-body { margin-left: @square-btn-medium-size + 8px; margin-right: auto; }
-                &.ms-align-right .ms-content-body { margin-left: auto; margin-right: @square-btn-medium-size + 8px; }
+                &.ms-align-left .ms-content-body { margin-left: (@square-btn-medium-size + 8px); margin-right: auto; }
+                &.ms-align-right .ms-content-body { margin-left: auto; margin-right: (@square-btn-medium-size + 8px); }
                 /* text on full size should fill all the width of container */
                 &.ms-size-full {
                     width: 100%;
@@ -789,7 +789,7 @@
                 min-width: 500px;
                 display: flex; // align vertically the content
                 pointer-events: none; // pass pointer events to background (this div takes full width and height)
-                padding: 64px @square-btn-medium-size + 6px;
+                padding: 64px (@square-btn-medium-size + 6px);
                 padding-top: 164px;
                 &>.ms-content-body {
                     // override background of paragraph (or title) content.
@@ -799,8 +799,8 @@
                     &>.ms-content-toolbar {
                         position: absolute;
                         z-index: 2;
-                        margin-left: -@square-btn-medium-size / 2;
-                        margin-top: -@square-btn-medium-size * 0.6;
+                        margin-left: (-@square-btn-medium-size / 2);
+                        margin-top: (-@square-btn-medium-size * 0.6);
                         padding: 0;
                         .shadow-soft();
                     }

diff --git a/web/client/themes/default/less/maps-properties.less b/web/client/themes/default/less/maps-properties.less
@@ -17,13 +17,13 @@
         display: flex;
         padding: 0 15px;
         .ms-col-grab {
-            width: @icon-size / 2;
+            width: (@icon-size / 2);
             padding: 0;
             overflow: hidden;
             display: flex;
             span {
-                width: @icon-size / 4;
-                height: @icon-size / 2;
+                width: (@icon-size / 4);
+                height: (@icon-size / 2);
                 margin: auto;
             }
         }
@@ -60,7 +60,7 @@
         }
     }
     .col-xs-12 {
-        margin-top: ( @square-btn-size - 34px) / 2;
+        margin-top: (( @square-btn-size - 34px) / 2);
         .form-group {
 
             height: @square-btn-size;
@@ -71,29 +71,34 @@
             label {
 
                 .col-xs-6;
+                padding: 0;
                 float: left;
                 font-weight: normal;
                 line-height: 34px;
                 margin: 0;
-                margin-top:( @square-btn-size - 34px) / 2;
+                margin-top:(( @square-btn-size - 34px) / 2);
             }
             input {
-                margin-top:( @square-btn-size - 34px) / 2;
+                margin-top:(( @square-btn-size - 34px) / 2);
                 float: left;
                 .col-xs-6;
+                padding: 4px 8px;
             }
         }
     }
     .dropzone-thumbnail-container, .dropzone-filedrop-container {
         label {
             .col-xs-6;
+            padding: 0;
             float: left;
+
             font-weight: normal;
         }
         .dropzone {
             overflow: hidden;
             float: left;
             .col-xs-6;
+            padding: 0;
             transition: 0.3s;
             &:hover {
                 transform: scale(1.05);
@@ -227,7 +232,7 @@
             }
             button {
                 float: right;
-                margin-top: (@square-btn-size - @square-btn-medium-size) / 2;
+                margin-top: ((@square-btn-size - @square-btn-medium-size) / 2);
             }
             .ms-permission-title {
                 width: ~"calc(50% - 20px)";
@@ -251,13 +256,13 @@
         margin: 0;
 
         .m-label {
-            margin-top:( @square-btn-size - @square-btn-medium-size) / 2;
+            margin-top:(( @square-btn-size - @square-btn-medium-size) / 2);
             height: @square-btn-medium-size;
             line-height: @square-btn-medium-size;
         }
 
         .btn-group {
-            margin-top:( @square-btn-size - @square-btn-medium-size) / 2;
+            margin-top:(( @square-btn-size - @square-btn-medium-size) / 2);
         }
 
         .ms-details-sheet {

diff --git a/web/client/themes/default/less/modal.less b/web/client/themes/default/less/modal.less
@@ -101,7 +101,7 @@
 
         & > .modal-header {
             height: @square-btn-size;
-            padding: (@square-btn-size - @font-size-h4) / 2;
+            padding: ((@square-btn-size - @font-size-h4) / 2);
             border: none;
             flex-shrink: 0;
             .modal-title {
@@ -193,7 +193,7 @@
                 min-height: @square-btn-size;
             }
             .btn-group {
-                margin: (@square-btn-size - 34) / 2;
+                margin: ((@square-btn-size - 34) / 2);
             }
         }
     }
@@ -275,7 +275,7 @@
             .shadow-soft;
             min-height: @square-btn-size;
             // 24px height of quill icons
-            padding: (@square-btn-size - 24px) / 2;
+            padding: ((@square-btn-size - 24px) / 2);
 
         }
         .ql-container {

diff --git a/web/client/themes/default/less/query-panel.less b/web/client/themes/default/less/query-panel.less
@@ -91,7 +91,7 @@
 
         .mapstore-switch-panel {
             margin-bottom: @square-btn-small-size;
-            padding: 0 @square-btn-small-size / 2;
+            padding: 0 (@square-btn-small-size / 2);
             border: none;
             .shadow-soft;
             .panel-title {

diff --git a/web/client/themes/default/less/react-select.less b/web/client/themes/default/less/react-select.less
@@ -71,7 +71,7 @@
 
 @select-item-bg:                    fade(@select-primary-color, 8%);
 @select-item-bg-fb:                 mix(@select-primary-color, @select-input-bg, 8%);  // Fallback color for IE 8
-@select-item-color:                 contrast(@select-primary-color);
+@select-item-color:                 @ms2-color-text;
 @select-item-border-color:          fade(@select-primary-color, 24%);
 @select-item-border-color-fb:       mix(@select-primary-color, @select-input-bg, 24%);  // Fallback color for IE 8
 @select-item-hover-color:           darken(@select-item-color, 5%);

diff --git a/web/client/themes/default/less/react-widgets.less b/web/client/themes/default/less/react-widgets.less
@@ -0,0 +1,10 @@
+// Overrides for react-widget styles
+@import '~react-widgets/lib/less/react-widgets.less';
+// override the computation of the buttons using parenthesis
+// to get the correct value
+.rw-numberpicker {
+    .rw-btn {
+        height: (@input-height / 2);
+        line-height: (@input-height / 2);
+    }
+}
diff --git a/web/client/themes/default/less/switch.less b/web/client/themes/default/less/switch.less
@@ -20,7 +20,7 @@
 .mapstore-switch-btn {
     position: relative;
     display: inline-block;
-    width: (@square-btn-small-size * 2) - 8px; /* 60 */
+    width: ((@square-btn-small-size * 2) - 8px); /* 60 */
     height: @square-btn-small-size; /* 34 */
     .m-slider {
 

diff --git a/web/client/themes/default/less/switchpanel.less b/web/client/themes/default/less/switchpanel.less
@@ -24,7 +24,7 @@
         }
         .btn-group {
             float: right;
-            margin: ((@square-btn-size - @square-btn-small-size) / 2) - 2 0;
+            margin: (((@square-btn-size - @square-btn-small-size) / 2) - 2) 0;
             margin-right: (((@square-btn-size - @square-btn-small-size) / 2) - 2) / 2;
             .square-button-sm {
                 padding: 0;

diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less
@@ -52,7 +52,7 @@
         }
 
         .form-group {
-            margin: (@square-btn-size - @square-btn-medium-size)/2 0 0 0;
+            margin: ((@square-btn-size - @square-btn-medium-size)/2) 0 0 0;
             .input-group {
                 height: @square-btn-medium-size;
                 width: 100%;
@@ -74,7 +74,7 @@
         }
 
         .btn-group {
-            margin: (@square-btn-size - @square-btn-medium-size)/2 0 0 0;
+            margin: ((@square-btn-size - @square-btn-medium-size)/2) 0 0 0;
 
             .btn-group {
                 margin-top: 0px;

diff --git a/web/client/themes/default/ms2-theme.less b/web/client/themes/default/ms2-theme.less
@@ -49,6 +49,7 @@
 @import "./less/query-panel.less";
 @import "./less/react-data-grid.less";
 @import "./less/react-select.less";
+@import "./less/react-widgets.less";
 @import "./less/rulesmanager.less";
 @import "./less/searchbar.less";
 @import "./less/select.less";