From 732ad7fd6b0457bb78b5fbf1e642bbda531012e2 Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Fri, 27 Mar 2020 16:06:42 +0100
Subject: [PATCH 1/3] Improve styles for admin sidebar

Also add a little animation on arrow when menu opens
---
 app/assets/stylesheets/admin.scss  | 28 ++++++++++++++++++----------
 app/assets/stylesheets/layout.scss | 10 +++++-----
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index a5976750d..0b9c05bac 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -435,11 +435,11 @@ code {
     [class^="icon-"] {
       color: #fff;
       display: inline-block;
-      font-size: rem-calc(24);
+      font-size: rem-calc(20);
       line-height: $line-height;
-      padding: $line-height / 2 $line-height / 4;
-      padding-left: 0;
+      text-align: center;
       vertical-align: middle;
+      width: $line-height * 1.5;
     }
   }
 
@@ -458,13 +458,20 @@ code {
       border-left: 2px solid $sidebar-active;
       font-weight: bold;
     }
+
+    &[aria-expanded="true"] {
+
+      > a::after {
+        transform: rotate(180deg);
+      }
+    }
   }
 
   li a {
     color: #fff;
     display: block;
-    line-height: rem-calc(48);
-    padding-left: rem-calc(12);
+    line-height: $line-height * 2;
+    padding-left: $line-height / 4;
     vertical-align: top;
 
     &:hover {
@@ -478,12 +485,13 @@ code {
 
     > a::after {
       border: 0;
-      content: "\61" !important;
-      font-family: "icons" !important;
+      content: "\f078";
+      font-family: "Font Awesome 5 Free";
+      font-weight: bold;
       height: auto;
-      position: absolute !important;
-      right: 30px;
-      top: 6px !important;
+      position: absolute;
+      right: 24px;
+      transition: 0.25s;
     }
   }
 
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 153bf1638..1c31dea89 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -446,18 +446,18 @@ a {
 }
 
 .menu-and-content {
-  $side-menu-min-width: 250px;
+  $side-menu-min-width: rem-calc(240);
 
   @include breakpoint(medium) {
     display: flex;
 
     > nav {
-      flex: 25%;
+      flex: 20%;
       min-width: $side-menu-min-width;
 
       + * {
-        flex: 75%;
-        padding: $line-height !important;
+        flex: 80%;
+        padding: $line-height;
       }
     }
 
@@ -478,7 +478,7 @@ a {
       z-index: 12;
 
       + * {
-        padding: $line-height !important;
+        padding: $line-height;
       }
     }
 

From 133988591008757a0cc7ce46c8a6ca36b3960f3f Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Fri, 27 Mar 2020 16:07:02 +0100
Subject: [PATCH 2/3] Remove admin header box shadow

It has been removed to maintain consistency with the front views.
---
 app/assets/stylesheets/admin.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 0b9c05bac..1f502e9cd 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -63,10 +63,6 @@ $sidebar-active: #f4fcd0;
     color: #000;
     height: auto;
 
-    @include breakpoint(medium) {
-      box-shadow: 0 2px 2px #eee;
-    }
-
     @include breakpoint(small only) {
 
       .top-bar-left ul {

From c159f9c3b9ce08405a644fd4b9df883d6ce768aa Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Fri, 27 Mar 2020 16:12:51 +0100
Subject: [PATCH 3/3] Fix icon sortable styles

---
 app/assets/stylesheets/admin.scss | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 1f502e9cd..2803ccf86 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -364,26 +364,25 @@ $sidebar-active: #f4fcd0;
 }
 
 .icon-sortable {
-  font-family: "icons";
+  font-family: "Font Awesome 5 Free";
   font-size: $small-font-size;
-  padding-right: $line-height / 2;
   position: relative;
 
   &::before,
   &::after {
     left: 6px;
-    opacity: 0.25;
+    opacity: 0.5;
     position: absolute;
   }
 
   &::before {
-    content: "\57";
-    top: -2px;
+    content: "\f0d8";
+    bottom: 0;
   }
 
   &::after {
-    content: "\52";
-    bottom: -10px;
+    content: "\f0d7";
+    top: 0;
   }
 
   &.asc {