From 0eefc749156fd6b3c785671f9437ae1a5e351179 Mon Sep 17 00:00:00 2001 From: Pascal Barth Date: Thu, 22 Aug 2024 11:45:30 +0200 Subject: [PATCH] Fix SASS warning from code and revert to 1.77.6 waiting on bootstrap Our code is ready for 1.77.8 and the new rule https://sass-lang.com/d/mixed-decls Bootstrap isn't, so while waiting for them to update their SASS code, I've reverted SASS to 1.77.6, just prior to the rule being added --- package-lock.json | 8 ++++---- package.json | 2 +- src/modules/drawing/components/DrawingToolbox.vue | 2 +- .../components/styling/DrawingStyleIconSelector.vue | 7 +++---- .../backgroundSelector/BackgroundSelectorSquared.vue | 4 ++-- src/modules/menu/MenuModule.vue | 4 ++-- src/modules/menu/components/LayerCatalogueItem.vue | 4 ++-- src/scss/main.scss | 4 ++-- src/utils/components/ErrorWindow.vue | 11 +++++------ src/utils/components/ModalWithBackdrop.vue | 11 ++++++----- src/utils/components/SimpleWindow.vue | 10 +++++----- src/utils/components/WarningWindow.vue | 10 +++++----- tests/cypress/tests-e2e/reportProblem.cy.js | 2 +- 13 files changed, 39 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7523206c4..e3813737e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -95,7 +95,7 @@ "prettier": "^3.3.3", "prettier-plugin-jsdoc": "^1.3.0", "rimraf": "^5.0.10", - "sass": "^1.77.8", + "sass": "1.77.6", "start-server-and-test": "^2.0.5", "typescript": "^5.5.4", "vite": "^5.3.5", @@ -8718,9 +8718,9 @@ "dev": true }, "node_modules/sass": { - "version": "1.77.8", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", - "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "version": "1.77.6", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz", + "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", diff --git a/package.json b/package.json index ffd908fe2..de2dbdd78 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "prettier": "^3.3.3", "prettier-plugin-jsdoc": "^1.3.0", "rimraf": "^5.0.10", - "sass": "^1.77.8", + "sass": "1.77.6", "start-server-and-test": "^2.0.5", "typescript": "^5.5.4", "vite": "^5.3.5", diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue index 92065abed..0fc516ccd 100644 --- a/src/modules/drawing/components/DrawingToolbox.vue +++ b/src/modules/drawing/components/DrawingToolbox.vue @@ -248,10 +248,10 @@ $zindex-drawing-toolbox: -1; transition: opacity $animation-time; } &-closed { + transform: translate(0px, calc(-100% + #{$openCloseButtonHeight})); .drawing-toolbox-content { opacity: 0; } - transform: translate(0px, calc(-100% + #{$openCloseButtonHeight})); } &-disclaimer { display: block; diff --git a/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue b/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue index b24fa00fe..ff815ae28 100644 --- a/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue +++ b/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue @@ -200,18 +200,17 @@ export default { .marker-icon-select-box { max-height: 10rem; overflow-y: scroll; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + transition: max-height 0.3s linear; &.one-line { max-height: 2rem; overflow-y: hidden; } - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - transition: max-height 0.3s linear; .marker-icon-image { width: 2rem; height: 2rem; } - button { --bs-btn-padding-x: 0.25rem; } diff --git a/src/modules/map/components/footer/backgroundSelector/BackgroundSelectorSquared.vue b/src/modules/map/components/footer/backgroundSelector/BackgroundSelectorSquared.vue index 729302a6d..ce3803e8b 100644 --- a/src/modules/map/components/footer/backgroundSelector/BackgroundSelectorSquared.vue +++ b/src/modules/map/components/footer/backgroundSelector/BackgroundSelectorSquared.vue @@ -96,6 +96,8 @@ $square-button-radius: 8px; $opened-width: calc($square-button-width / 2.5); $cropper-opened-width: calc($opened-width - 2 * $bg-selector-button-border); border-radius: $square-button-radius; + transition: width $bg-selector-transition-duration; + $inner-radius: calc($square-button-radius - $bg-selector-button-border); &.opened { width: $opened-width; } @@ -108,8 +110,6 @@ $square-button-radius: 8px; width: $cropper-opened-width; } } - transition: width $bg-selector-transition-duration; - $inner-radius: calc($square-button-radius - $bg-selector-button-border); &-image-cropper { border-radius: $inner-radius; transition: all $bg-selector-transition-duration; diff --git a/src/modules/menu/MenuModule.vue b/src/modules/menu/MenuModule.vue index 982ca3a7d..b9af57069 100644 --- a/src/modules/menu/MenuModule.vue +++ b/src/modules/menu/MenuModule.vue @@ -143,16 +143,16 @@ $openCloseButtonHeight: 2.5rem; pointer-events: all; } &.desktop-mode { + max-width: $menu-tray-width; .menu-tray-content { transition: opacity $animation-time; } - max-width: $menu-tray-width; } &.desktop-menu-closed { + transform: translate(0px, calc(-100% + #{$openCloseButtonHeight})); .menu-tray-content { opacity: 0; } - transform: translate(0px, calc(-100% + #{$openCloseButtonHeight})); } .button-open-close-desktop-menu { pointer-events: all; diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue index 74c913aa9..311a0f7fd 100644 --- a/src/modules/menu/components/LayerCatalogueItem.vue +++ b/src/modules/menu/components/LayerCatalogueItem.vue @@ -337,11 +337,11 @@ function containsLayer(layers, searchText) { &-title { @extend .menu-title; cursor: pointer; + border-bottom-width: 1px; + border-bottom-color: $gray-400; &.active { color: $primary; } - border-bottom-width: 1px; - border-bottom-color: $gray-400; &.group { border-bottom-style: solid; } diff --git a/src/scss/main.scss b/src/scss/main.scss index c0fd1f44d..7bb476c14 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -8,10 +8,10 @@ @import '@/scss/tippy-theme'; body { - // preventing a long press to select the entire window/app, and all element of the UI in the process - @extend .no-ios-long-press-select; // disabling double tap = zoom the UI on iOS touch-action: manipulation; + // preventing a long press to select the entire window/app, and all element of the UI in the process + @extend .no-ios-long-press-select; } input, p, diff --git a/src/utils/components/ErrorWindow.vue b/src/utils/components/ErrorWindow.vue index 27f4d3d93..327bbeb1a 100644 --- a/src/utils/components/ErrorWindow.vue +++ b/src/utils/components/ErrorWindow.vue @@ -73,23 +73,22 @@ const emit = defineEmits(['close']) position: fixed; top: $top-margin; right: 4rem; - width: max-content; max-width: 400px; - max-height: calc(100vh - $top-margin); + @include respond-below(phone) { $top-margin: $header-height; - &.dev-disclaimer-present { - $top-margin: calc($header-height + $dev-disclaimer-height); - } - top: $top-margin; left: 50%; right: unset; transform: translate(-50%, 0%); max-height: calc(100vh - $top-margin); max-width: 100vw; + + &.dev-disclaimer-present { + $top-margin: calc($header-height + $dev-disclaimer-height); + } } .card-body { // Allow text selection diff --git a/src/utils/components/ModalWithBackdrop.vue b/src/utils/components/ModalWithBackdrop.vue index 4f0b0c3a7..eb8e357d2 100644 --- a/src/utils/components/ModalWithBackdrop.vue +++ b/src/utils/components/ModalWithBackdrop.vue @@ -151,6 +151,12 @@ export default { .card { width: max-content; max-width: 100vw; + // dvh takes into account the user interface in mobile browsers (with vh part of the modal is + // not visible if ui is shown). Is recognized by browsers from 2022 or newer. If the browser + // is older, 90vh will normally be used, which is a bit less clean but good enough. + max-height: 90vh; + max-height: 100dvh; + &:not(.modal-popup-fluid) { // only setting a width if the modal content shouldn't be fluid width: 80vw; @@ -160,11 +166,6 @@ export default { border-radius: unset; } } - // dvh takes into account the user interface in mobile browsers (with vh part of the modal is - // not visible if ui is shown). Is recognized by browsers from 2022 or newer. If the browser - // is older, 90vh will normally be used, which is a bit less clean but good enough. - max-height: 90vh; - max-height: 100dvh; @include respond-above(phone) { // But for desktop we let the size be dynamic with max to 90% of the view max-width: 80vw; diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue index 9a68861b0..94cdbb62f 100644 --- a/src/utils/components/SimpleWindow.vue +++ b/src/utils/components/SimpleWindow.vue @@ -70,16 +70,12 @@ const emit = defineEmits(['close']) position: fixed; top: $top-margin; right: 4rem; - width: max-content; max-width: 400px; - max-height: calc(100vh - $top-margin); + @include respond-below(phone) { $top-margin: $header-height; - &.dev-disclaimer-present { - $top-margin: calc($header-height + $dev-disclaimer-height); - } top: $top-margin; left: 50%; @@ -87,6 +83,10 @@ const emit = defineEmits(['close']) transform: translate(-50%, 0%); max-height: calc(100vh - $top-margin); max-width: 100vw; + + &.dev-disclaimer-present { + top: calc($top-margin + $dev-disclaimer-height); + } } .card-body { overflow-y: auto; diff --git a/src/utils/components/WarningWindow.vue b/src/utils/components/WarningWindow.vue index 6640fed15..c455f3cb2 100644 --- a/src/utils/components/WarningWindow.vue +++ b/src/utils/components/WarningWindow.vue @@ -70,16 +70,12 @@ const emit = defineEmits(['close']) position: fixed; top: $top-margin; right: 4rem; - width: max-content; max-width: 400px; - max-height: calc(100vh - $top-margin); + @include respond-below(phone) { $top-margin: $header-height; - &.dev-disclaimer-present { - $top-margin: calc($header-height + $dev-disclaimer-height); - } top: $top-margin; left: 50%; @@ -87,6 +83,10 @@ const emit = defineEmits(['close']) transform: translate(-50%, 0%); max-height: calc(100vh - $top-margin); max-width: 100vw; + + &.dev-disclaimer-present { + $top-margin: calc($header-height + $dev-disclaimer-height); + } } .card-body { // Allow text selection diff --git a/tests/cypress/tests-e2e/reportProblem.cy.js b/tests/cypress/tests-e2e/reportProblem.cy.js index 5d73e30ca..8f43928a1 100644 --- a/tests/cypress/tests-e2e/reportProblem.cy.js +++ b/tests/cypress/tests-e2e/reportProblem.cy.js @@ -72,7 +72,7 @@ describe('Testing the report problem form', () => { cy.log('It is not possible to report a problem without filling the message') cy.openMenuIfMobile() openForm() - cy.get('[data-cy="text-area-input"').should('be.empty') + cy.get('[data-cy="text-area-input"]').should('be.empty') cy.get('[data-cy="email-input"]').type(validEmail) cy.get('[data-cy="submit-button"]:visible').click() cy.get('[data-cy="email-input"]').should('have.class', 'is-valid')