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

Simplify HTML in top links

Browse Source 
In the case of the public layout, the row element was originally there
so the content of the top links had a maximum width. Since now the body
has that maximum width, we no longer need the row element.

In the other layouts I guess the row elements were added because there
were float elements inside them. We can use a flexbox layout instead and
these elements are no longer necessary. This also makes the layout more
robust when there isn't enough space on one line for both the language
selector and the external links.

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`. 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).
This commit is contained in:
Javi Martín
2021-07-06 02:05:44 +02:00
parent 8a3b9f6abf
commit d31d73c4e5
5 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -512,13 +512,8 @@ body > header,
} }
.external-links { .external-links {
float: none;
padding: rem-calc(6) 0; padding: rem-calc(6) 0;
text-align: center; text-align: center;
@include breakpoint(medium) {
float: right;
}
} }
} }
@@ -655,11 +650,14 @@ body > header,
.top-links { .top-links {
@include full-width-background; @include full-width-background;
@include grid-column-gutter;
background: $dark; background: $dark;
display: flex;
flex-wrap: wrap;
font-size: $small-font-size; font-size: $small-font-size;
> :first-child { > :first-child {
@include grid-column-gutter; flex-grow: 1;
} }
a { a {

1
app/assets/stylesheets/layout/locale_switcher.scss
View File

@@ -1,5 +1,4 @@
.locale { .locale {
float: left;
margin-bottom: $line-height / 4; margin-bottom: $line-height / 4;
margin-top: $line-height / 4; margin-top: $line-height / 4;
position: relative; position: relative;

10
app/views/layouts/_admin_header.html.erb
View File

@@ -1,12 +1,10 @@
<header class="header"> <header class="header">
<div class="top-links"> <div class="top-links">
<div class="expanded row"> <%= render "shared/locale_switcher" %>
<%= render "shared/locale_switcher" %>
<%= link_to root_path, class: "float-right" do %> <%= link_to root_path do %>
<%= t("admin.dashboard.index.back", org: setting["org_name"]) %> <%= t("admin.dashboard.index.back", org: setting["org_name"]) %>
<% end %> <% end %>
</div>
</div> </div>
<div class="expanded row admin-top-bar"> <div class="expanded row admin-top-bar">

8
app/views/layouts/_header.html.erb
View File

@@ -4,11 +4,9 @@
<% end %> <% end %>
<div class="top-links"> <div class="top-links">
<div class="row"> <%= render "shared/locale_switcher" %>
<%= render "shared/locale_switcher" %> <div class="hide-for-small-only">
<div class="hide-for-small-only"> <%= render "shared/top_links" %>
<%= render "shared/top_links" %>
</div>
</div> </div>
</div> </div>

4
app/views/layouts/management.html.erb
View File

@@ -10,9 +10,7 @@
<body class="admin"> <body class="admin">
<header class="header"> <header class="header">
<div class="top-links"> <div class="top-links">
<div class="expanded row"> <%= render "shared/locale_switcher" %>
<%= render "shared/locale_switcher" %>
</div>
</div> </div>
<div class="expanded row admin-top-bar"> <div class="expanded row admin-top-bar">