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
geoadmin · Aug 22, 2024 · 0eefc74 · 0eefc74
1 parent 54a765c
commit 0eefc74
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -70,23 +70,23 @@ 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: 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
@@ -70,23 +70,23 @@ 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/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')