From d774742bf5fcdbf50aaf4beb526b81981b71756c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 28 Jan 2021 21:22:39 +0100 Subject: [PATCH 1/6] Move sdg-colors to the right settings section We were adding it under the Foundation overrides section, but this variable has nothing to do with Foundation. --- app/assets/stylesheets/_consul_settings.scss | 40 ++++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index a5f20981e..c73542b4e 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -72,6 +72,26 @@ $outline-focus: 3px solid #ffbf47; $input-height: $line-height * 2; +$sdg-colors: ( + 1: #e5243b, + 2: #dda63a, + 3: #4c9f38, + 4: #c5192d, + 5: #ff3a21, + 6: #26bde2, + 7: #fcc30b, + 8: #a21942, + 9: #fd6925, + 10: #dd1367, + 11: #fd9d24, + 12: #bf8b2e, + 13: #3f7e44, + 14: #0a97d9, + 15: #56c02b, + 16: #00689d, + 17: #19486a +); + // 2. Foundation settings overrides // --------------------------------- @@ -127,23 +147,3 @@ $pagination-radius: $global-radius; $show-header-for-stacked: true; $tooltip-background-color: $brand; - -$sdg-colors: ( - 1: #e5243b, - 2: #dda63a, - 3: #4c9f38, - 4: #c5192d, - 5: #ff3a21, - 6: #26bde2, - 7: #fcc30b, - 8: #a21942, - 9: #fd6925, - 10: #dd1367, - 11: #fd9d24, - 12: #bf8b2e, - 13: #3f7e44, - 14: #0a97d9, - 15: #56c02b, - 16: #00689d, - 17: #19486a -); From 2215209ae4076e5dff5c439a5d08e5cd26ae8c5e Mon Sep 17 00:00:00 2001 From: taitus Date: Thu, 28 Jan 2021 10:56:51 +0100 Subject: [PATCH 2/6] Standardize icon size These icons share page with the social media icons (eg: ssb-twitter) in both the index and the show pages We believe we gain consistency if all the icons that appear are the same size. Pull request 4101 will use this width in social media icons as well. --- app/assets/stylesheets/_consul_settings.scss | 2 ++ app/assets/stylesheets/sdg/goals/icon.scss | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index c73542b4e..5a59a0449 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -72,6 +72,8 @@ $outline-focus: 3px solid #ffbf47; $input-height: $line-height * 2; +$icon-width: $line-height * 2; + $sdg-colors: ( 1: #e5243b, 2: #dda63a, diff --git a/app/assets/stylesheets/sdg/goals/icon.scss b/app/assets/stylesheets/sdg/goals/icon.scss index 7e87f92c3..6005f25cf 100644 --- a/app/assets/stylesheets/sdg/goals/icon.scss +++ b/app/assets/stylesheets/sdg/goals/icon.scss @@ -1,4 +1,4 @@ .sdg-goal-icon { min-width: 40px; - width: 4vw; + width: $icon-width; } From 0b84c0da01762cfab10e12aaa0e22f0929aba642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 28 Jan 2021 21:34:03 +0100 Subject: [PATCH 3/6] Improve margin rules in SDG icons We were using the classic approach of adding a margin-right property to all elements except the last one. This works great when all icons are displayed in one row. However, when they're displayed in several rows, there could be a scenario where the last row has more elements: element1 element2 element3 element4 element5 In the example above, `element3` does not fit in the first row because it's got a margin to its right. However, `element5` fits in the second row because the last element has now right margin. One option to fix this issue it using CSS `gap` property. However, at the time of writing, it's only supported by 70% of the browsers. So we're emulating the gap by giving a negative margin to the list equivalent to the margin of the first element. This idea is based on: https://coryrylan.com/blog/css-gap-space-with-flexbox The exception is the index page. Here the list of icons is centered with `margin: auto`, and so we cannot use negative margins. We're using the classic approach instead, which is fine because we define there are 6 icons per row. --- app/assets/stylesheets/mixins.scss | 19 ++++++++++--------- app/assets/stylesheets/sdg/goals/index.scss | 9 +++++---- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 3cf7945ff..e54f735fd 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -227,23 +227,24 @@ } } -%sdg-goal-list { +@mixin sdg-goal-list($spacing: 1ch) { display: flex; flex-wrap: wrap; list-style: none; - margin-bottom: 0; - margin-left: 0; + margin: -$spacing 0 $line-height / 3 -#{$spacing}; + width: calc(100% + #{$spacing}); li { - margin-bottom: 1ch; - margin-right: 1ch; - - &:last-child { - margin-right: 0; - } + margin-bottom: 0; + margin-left: $spacing; + margin-top: $spacing; } } +%sdg-goal-list { + @include sdg-goal-list; +} + %tags { margin-bottom: 0; margin-left: 0; diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index 82d8a5cd6..392b51c33 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -18,16 +18,17 @@ } .sdg-goal-list { - @extend %sdg-goal-list; + $spacing: 1vw; + + @include sdg-goal-list($spacing); @include grid-row; @include grid-column-gutter; + max-width: 40rem; + width: 100%; li { - $spacing: 1vw; - line-height: 0; - margin-bottom: $spacing; margin-left: $spacing / 2; margin-right: $spacing / 2; width: calc(100% / 6 - #{$spacing}); From d61d648dda2a5b03471ef7b254aa39b68a318ae9 Mon Sep 17 00:00:00 2001 From: taitus Date: Thu, 28 Jan 2021 11:06:02 +0100 Subject: [PATCH 4/6] Render all icons on one line in forms Show all icons of the RelatedListSelector component on one line in the forms. --- app/assets/stylesheets/_consul_settings.scss | 2 ++ app/assets/stylesheets/sdg/goals/icon.scss | 2 +- app/assets/stylesheets/sdg/related_list_selector.scss | 9 ++++++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 5a59a0449..05b1ee258 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -74,6 +74,8 @@ $input-height: $line-height * 2; $icon-width: $line-height * 2; +$sdg-icon-min-width: 40px; + $sdg-colors: ( 1: #e5243b, 2: #dda63a, diff --git a/app/assets/stylesheets/sdg/goals/icon.scss b/app/assets/stylesheets/sdg/goals/icon.scss index 6005f25cf..cbb303b48 100644 --- a/app/assets/stylesheets/sdg/goals/icon.scss +++ b/app/assets/stylesheets/sdg/goals/icon.scss @@ -1,4 +1,4 @@ .sdg-goal-icon { - min-width: 40px; + min-width: $sdg-icon-min-width; width: $icon-width; } diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index db8773324..a2de54bd5 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -13,9 +13,12 @@ } label + ul { - @extend %sdg-goal-list; + $spacing: 0.5%; + @include sdg-goal-list($spacing); li { + min-width: $sdg-icon-min-width; + width: calc(100% / 17 - #{$spacing}); &[aria-checked=true] img { opacity: 0.15; @@ -28,6 +31,10 @@ &:hover { cursor: pointer; } + + .sdg-goal-icon { + width: 100%; + } } } From adc66cb28e4b261fe6ec524d9e4b09e69babc17c Mon Sep 17 00:00:00 2001 From: taitus Date: Thu, 28 Jan 2021 10:31:36 +0100 Subject: [PATCH 5/6] Improve icons size on goals index We're also using a percentage to separate the icons, since using the viewport width causes strange result on screens where the element max-width (which is based in rem) is much smaller than the size of the window. --- app/assets/stylesheets/sdg/goals/index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index 392b51c33..b20bdcd35 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -18,13 +18,13 @@ } .sdg-goal-list { - $spacing: 1vw; + $spacing: 1.5%; @include sdg-goal-list($spacing); @include grid-row; @include grid-column-gutter; - max-width: 40rem; + max-width: 60rem; width: 100%; li { From cdfa23fc6f11650c0853f6139b8af61f12890260 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 29 Jan 2021 16:56:40 +0100 Subject: [PATCH 6/6] Adjust icon margins on small screens On these screens, sometimes the icons will be `$sdg-icon-min-width` wide, but the margins were not taking this into account. We can use CSS `max` function to set minimum margins just like we set minimum width. However, there are two things to take into account: * LibSass does not support these functions as it tries to use Sass own functionst at compile time, so we need to hack them writing `Max()` (which works in CSS because it is not case sensitive) * Not all browsers support it (90% at the time of writing), so we write the rules twice (the first time for browsers not supporting it); we could use `@supports` but then we would have to overwrite some of the rules in the `.sdg-goals-index .sdg-goal-list` selector using `!important` or adding a `@supports` clause there as well --- app/assets/stylesheets/mixins.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index e54f735fd..afd81ecd3 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -228,16 +228,24 @@ } @mixin sdg-goal-list($spacing: 1ch) { + $min-spacing: $sdg-icon-min-width / 10; + $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"}; + display: flex; flex-wrap: wrap; list-style: none; margin: -$spacing 0 $line-height / 3 -#{$spacing}; + margin-left: calc(-1 * #{$max-spacing}); + margin-top: calc(-1 * #{$max-spacing}); width: calc(100% + #{$spacing}); + width: calc(100% + #{$max-spacing}); li { margin-bottom: 0; margin-left: $spacing; + margin-left: $max-spacing; margin-top: $spacing; + margin-top: $max-spacing; } }