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] 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: (