From 8c62240a403dd8a592eac78d565b185b3b1043c0 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 9 Feb 2023 11:43:46 +0200
Subject: [PATCH] Change number card for mobiles. Dashboard: Make menu_section
 independent class, hide sidebar in mobile

---
 less/dashboard.less | 216 ++++++++++++++++++++++----------------------
 less/general.less   |  19 +++-
 2 files changed, 124 insertions(+), 111 deletions(-)

diff --git a/less/dashboard.less b/less/dashboard.less
index 696f3c2..9afd1d5 100644
--- a/less/dashboard.less
+++ b/less/dashboard.less
@@ -68,6 +68,106 @@
 @dashboard-pages: #page_content, openaire-user  > user > div, openaire-error  > div;
 @dashboard-elements: #page_content .message, bottom > div;
 
+.menu_section {
+  margin-left: @dashboard-menu-section-margin;
+  position: relative;
+  font-size: @dashboard-menu-section-font-size;
+
+  & > ul > li {
+
+    & > a {
+      position: relative;
+      padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
+      line-height: @dashboard-menu-section-item-line-height;
+
+      &:not(.uk-flex) {
+        display: block;
+      }
+
+      &.uk-flex {
+        & > [class*="uk-width-expand"] {
+          flex: 1 !important;
+        }
+      }
+
+      & .menu-icon {
+        display: block;
+        padding: @dashboard-menu-section-icon-padding;
+        border-radius: @dashboard-menu-section-icon-border-radius;
+        background-color: transparent;
+        color: @dashboard-menu-section-icon-color;
+      }
+    }
+
+    &.uk-parent {
+      & > a {
+        padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
+
+        &::after {
+          color: @dashboard-menu-section-item-parent-icon-color;
+        }
+
+        &:not(.uk-flex)::after {
+          position: absolute;
+          right: (@dashboard-menu-section-item-padding-horizontal/2);
+          top: 50%;
+          transform: translate(-50%, -50%);
+          line-height: (@dashboard-menu-section-item-line-height - 10px);
+        }
+      }
+
+      & .uk-nav-sub {
+        margin-right: @dashboard-menu-section-sublist-margin-right;
+        padding-left: @dashboard-menu-section-sublist-padding-left;
+        position: relative;
+
+        & a {
+          border-radius: @dashboard-menu-section-sublist-item-border-radius;
+          padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal;
+        }
+
+        & > li:hover > a {
+          background-color: @dashboard-menu-section-sublist-item-background-hover;
+          color: @dashboard-menu-section-sublist-item-color-active;
+        }
+
+        & > li.uk-active > a {
+          background-color: @dashboard-menu-section-sublist-item-background-active;
+          color: @dashboard-menu-section-sublist-item-color-hover;
+        }
+
+        &:before {
+          left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
+          border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
+        }
+      }
+
+    }
+
+    &:hover:not(.uk-active) > a {
+      color: @dashboard-menu-section-item-color-hover;
+
+      & .menu-icon {
+        color: @dashboard-menu-section-item-color-hover;
+      }
+    }
+
+    &.uk-active > a {
+      color: @dashboard-menu-section-item-color-active;
+
+      & .menu-icon {
+        background-color: @dashboard-primary-background;
+        background-image: @dashboard-primary-gradient;
+        color: @dashboard-primary-inverse-color;
+      }
+    }
+  }
+
+  &.mobile {
+
+  }
+}
+
 .sidebar_main_swipe {
   #sidebar_main {
     #sidebar_toggle {
@@ -124,100 +224,6 @@
       -moz-transition: width @dashboard-transition-delay linear;
       -o-transition: width @dashboard-transition-delay linear;
       overflow-y: auto;
-
-      & .menu_section {
-        margin-left: @dashboard-menu-section-margin;
-        position: relative;
-        font-size: @dashboard-menu-section-font-size;
-
-        & > ul > li {
-
-          & > a {
-            position: relative;
-            padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
-            line-height: @dashboard-menu-section-item-line-height;
-
-            &:not(.uk-flex) {
-              display: block;
-            }
-
-            & .menu-icon {
-              display: block;
-              padding: @dashboard-menu-section-icon-padding;
-              border-radius: @dashboard-menu-section-icon-border-radius;
-              background-color: transparent;
-              color: @dashboard-menu-section-icon-color;
-            }
-          }
-
-          &.uk-parent {
-            & > a {
-              padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
-
-              & > .uk-flex {
-                margin-right: @dashboard-menu-section-item-padding-horizontal;
-              }
-
-              &::after {
-                color: @dashboard-menu-section-item-parent-icon-color;
-              }
-
-              &:not(.uk-flex)::after {
-                position: absolute;
-                right: (@dashboard-menu-section-item-padding-horizontal/2);
-                top: 50%;
-                transform: translate(-50%, -50%);
-                line-height: (@dashboard-menu-section-item-line-height - 10px);
-              }
-            }
-
-            & .uk-nav-sub {
-              margin-right: @dashboard-menu-section-sublist-margin-right;
-              padding-left: @dashboard-menu-section-sublist-padding-left;
-              position: relative;
-
-              & a {
-                border-radius: @dashboard-menu-section-sublist-item-border-radius;
-                padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal;
-              }
-
-              & > li:hover > a {
-                background-color: @dashboard-menu-section-sublist-item-background-hover;
-                color: @dashboard-menu-section-sublist-item-color-active;
-              }
-
-              & > li.uk-active > a {
-                background-color: @dashboard-menu-section-sublist-item-background-active;
-                color: @dashboard-menu-section-sublist-item-color-hover;
-              }
-
-              &:before {
-                left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding;
-                border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border;
-              }
-            }
-
-          }
-
-          &:hover:not(.uk-active) > a {
-            color: @dashboard-menu-section-item-color-hover;
-
-            & .menu-icon {
-              color: @dashboard-menu-section-item-color-hover;
-            }
-          }
-
-          &.uk-active > a {
-            color: @dashboard-menu-section-item-color-active;
-
-            & .menu-icon {
-              background-color: @dashboard-primary-background;
-              background-image: @dashboard-primary-gradient;
-              color: @dashboard-primary-inverse-color;
-            }
-          }
-        }
-      }
     }
   }
 
