From 2feb26dc63930178b376b30d53347f63d850cc3c Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Wed, 4 Dec 2019 10:08:11 +0000
Subject: [PATCH] [Monitor Dashbboard]: Change menu items to have fix width

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57803 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../stakeholder/stakeholder.component.html    | 14 ++++-----
 src/app/topic/topic.component.html            | 30 +++++++++----------
 src/assets/theme-assets/dashboard-custom.css  | 11 +++----
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/app/stakeholder/stakeholder.component.html b/src/app/stakeholder/stakeholder.component.html
index 5eda56f..661e7a0 100644
--- a/src/app/stakeholder/stakeholder.component.html
+++ b/src/app/stakeholder/stakeholder.component.html
@@ -13,21 +13,21 @@
           class="submenu_trigger">
         <a href="#" (click)="analysisOpen = !analysisOpen; $event.preventDefault()">
           <span class="menu_icon"><i class="material-icons">donut_large</i></span>
-          <span class="menu_title">Analysis Indicators</span>
+          <span class="menu_title uk-width-expand">Analysis Indicators</span>
         </a>
         <ul [style.display]="(analysisOpen?'block':'none')">
           <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
             <li>
               <a [routerLink]="topic.alias">
-                <span *ngIf="topic.icon" class="menu_icon uk-margin-small-right"><i
+                <span *ngIf="topic.icon" class="menu_icon"><i
                   class="material-icons">{{topic.icon}}</i></span>
-                <div class="menu_title uk-inline">
+                <div class="menu_title uk-width-expand">
                   {{topic.name}}
-                  <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
-                          (click)="$event.stopPropagation();saveTopicOpen(editTopic, i); $event.preventDefault()">
-                    <i class="material-icons">more_horiz</i>
-                  </button>
                 </div>
+                <span class="uk-width-1-6 onHover"
+                        (click)="$event.stopPropagation();saveTopicOpen(editTopic, i); $event.preventDefault()">
+                  <i class="material-icons">more_horiz</i>
+                </span>
               </a>
               <div uk-drop="mode: none; offset: -2; delay-hide: 0; flip: false" #editTopic
                    class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 090688c..fd10759 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -11,13 +11,13 @@
       <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
         <a [routerLink]="'../'" class="md-color-white uk-flex uk-flex-middle">
           <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
-          <div class="menu_title uk-inline">
+          <div class="menu_title uk-width-expand">
             {{stakeholder.topics[topicIndex].name.toUpperCase()}}
-            <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
-                    (click)="$event.stopPropagation();editTopicOpen(editTopic);$event.preventDefault()">
-              <i class="material-icons md-color-white">more_horiz</i>
-            </button>
           </div>
+          <span class="uk-width-1-6 onHover"
+                  (click)="$event.stopPropagation();editTopicOpen(editTopic);$event.preventDefault()">
+            <i class="material-icons md-color-white">more_horiz</i>
+          </span>
         </a>
         <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic
              class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
@@ -75,13 +75,13 @@
           <a href="#" (click)="toggleCategory(i);hide(editCategory);$event.preventDefault()">
             <span *ngIf="category.icon" class="menu_icon"><i
               class="material-icons">{{category.icon}}</i></span>
-            <div class="menu_title uk-inline">
+            <div class="menu_title uk-width-expand">
               {{category.name}}
-              <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
-                      (click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
-                <i class="material-icons">more_horiz</i>
-              </button>
             </div>
+            <span class="uk-width-1-6 onHover"
+                    (click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
+              <i class="material-icons">more_horiz</i>
+            </span>
           </a>
           <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editCategory
                class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
@@ -133,13 +133,13 @@
                 <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
                 <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
                   class="material-icons">{{subcategory.icon}}</i></span>
-                  <div class="menu_title uk-inline">
+                  <div class="menu_title uk-width-expand">
                     {{subcategory.name}}
-                    <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
-                            (click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
-                      <i class="material-icons">more_horiz</i>
-                    </button>
                   </div>
+                  <span class="uk-width-1-6 onHover"
+                          (click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
+                    <i class="material-icons">more_horiz</i>
+                  </span>
                 </a>
                 <div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
                      class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index df2145f..bd17ad3 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -38,11 +38,7 @@ html .dashboard {
   font-weight: 700;
 }
 
-.dashboard #sidebar_main .uk-inline {
-  vertical-align: text-bottom;
-}
-
-.dashboard #sidebar_main .menu_section > ul li > a > .menu_icon {
+.dashboard #sidebar_main .menu_section > ul > li > a > .menu_icon {
   width: 30px;
 }
 
@@ -51,6 +47,11 @@ html .dashboard {
   color: rgba(0, 0, 0, 0.7);
 }
 
+.dashboard #sidebar_main .menu_section > ul li > a {
+  display: flex;
+  align-items: center;
+}
+
 body.dashboard {
   padding-top: var(--header-height);
 }