consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add padding to the whole header

Browse Source 
Instead of adding the padding to each individual element inside the
container, why not adding padding to the container itself? The answer is
"because we want the background of the children elements to take the
width of the whole screen". But this generates either HTML cluttered
with elements to add padding or repetitive padding definitions in the
CSS.

So now we only define the padding once, and when an element requires a
full width background or border, we use the `full-width-background`
mixin.

In this case the code is a bit more complex because the header is also
used in the dashboard and admin layouts:

* In the public layout, the body has a margin, so we include the mixin
  to take margin into account
* In the dashboard layout, the header itself has a margin, so we include
  the same mixin
* In the admin layout, the headet doesn't have a margin but gets the
  whole width, so in this case we include the mixin which dosen't take
  the margin into account

In the future, the idea is to apply this principle to the <body>
element and remove the `@include grid-column-gutter` in the CSS as well
as the `small-12 column` classes in the HTML.

Note we use the `calc()` function inside the mixin instead of using it
in the `$full-width-margin` variable. That way we avoid nested `calc()`
operations, which don't work in Internet Explorer.

Also note we're using `flex-grow: 1` to make one element appear on the
left of the screen and the other one on the right. It would be easier to
use `justify-content: space-between` (which is actually the default for
the top-bar element). However, there's a bug in Internet Explorer and
old versions of Firefox; they include the absolutely-positioned
`::before` element we use to set the full width background when
calculating where to position the elements. The bug was fixed in Firefox
52 (released in 2017).

Finally, we're removing the padding from our logo. In order to allow
logos like the new one and at the same time provide backwards
compatibility to logos in existing CONSUL installations, we're relaxing
the validation rule for the logo width.
This commit is contained in:
Javi Martín
2021-07-08 01:45:39 +02:00
parent a4eff3aa19
commit 701378d02c
10 changed files with 92 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/logo_header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

2
app/assets/stylesheets/_consul_settings.scss
View File

