From 0c54aa68bfde6b73bff77021d54fd59df83ad233 Mon Sep 17 00:00:00 2001 From: stefano bovio Date: Thu, 10 Jun 2021 14:24:24 +0200 Subject: [PATCH] #6946: Minor style fixes due to latest less update (#6963) --- web/client/actions/geostory.js | 7 --- web/client/themes/default/less/geostory.less | 52 +++++++++---------- .../themes/default/less/maps-properties.less | 23 ++++---- web/client/themes/default/less/modal.less | 6 +-- .../themes/default/less/query-panel.less | 2 +- .../themes/default/less/react-select.less | 2 +- .../themes/default/less/react-widgets.less | 10 ++++ web/client/themes/default/less/switch.less | 2 +- .../themes/default/less/switchpanel.less | 2 +- web/client/themes/default/less/toc.less | 4 +- web/client/themes/default/ms2-theme.less | 1 + 11 files changed, 60 insertions(+), 51 deletions(-) create mode 100644 web/client/themes/default/less/react-widgets.less diff --git a/web/client/actions/geostory.js b/web/client/actions/geostory.js index e7ee57a52f..7b1ea6d2d3 100644 --- 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 index 2a44723c26..c1b0788da5 100644 --- 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 index 7f08298725..05023ac490 100644 --- 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 index bb18665346..3d89a8dbfb 100644 --- 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 index 049ac4d119..eec095df8e 100644 --- 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 index 882a4e046e..acd10a5caf 100644 --- 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 new file mode 100644 index 0000000000..112ce411f0 --- /dev/null +++ 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 index d9137eed42..28e471084d 100644 --- 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 index 0fd3b4f693..71dda598dc 100644 --- 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 index 5563e85c81..2feefda4c9 100644 --- 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 index 4dd091abab..b684f7be2b 100644 --- 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";