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

Unify spacing styles in public and admin top bars

Browse Source 
The top bar padding was different on small screens when we were in the
admin section, so we're now applying the same padding everywhere.

Note we're still applying extra padding on medium/large screens because
in the public section we display our logo image, which has some blank
space. In the admin section we're emulating this blank space with
padding; we might change it in the future if we change our logo.

Also note we're using `0.8rem` instead of `$line-height / 2`. The reason
is tricky: there's a spec testing the reorder feature with drag and drop
in the poll questions answers administration, and that test fails when
the drop space is right at the bottom of the screen, which is what
happens when we use the `$line-height / 2` padding. A proper solution
would be to remove the inaccessible drag and drop feature and use a
different method to reorder the answers.
This commit is contained in:
Javi Martín
2023-02-16 15:29:27 +01:00
parent 27d9859674
commit f8df90010e
2 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -530,12 +530,6 @@ body > header,
.top-bar { .top-bar {
@include background-with-text-contrast($main-header, [main-header, brand]); @include background-with-text-contrast($main-header, [main-header, brand]);
padding-bottom: $topbar-padding;
padding-top: $topbar-padding;
h1 {
line-height: $line-height;
}
} }
} }
@@ -550,6 +544,8 @@ body > header,
.top-bar { .top-bar {
align-items: center; align-items: center;
display: flex; display: flex;
padding-bottom: $topbar-padding;
padding-top: $topbar-padding;
@include breakpoint(small only) { @include breakpoint(small only) {
flex-direction: row-reverse; flex-direction: row-reverse;
@@ -570,6 +566,7 @@ body > header,
h1 { h1 {
flex-grow: 1; flex-grow: 1;
line-height: $line-height;
margin-bottom: 0; margin-bottom: 0;
a img { a img {

13
app/assets/stylesheets/layout/admin_header.scss
View File

@@ -15,8 +15,6 @@
} }
.top-bar { .top-bar {
padding-top: $line-height / 2;
@include breakpoint(small only) { @include breakpoint(small only) {
.account-menu { .account-menu {
@@ -39,16 +37,16 @@
} }
} }
@include breakpoint(medium) {
padding-bottom: 0.8rem;
padding-top: 0.8rem;
}
[class^="icon-"] { [class^="icon-"] {
font-size: $base-font-size; font-size: $base-font-size;
} }
h1 { h1 {
margin-top: $line-height / 2;
@include breakpoint(medium) {
margin-top: 0;
}
small { small {
color: inherit; color: inherit;
@@ -61,7 +59,6 @@
font-family: "Lato" !important; font-family: "Lato" !important;
font-size: rem-calc(24); font-size: rem-calc(24);
font-weight: lighter; font-weight: lighter;
line-height: 1;
} }
} }
} }