@@ -49,7 +49,7 @@ $show-header-for-stacked: true !default;
// --------------------
$body-margin: calc(50vw - #{$global-width / 2}) !default;
$full-width-margin: calc(#{$global-width / 2} - 50vw) !default;
$full-width-margin: #{$global-width / 2} - 50vw !default;
$base-font-size: rem-calc(17) !default;
$base-line: rem-calc(26) !default;

14
app/assets/stylesheets/admin.scss
View File

@@ -31,6 +31,14 @@ $table-header: #ecf1f6;
.admin {
@include admin-layout;
> header {
border-bottom: 1px solid #eee;
> * {
@include full-width-background($adjust-margin: false, $adjust-padding: true);
}
}
h2 {
font-weight: 100;
margin-bottom: $line-height;
@@ -56,17 +64,12 @@ $table-header: #ecf1f6;
background: #000;
color: $white;
&::before {
content: none;
}
a {
line-height: rem-calc($line-height * 1.5);
}
}
.top-bar {
border-bottom: 1px solid #eee;
height: auto;
padding-top: $line-height / 2;
@@ -118,7 +121,6 @@ $table-header: #ecf1f6;
margin-bottom: 0;
@include breakpoint(medium) {
margin-left: $line-height / 2;
margin-top: 0;
}

32
app/assets/stylesheets/layout.scss
View File

@@ -480,6 +480,7 @@ a {
body > header,
.wrapper > header {
@include grid-column-gutter;
margin-bottom: $line-height;
@include breakpoint(small down) {
@@ -519,9 +520,15 @@ body > header,
.public > .wrapper > header,
.proposal-dashboard > header {
@extend %brand-background;
@include full-width-border(bottom, 1px solid $border);
@include full-width-background;
> * {
@include full-width-background($adjust-padding: true);
}
.top-bar {
@extend %brand-background;
}
}
.proposal-dashboard > header {
@@ -534,16 +541,18 @@ body > header,
.top-bar {
background-color: inherit;
padding-bottom: 0;
padding-top: 0;
padding: 0;
@include breakpoint(medium) {
padding: 0;
justify-content: flex-start;
.top-bar-title {
flex-grow: 1;
}
}
ul {
background: none;
padding-right: rem-calc(15);
}
.menu > li {
@@ -603,6 +612,7 @@ body > header,
.top-bar-title {
line-height: $line-height;
margin-right: 0;
a img {
height: rem-calc(48);
@@ -649,9 +659,8 @@ body > header,
}
.top-links {
@include full-width-background;
@include grid-column-gutter;
background: $dark;
color: $white;
display: flex;
flex-wrap: wrap;
font-size: $small-font-size;
@@ -691,8 +700,6 @@ body > header,
}
.subnavigation {
@include full-width-background;
@include grid-column-gutter;
display: flex;
flex-direction: column;
@@ -787,11 +794,6 @@ body > header,
}
}
.subnavigation-with-top-links {
padding-left: 0;
padding-right: 0;
}
.top-bar-right {
.is-active {

33
app/assets/stylesheets/mixins/layouts.scss
View File

@@ -23,7 +23,8 @@
}
}
@mixin full-width-cover {
@mixin full-width-cover($adjust-margin: true, $adjust-padding: false) {
$global-padding: rem-calc(map-get($grid-column-gutter, medium)) / 2;
bottom: 0;
content: "";
display: block;
@@ -33,27 +34,45 @@
right: 0;
top: 0;
@if $adjust-padding {
$small-padding: rem-calc(map-get($grid-column-gutter, small)) / 2;
left: -$small-padding;
right: -$small-padding;
@include breakpoint(medium) {
left: -$global-padding;
right: -$global-padding;
}
}
@include breakpoint($global-width) {
left: $full-width-margin;
right: $full-width-margin;
@if $adjust-padding and $adjust-margin {
left: calc(#{$full-width-margin} - #{$global-padding});
right: calc(#{$full-width-margin} - #{$global-padding});
} @else if $adjust-margin {
left: calc(#{$full-width-margin});
right: calc(#{$full-width-margin});
}
}
}
@mixin full-width-background {
@mixin full-width-background($adjust-margin: true, $adjust-padding: false) {
position: relative;
&::before {
@include full-width-cover;
@include full-width-cover($adjust-margin: $adjust-margin, $adjust-padding: $adjust-padding);
background: inherit;
z-index: -1;
}
}
@mixin full-width-border($position, $border) {
@mixin full-width-border($position, $border, $adjust-margin: true, $adjust-padding: false) {
position: relative;
&::after {
@include full-width-cover;
@include full-width-cover($adjust-margin: $adjust-margin, $adjust-padding: $adjust-padding);
border-#{$position}: $border;
}
}

5
app/models/site_customization/image.rb
View File

@@ -43,7 +43,12 @@ class SiteCustomization::Image < ApplicationRecord
dimensions = Paperclip::Geometry.from_file(image.queued_for_write[:original].path)
if name == "logo_header"
errors.add(:image, :image_width, required_width: required_width) unless dimensions.width <= required_width
else
errors.add(:image, :image_width, required_width: required_width) unless dimensions.width == required_width
end
errors.add(:image, :image_height, required_height: required_height) unless dimensions.height == required_height
end
end

5
spec/factories/administration.rb
View File

@@ -57,6 +57,11 @@ FactoryBot.define do
body { "Some top links content" }
end
factory :site_customization_image, class: "SiteCustomization::Image" do
image { File.new("spec/fixtures/files/logo_header.png") }
name { "logo_header" }
end
factory :map_location do
latitude { 51.48 }
longitude { 0.0 }

BIN
spec/fixtures/files/logo_header-260x80.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
spec/fixtures/files/logo_header.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

29
spec/models/site_customization/image_spec.rb Normal file
View File

@@ -0,0 +1,29 @@
require "rails_helper"
describe SiteCustomization::Image do
describe "logo" do
it "is valid with a 260x80 image" do
image = build(:site_customization_image,
name: "logo_header",
image: File.new("spec/fixtures/files/logo_header-260x80.png"))
expect(image).to be_valid
end
it "is valid with a 223x80 image" do
image = build(:site_customization_image,
name: "logo_header",
image: File.new("spec/fixtures/files/logo_header.png"))
expect(image).to be_valid
end
it "is not valid with a 400x80 image" do
image = build(:site_customization_image,
name: "logo_header",
image: File.new("spec/fixtures/files/logo_email_custom.png"))
expect(image).not_to be_valid
end
end
end