From 70d965e115bacda52c2e68a746f56abf5fe2ebe1 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Mon, 23 Dec 2019 10:08:54 +0000
Subject: [PATCH] [Monitor Dashboard | Trunk]: Add a new css class
 menu_on_hover to handle on hover item's width

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

diff --git a/src/app/stakeholder/stakeholder.component.html b/src/app/stakeholder/stakeholder.component.html
index f5075be..4615213 100644
--- a/src/app/stakeholder/stakeholder.component.html
+++ b/src/app/stakeholder/stakeholder.component.html
@@ -32,7 +32,7 @@
                 <div class="menu_title uk-width-expand">
                   {{topic.name}}
                 </div>
-                <div class="uk-width-1-6" (click)="$event.stopPropagation();$event.preventDefault()">
+                <div class="menu_on_hover" (click)="$event.stopPropagation();$event.preventDefault()">
                   <i class="material-icons onHover">more_vert</i>
                   <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                        class="uk-padding-remove-horizontal">
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index e172ccf..3f3599f 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -14,7 +14,7 @@
           <div class="menu_title uk-width-expand">
             {{stakeholder.topics[topicIndex].name.toUpperCase()}}
           </div>
-          <div class="menu_icon"
+          <div class="menu_on_hover"
                (click)="$event.stopPropagation();$event.preventDefault()">
             <i class="material-icons onHover md-color-white">more_vert</i>
             <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
@@ -45,7 +45,7 @@
             <div class="menu_title uk-width-expand">
               {{category.name}}
             </div>
-            <div class="uk-width-1-6"
+            <div class="menu_on_hover"
                  (click)="$event.stopPropagation();$event.preventDefault()">
               <i class="material-icons onHover">more_vert</i>
               <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
@@ -74,7 +74,7 @@
                   <div class="menu_title uk-width-expand">
                     {{subcategory.name}}
                   </div>
-                  <div class="uk-width-1-6"
+                  <div class="menu_on_hover"
                        (click)="$event.stopPropagation();$event.preventDefault()">
                     <i class="material-icons onHover">more_vert</i>
                     <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index cabf50b..b3c85da 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -62,6 +62,10 @@ html .dashboard {
   width: 30px;
 }
 
+.dashboard #sidebar_main .menu_section > ul > li > a > .menu_on_hover {
+  width: 40px;
+}
+
 .dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover {
   background-color: #F0F0F0;
   margin-right: 5px;
@@ -72,6 +76,10 @@ html .dashboard {
   color: rgba(0, 0, 0, 0.7);
 }
 
+.dashboard #sidebar_main .menu_section > ul li > a > .menu_on_hover {
+  width: 40px;
+}
+
 .dashboard #sidebar_main .menu_section .uk-dropdown {
   min-width: 150px;
 }