From d3a4a7bca393d6f0760cd086edf71bca58720f98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 31 May 2021 01:15:49 +0200
Subject: [PATCH 1/3] Fix line-height in admin menu items

When items went over multiple lines, the distance between their lines
was the same as the distance between one element and another one. This
made it hard to differentiate how many elements there were.

Using a padding to separate the contents of one element and the contents
of the next one solves the issue.
---
 app/assets/stylesheets/admin/menu.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index f0d407add..963018683 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -142,8 +142,7 @@
   li a {
     color: inherit;
     display: block;
-    line-height: $line-height * 2;
-    padding-left: $line-height / 4;
+    padding: $line-height / 2 $line-height / 4;
     vertical-align: top;
 
     &:hover {

From e241bab1303efb701660400659513a8dc2b4f8d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 27 Aug 2021 00:47:53 +0200
Subject: [PATCH 2/3] Fix accordion icon overlap in admin menu

Since the icon was absolutely positioned, in some languages it
overlapped with the text.

Using a flex layout solves this issue. It also improves the appearance
of elements whose text spans over multiple lines; previously the second
line would go under their section icon.

We're also using the `$global-left` variable so the icon is properly
displayed in languages written from right to left. We could use the
`margin-inline-start` property instead, but it isn't universally
supported in every browser yet.

Since the layout is now incompatible with the old (and obsolete) way to
add icons to the menu (using classes which would use the
`[class^="icon-"]` selector), we're removing this code.
---
 app/assets/stylesheets/admin/menu.scss   | 36 +++++++++++-------------
 app/assets/stylesheets/mixins/icons.scss |  3 +-
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index 963018683..cb913aeb8 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -7,13 +7,20 @@
   ul {
     list-style-type: none;
     margin-bottom: 0;
-    margin-left: 0;
+    margin-#{$global-left}: 0;
     padding: 0;
   }
 
   > ul > li a {
+    display: flex;
     font-weight: bold;
 
+    &::before,
+    &::after {
+      flex: 1em 0 0;
+      margin-top: 0.1em;
+    }
+
     @mixin icon($name, $style) {
       @include has-fa-icon($name, $style);
 
@@ -22,15 +29,6 @@
       }
     }
 
-    [class^="icon-"] {
-      display: inline-block;
-      font-size: rem-calc(20);
-      line-height: $line-height;
-      text-align: center;
-      vertical-align: middle;
-      width: $line-height * 1.5;
-    }
-
     &.booths-link {
       @include icon(archive, solid);
     }
@@ -142,7 +140,7 @@
   li a {
     color: inherit;
     display: block;
-    padding: $line-height / 2 $line-height / 4;
+    padding: $line-height / 2;
     vertical-align: top;
 
     &:hover {
@@ -154,15 +152,13 @@
 
   .is-accordion-submenu-parent {
 
-    > a::after {
-      border: 0;
-      content: "\f078";
-      font-family: "Font Awesome 5 Free";
-      font-weight: bold;
-      height: auto;
-      position: absolute;
-      right: 24px;
-      transition: 0.25s;
+    > a {
+      @include has-fa-icon(chevron-down, solid, after);
+
+      &::after {
+        margin-#{$global-left}: auto;
+        transition: 0.25s;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index b5d2a93c1..a06306930 100644
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -17,8 +17,7 @@
 
 %admin-menu-icon {
   font-size: rem-calc(20);
-  margin-left: rem-calc(8);
-  margin-right: rem-calc(10);
+  margin-#{$global-right}: rem-calc(10);
 }
 
 $font-awesome-icons: (

From d232e8cdf960a62ae45c34f332df0f954bdf8bd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 27 Aug 2021 01:10:52 +0200
Subject: [PATCH 3/3] Reduce width of the admin menu on large screens

On very large screens, the admin menu had a lot of blank space for
languages where all sections had short names (like English). This was
inconvenient because the icon to open a submenu was far from its
associated menu item.

Using the `max-content` value for the `max-width` property, we reduce
the amount of blank space in these cases.
---
 app/assets/stylesheets/admin/menu.scss | 1 +
 app/assets/stylesheets/layout.scss     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index cb913aeb8..a626b625a 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -176,6 +176,7 @@
 
     a {
       font-weight: normal;
+      margin-#{$global-right}: 0;
     }
 
     .is-active {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 6f96b03fe..1b363327a 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -460,6 +460,7 @@ button,
     > nav {
       flex: 20%;
       min-width: $side-menu-min-width;
+      max-width: max-content;
 
       + * {
         flex: 80%;