@@ -232,6 +238,10 @@
   #page_content {
     .set-blur-background(@dashboard-page-content-background, 80%);
 
+    .uk-slider-arrow, .uk-icon-button {
+      background: @dashboard-page-content-background;
+    }
+
     .message {
       top: 50%;
       left: 50%;
@@ -249,21 +259,11 @@
       }
 
       &.uk-sticky {
-        &.uk-active:not(:has(*:last-child.uk-tab)) {
-          border-bottom: @dashboard-page-content-sticky-border-width solid @dashboard-page-content-sticky-border;
-        }
-
-        &:has(*:last-child.uk-tab) {
-          & .header , & .actions {
-            border-bottom: @dashboard-page-content-sticky-border-width solid @dashboard-page-content-sticky-border;
-          }
-        }
-
         & .uk-tab {
           margin-bottom: 0;
         }
 
-        & *:last-child.uk-tab:before {
+        &.uk-active *:last-child.uk-tab:before {
           content: none;
         }
       }
@@ -363,12 +363,12 @@
   }
 
   @media (max-width: @breakpoint-small - 1px) {
-    #sidebar_main #sidebar_content {
-      width: @dashboard-sidebar-mini-width !important;
+    #sidebar_main #sidebar_content, #sidebar_toggle {
+      display: none !important;
     }
 
     @{dashboard-pages}, @{dashboard-elements} {
-      padding-left: @dashboard-sidebar-mini-width !important;
+      padding-left: 0 !important;
     }
 
     #page_content .message {
diff --git a/less/general.less b/less/general.less
index 793ced9..449f797 100644
--- a/less/general.less
+++ b/less/general.less
@@ -206,17 +206,30 @@ noscript, ol, section, table, tfoot, ul, video;
   &.number-card {
     border-bottom: @general-number-card-border-width solid transparent;
     position: relative;
-    height: @general-number-card-height;
 
     &::before {
       content: '';
       position: absolute;
       background: @general-number-card-border;
+      top: 0;
+      width: @general-number-card-border-width;
       bottom: 0;
-      right: 0;
       left: 0;
-      height: @general-number-card-border-width;
       margin-bottom: -@general-number-card-border-width;
+      border-radius: 50px 0 0 50px;
+    }
+  }
+}
+
+@media (min-width: @breakpoint-medium) {
+  .uk-card.number-card {
+    height: @general-number-card-height;
+
+    &::before {
+      right: 0;
+      top: unset;
+      width: auto;
+      height: @general-number-card-border-width;
       border-radius: 0 0 50px 50px;
     }
   }