From 2b98571bc583d9f8269d2b2520f3152371b1b2a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 26 Jul 2023 04:33:00 +0200 Subject: [PATCH 1/2] Bump foundation-sites from 6.6.2 to 6.7.5 Note that the sticky plugin no longer works with `data-top-anchor="0"`. Quoting from the Foundation documentation: > It's important to note that sticky requires a bit of developer input > to work properly. (...) It's also important to set the minimum > top-anchor point to 1px, otherwise it'll never stick! Also note that the foundation-sites package already depends on the motion-ui package, so we don't have to explicitly include this dependency anymore. Since now we're using Dart Sass, we can upgrade to motion-ui 2.0.5. Since this new version already defines variables before using `!global` with them, we can remove the changes we did in commit 1e1edc02e. Finally, note we aren't removing the "upgrade Foundation" part of the comment in `config/initializers/sass.rb` because we're still getting one Dart Sass warning due to Foundation's code: ``` Deprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be by the ser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) $divisor: abs($divisor); ``` This warning will be removed when we upgrade to Foundation 6.8.1. We aren't upgrading to that version now for the same reason we don't upgrade two minor Rails versions at once: it would increase the chance of breaking something. --- app/assets/stylesheets/_consul_settings.scss | 12 --------- app/views/proposals/_support_status.html.erb | 2 +- package-lock.json | 28 ++++++++++---------- package.json | 5 ++-- 4 files changed, 17 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 8f9ba72b1..b413cca08 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -6,7 +6,6 @@ // 1. Foundation settings overrides // 2. CONSUL DEMOCRACY variables // 3. Foundation overrides depending on CONSUL DEMOCRACY variables -// 4. Foundation fixes // 1. Foundation settings overrides // --------------------------------- @@ -164,14 +163,3 @@ $tab-item-padding: $line-height * 0.5 0 !default; $tab-content-border: $border !default; $tooltip-background-color: $brand !default; - -// 4. Foundation fixes -// ------------------- - -$alert-color: null !default; -$primary-color: null !default; -$secondary-color: null !default; -$success-color: null !default; -$warning-color: null !default; -$-zf-bp-value: null !default; -$-zf-size: null !default; diff --git a/app/views/proposals/_support_status.html.erb b/app/views/proposals/_support_status.html.erb index a5a0b961a..0e2a5f286 100644 --- a/app/views/proposals/_support_status.html.erb +++ b/app/views/proposals/_support_status.html.erb @@ -8,7 +8,7 @@ data-sticky data-stick-to="bottom" data-sticky-on="small" - data-top-anchor="0" + data-top-anchor="1" data-btm-anchor="sticky_stop" data-check-every="0">
diff --git a/package-lock.json b/package-lock.json index 197a87071..3531f2452 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,14 +7,13 @@ "name": "consuldemocracy", "dependencies": { "blueimp-file-upload": "^9.34.0", - "foundation-sites": "^6.6.2", + "foundation-sites": "^6.7.5", "jquery": "^3.7.1", "jquery-ui": "^1.13.2", "jquery-ujs": "^1.2.3", "leaflet": "^1.9.4", "leaflet.markercluster": "^1.5.3", - "markdown-it": "^12.3.2", - "motion-ui": "^2.0.3" + "markdown-it": "^12.3.2" }, "devDependencies": { "@stylistic/stylelint-plugin": "^2.1.0", @@ -584,16 +583,16 @@ "dev": true }, "node_modules/foundation-sites": { - "version": "6.6.2", - "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.6.2.tgz", - "integrity": "sha512-fGdJVYodUxUCbdNDuNTXFIpEWAD+9yl0uLkkX8/rRHmK8/EYqQnRAGnmPADDhMKLZ+fJuSGheEcnSM2imgk3Wg==", + "version": "6.7.5", + "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.7.5.tgz", + "integrity": "sha512-MEjAENdF/IV2XQvlQmg20o+iDTyyWu0N/j440e8fKbEylbKxARzgg5S7vcnxtjukC1Lqg+rRm7ZDSSyGhVVoUQ==", "engines": { - "node": ">=8.4.0", - "npm": ">=2.14.2" + "node": ">=12.0" }, "peerDependencies": { - "jquery": ">=2.2.0", - "what-input": ">=4.1.0" + "jquery": ">=3.6.0", + "motion-ui": "latest", + "what-input": ">=5.2.10" } }, "node_modules/glob-parent": { @@ -975,11 +974,12 @@ } }, "node_modules/motion-ui": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/motion-ui/-/motion-ui-2.0.3.tgz", - "integrity": "sha512-f9xzh/hbZTUYjk4M7y1aDcsiPTfqUbuvCv/+If05TSIBEJMu3hGBU+YSe9csQPP7WBBHXxjossEygM/TJo2enw==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/motion-ui/-/motion-ui-2.0.5.tgz", + "integrity": "sha512-MJs4dS7/bSnJ92X5IB4bTIif6SwqwEDbX1F/eiUGSzIVhVTl4UqD8xr8ygg01dXZrpPrDjjUNoVkB8vT+PaY/g==", + "peer": true, "peerDependencies": { - "jquery": ">=2.2.0" + "jquery": ">=3.6.0" } }, "node_modules/ms": { diff --git a/package.json b/package.json index 8d5387db8..49c861e2d 100644 --- a/package.json +++ b/package.json @@ -2,14 +2,13 @@ "name": "consuldemocracy", "dependencies": { "blueimp-file-upload": "^9.34.0", - "foundation-sites": "^6.6.2", + "foundation-sites": "^6.7.5", "jquery": "^3.7.1", "jquery-ui": "^1.13.2", "jquery-ujs": "^1.2.3", "leaflet": "^1.9.4", "leaflet.markercluster": "^1.5.3", - "markdown-it": "^12.3.2", - "motion-ui": "^2.0.3" + "markdown-it": "^12.3.2" }, "devDependencies": { "@stylistic/stylelint-plugin": "^2.1.0", From 39c4d0c6d41e938540f898eb3a25da4cc988c5a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 1 Apr 2024 23:34:29 +0200 Subject: [PATCH 2/2] Override Foundation's pow() function Foundation added compatibility with Dart Sass by implementing a `divide` function and using it instead of `/` to perform divisions [1]. However, this made CSS compilation much slower, with the cause being the usage of the `divide` function inside Foundation's recursive `nth-root` and `pow` functions. Since the `nth-root` function is only called by the `pow` function, overriding the `pow` function so it uses the `math.pow` function provided by Dart Sass solves the issue. [1] Pull request 12241 in https://github.com/foundation/foundation-sites --- app/assets/stylesheets/functions/pow.scss | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 app/assets/stylesheets/functions/pow.scss diff --git a/app/assets/stylesheets/functions/pow.scss b/app/assets/stylesheets/functions/pow.scss new file mode 100644 index 000000000..68f297677 --- /dev/null +++ b/app/assets/stylesheets/functions/pow.scss @@ -0,0 +1,5 @@ +@use "sass:math"; + +@function pow($base, $exponent, $prec: 16) { + @return math.pow($base, $exponent); +}