From 9cc4d5272356b4acef4f46b55345a1e0af3440c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 5 Jul 2021 23:01:44 +0200 Subject: [PATCH] Use a global maximum width for the element We weren't using a global maximum width for the element because we wanted the background of some elements to cover the whole screen. If the body didn't cover the whole screen, then we would have to find a way to extend the background beyond the limits of the body. Elements can take the whole screen width using a width of 100 viewport width (vw) units, which weren't as widely supported when CONSUL development started as they are today. However, there's a gotcha will vw units; they don't take into account the vertical scrollbars browsers add when scroll is needed. That means that an element with a width of 100vw would cause a *horizontal* scrollbar when the vertical scrollbar appears on the screen. So approaches like this one wouldn't work: ``` body { margin-left: auto; margin-right: auto; max-width: $global-width; } @mixin full-background-width { &::before { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } ``` We could add `overflow-x: hidden` to the body to avoid the horizontal scrollbar. However, on certain screens sizes that could cause some content to disappear if there isn't enough horizontal space for all the elements. If we tried some other solution based on using `max-width` with `margin: auto` on the element, it would result in a body having a fixed width and a variable margin (depending on whether there's a scrollbar). So it wouldn't be possible to set a negative margin on child elements based on the margin of the body, because that margin would be different depending on the existence of a scrollbar. So, instead, we're adding a fixed margin to the body, which depends on the viewport width and the font size of the element. With this approach, when a vertical scrollbar appears, the margin of the is still the same; what changes is its width. That means we can set a negative margin on child elements based on the margin of the . No horizontal scrollbar will appear. Note we're slightly duplicating the code by using two variables (`$body-margin` and `$full-width-margin`) to do the same thing. We could simply use `$body-margin` and then use `calc(-1 * #{$body-margin})` in our `full-width-background` mixin. We aren't doing so because some old versions of the Android browser and Internet Explorer can't handle this operation. Since our whole layout is based on these properties, in this case supporting old browsers is quite important. For similar reasons we're using a breakpoint instead of using the `max()` function like: `Max(0px, calc(50vw - #{$global-width / 2}))`. At the time of writing, `max()` is only supported in about 91% of the browsers. With this change, we no longer need to add `row` elements to make sure we don't exceed the maximum width; the element takes care of that. Also note banners sometimes have a full background and sometimes they don't, depending on which page they appear. We're adding specific rules for them. Finally, the code for full width borders is a bit brittle; sometimes we want the border to cover an element, and sometimes we don't. For example, we had to slightly change the way the border of the "tabs" in legislation processes is rendered. Without these changes, the borders wouldn't overlap as we intended. We also had to add a `z-index` to navigation links so their bottom outline is visible when they're focused. The recommendations have a border with the same color as the background so it's painted on top of the border of the `help-header` section. --- app/assets/stylesheets/_consul_settings.scss | 4 ++ app/assets/stylesheets/admin.scss | 4 ++ app/assets/stylesheets/budgets/phases.scss | 15 ++++--- app/assets/stylesheets/layout.scss | 39 ++++++++++++++++++- .../stylesheets/legislation_process.scss | 18 ++------- app/assets/stylesheets/mixins/layouts.scss | 35 +++++++++++++++++ app/assets/stylesheets/pages.scss | 5 +++ app/assets/stylesheets/participation.scss | 19 +++++++-- 8 files changed, 111 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 6f74c0800..0410655ab 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -16,6 +16,7 @@ $white: #fdfdfd !default; $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default; $global-radius: rem-calc(3) !default; +$global-width: rem-calc(1200) !default; $header-styles: ( small: ( @@ -47,6 +48,9 @@ $show-header-for-stacked: true !default; // 2. CONSUL variables // -------------------- +$body-margin: calc(50vw - #{$global-width / 2}) !default; +$full-width-margin: calc(#{$global-width / 2} - 50vw) !default; + $base-font-size: rem-calc(17) !default; $base-line: rem-calc(26) !default; $line-height: rem-calc(24) !default; diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 4d784f85d..4cce7b027 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -56,6 +56,10 @@ $table-header: #ecf1f6; background: #000; color: $white; + &::before { + content: none; + } + a { line-height: rem-calc($line-height * 1.5); } diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index be9d2f9b0..3b1b8af18 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -1,13 +1,10 @@ .budget-phases { + @include grid-column-gutter; + @include full-width-background; + @include full-width-border(top, 2px solid $border); background: $light; - border-top: 2px solid $border; padding-bottom: $line-height * 2; - > * { - @include grid-column-gutter; - @include grid-row; - } - h2 { font-size: $base-font-size; text-align: center; @@ -182,10 +179,12 @@ margin-top: $line-height; @include breakpoint(medium) { - @include grid-row-nest; + $gap: rem-calc(map-get($grid-column-gutter, "medium")); + display: flex; + margin-left: -$gap; > * { - @include grid-column; + margin-left: $gap; width: 50%; } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index cc1a67a38..c857d782b 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -52,6 +52,13 @@ body { font-size: $base-font-size; min-height: 100%; + &.public { + @include breakpoint($global-width) { + margin-left: $body-margin; + margin-right: $body-margin; + } + } + > .wrapper { flex-grow: 1; } @@ -518,7 +525,16 @@ body > header, .public > .wrapper > header, .proposal-dashboard > header { @extend %brand-background; - border-bottom: 1px solid $border; + @include full-width-border(bottom, 1px solid $border); + @include full-width-background; +} + +.proposal-dashboard > header { + + @include breakpoint($global-width) { + margin-left: $body-margin; + margin-right: $body-margin; + } } .top-bar { @@ -638,6 +654,7 @@ body > header, } .top-links { + @include full-width-background; background: $dark; font-size: $small-font-size; @@ -676,6 +693,7 @@ body > header, } .subnavigation { + @include full-width-background; @include breakpoint(medium) { background: $body-background; @@ -713,12 +731,17 @@ body > header, } } + &:focus { + z-index: 1; + } + &.is-active { color: #fff; @include breakpoint(medium) { @include brand-text; border-bottom: 2px solid; + margin-bottom: 1px; } } } @@ -858,6 +881,10 @@ footer { margin-top: $line-height * 2; padding-bottom: $line-height; padding-top: $line-height; + + .public & { + @include full-width-background; + } } .subfooter { @@ -2033,6 +2060,12 @@ table { // ----------- .banner { + @include full-width-background; + + .debates-list &::before, + .proposals-list &::before { + content: none; + } a > * { @include grid-row; @@ -2192,8 +2225,10 @@ table { } .recommended-index { + @include full-width-background; + @include full-width-border(bottom, 1px solid #eee); + @include full-width-border(top, 1px solid #fafafa); background: #fafafa; - border-bottom: 1px solid #eee; margin-bottom: $line-height; margin-top: rem-calc(-25); padding: $line-height 0 $line-height / 2; diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index d94e68320..b911a8c7b 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -15,6 +15,7 @@ // -------- .legislation-hero { + @include full-width-background; .title { font-weight: bold; @@ -30,7 +31,7 @@ // ---------------------------------- .legislation-process-list { - border-bottom: 1px solid $border; + @include full-width-border(bottom, 1px solid $border); } .key-dates { @@ -111,19 +112,8 @@ @include breakpoint(large) { background: none; border: 1px solid $border; - border-bottom: 0; - - &::after { - border-bottom: 1px solid #fefefe; - bottom: -1px; - left: 0; - position: absolute; - width: 100%; - } - } - - &::after { - content: ""; + border-bottom-color: $body-background; + z-index: 1; } } } diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index f4656f424..b2b2a073c 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -23,6 +23,41 @@ } } +@mixin full-width-cover { + bottom: 0; + content: ""; + display: block; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + + @include breakpoint($global-width) { + left: $full-width-margin; + right: $full-width-margin; + } +} + +@mixin full-width-background { + position: relative; + + &::before { + @include full-width-cover; + background: inherit; + z-index: -1; + } +} + +@mixin full-width-border($position, $border) { + position: relative; + + &::after { + @include full-width-cover; + border-#{$position}: $border; + } +} + @mixin full-width-form { .globalize-languages { max-width: none; diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss index eea332e34..c279698cf 100644 --- a/app/assets/stylesheets/pages.scss +++ b/app/assets/stylesheets/pages.scss @@ -21,8 +21,13 @@ } &.light { + @include full-width-background; background: #ecf0f1; } + + &.header-card { + @include full-width-background; + } } .lead { diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 1382fe970..1a1228b3c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -530,6 +530,7 @@ } .filter-subnav { + @include full-width-background; background: $highlight; margin-bottom: $line-height; padding-top: $line-height / 4; @@ -900,8 +901,9 @@ .help-header, .section-header { + @include full-width-background; + @include full-width-border(bottom, 1px solid #eee); background: #fafafa; - border-bottom: 1px solid #eee; margin-top: -$line-height; margin-bottom: $line-height; padding-bottom: $line-height / 2; @@ -1020,6 +1022,7 @@ } .search-results-summary { + @include full-width-background; background: $highlight; margin-bottom: $line-height; margin-top: -$line-height; @@ -1141,6 +1144,7 @@ .budget-header { @extend %brand-background; + @include full-width-background; margin-top: -$line-height; min-height: $line-height * 25; padding-bottom: $line-height; @@ -1210,8 +1214,8 @@ } .jumbo-budget { + @include full-width-border(bottom, 2px solid $border); background: $body-background; - border-bottom: 2px solid $border; &.budget-heading { min-height: $line-height * 10; @@ -1442,6 +1446,7 @@ .budgets-stats { .header { + @include full-width-background; background: $highlight; } @@ -1562,12 +1567,12 @@ // ---------------------- .polls-show-header { + @include full-width-background; background: #fafafa; } .poll-more-info, .poll-more-info-answers { - border-top: 1px solid #eee; .read-more { margin-bottom: $line-height; @@ -1579,9 +1584,15 @@ } } +.poll-more-info { + border-top: 1px solid #eee; +} + .poll-more-info-answers { + @include full-width-background; + @include full-width-border(top, 1px solid #eee); + @include full-width-border(bottom, 1px solid #eee); background: #fafafa; - border-bottom: 1px solid #eee; .column:nth-child(odd) { border-right: 2px solid;