From d31d73c4e5843b01e64f3746a3045e6fe2b17729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 6 Jul 2021 02:05:44 +0200
Subject: [PATCH] Simplify HTML in top links

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).
---
 app/assets/stylesheets/layout.scss                 | 10 ++++------
 app/assets/stylesheets/layout/locale_switcher.scss |  1 -
 app/views/layouts/_admin_header.html.erb           | 10 ++++------
 app/views/layouts/_header.html.erb                 |  8 +++-----
 app/views/layouts/management.html.erb              |  4 +---
 5 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 760c89052..b270849a7 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -512,13 +512,8 @@ body > header,
   }
 
   .external-links {
-    float: none;
     padding: rem-calc(6) 0;
     text-align: center;
-
-    @include breakpoint(medium) {
-      float: right;
-    }
   }
 }
 
@@ -655,11 +650,14 @@ body > header,
 
 .top-links {
   @include full-width-background;
+  @include grid-column-gutter;
   background: $dark;
+  display: flex;
+  flex-wrap: wrap;
   font-size: $small-font-size;
 
   > :first-child {
-    @include grid-column-gutter;
+    flex-grow: 1;
   }
 
   a {
diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss
index 1625043bb..aedd5b909 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -1,5 +1,4 @@
 .locale {
-  float: left;
   margin-bottom: $line-height / 4;
   margin-top: $line-height / 4;
   position: relative;
diff --git a/app/views/layouts/_admin_header.html.erb b/app/views/layouts/_admin_header.html.erb
index 73f93c602..88e5e0ff8 100644
--- a/app/views/layouts/_admin_header.html.erb
+++ b/app/views/layouts/_admin_header.html.erb
@@ -1,12 +1,10 @@
 <header class="header">
   <div class="top-links">
-    <div class="expanded row">
-      <%= render "shared/locale_switcher" %>
+    <%= render "shared/locale_switcher" %>
 
-      <%= link_to root_path, class: "float-right" do %>
-        <%= t("admin.dashboard.index.back", org: setting["org_name"]) %>
-      <% end %>
-    </div>
+    <%= link_to root_path do %>
+      <%= t("admin.dashboard.index.back", org: setting["org_name"]) %>
+    <% end %>
   </div>
 
   <div class="expanded row admin-top-bar">
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 0cb2704e9..935df3640 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -4,11 +4,9 @@
   <% end %>
 
   <div class="top-links">
-    <div class="row">
-      <%= render "shared/locale_switcher" %>
-      <div class="hide-for-small-only">
-        <%= render "shared/top_links" %>
-      </div>
+    <%= render "shared/locale_switcher" %>
+    <div class="hide-for-small-only">
+      <%= render "shared/top_links" %>
     </div>
   </div>
 
diff --git a/app/views/layouts/management.html.erb b/app/views/layouts/management.html.erb
index 2c11dbfe1..1d427044c 100644
--- a/app/views/layouts/management.html.erb
+++ b/app/views/layouts/management.html.erb
@@ -10,9 +10,7 @@
   <body class="admin">
     <header class="header">
       <div class="top-links">
-        <div class="expanded row">
-          <%= render "shared/locale_switcher" %>
-        </div>
+        <%= render "shared/locale_switcher" %>
       </div>
 
       <div class="expanded row admin-top-bar">