From b50b7ad64adcbd34e5aab2cfd369dfb6967a71c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 28 Jan 2023 02:12:45 +0100
Subject: [PATCH] Adjust order of elements on small screens

We're changing the order of the elements in the HTML so the menu button
appears next to the menu it opens, with no logo between them, which IMHO
makes sense and makes it easier to understand the layout for people
using screen readers.

A small advantage of this approach is that on very narrow screens or
Consul applications having a very long word for "Menu", the menu button
appeared on top, the logo appeared below it, and the contents of the
menu appeared below the logo. Now the logo appears on top, the menu
button appears below it, and the contents of the menu appear below the
menu button.
---
 app/assets/stylesheets/layout.scss |  9 ++++-----
 app/views/layouts/_header.html.erb | 12 ++++++------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index f984b2626..e8484e498 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -572,8 +572,8 @@ body > header,
   display: flex;
 
   @include breakpoint(small only) {
+    flex-direction: row-reverse;
     flex-wrap: wrap;
-    justify-content: space-between;
 
     .responsive-menu {
       width: 100%;
@@ -582,15 +582,14 @@ body > header,
         display: inline-block;
       }
     }
-  }
 
-  @include breakpoint(medium) {
-    h1 {
-      flex-grow: 1;
+    [data-responsive-toggle] {
+      flex-grow: 1000;
     }
   }
 
   h1 {
+    flex-grow: 1;
     margin-bottom: 0;
 
     a img {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 1eec0d01d..24c200df7 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -11,6 +11,12 @@
   </div>
 
   <div class="top-bar">
+    <h1>
+      <%= link_to root_path, accesskey: "0" do %>
+        <%= image_tag(image_path_for("logo_header.png"), alt: setting["org_name"]) %>
+      <% end %>
+    </h1>
+
     <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
       <button type="button" class="menu-button" data-toggle>
         <span class="menu-icon"></span>
@@ -18,12 +24,6 @@
       </button>
     </span>
 
-    <h1>
-      <%= link_to root_path, accesskey: "0" do %>
-        <%= image_tag(image_path_for("logo_header.png"), alt: setting["org_name"]) %>
-      <% end %>
-    </h1>
-
     <div id="responsive-menu" class="responsive-menu">
       <%= render Layout::AccountMenuComponent.new(current_user) %>