[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
This commit is contained in:
Konstantinos Triantafyllou 2019-12-23 10:08:54 +00:00
parent f5b746b8ba
commit 70d965e115
3 changed files with 12 additions and 4 deletions

View File

@ -32,7 +32,7 @@
<div class="menu_title uk-width-expand"> <div class="menu_title uk-width-expand">
{{topic.name}} {{topic.name}}
</div> </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> <i class="material-icons onHover">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">

View File

@ -14,7 +14,7 @@
<div class="menu_title uk-width-expand"> <div class="menu_title uk-width-expand">
{{stakeholder.topics[topicIndex].name.toUpperCase()}} {{stakeholder.topics[topicIndex].name.toUpperCase()}}
</div> </div>
<div class="menu_icon" <div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover md-color-white">more_vert</i> <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" <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"> <div class="menu_title uk-width-expand">
{{category.name}} {{category.name}}
</div> </div>
<div class="uk-width-1-6" <div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i> <i class="material-icons onHover">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <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"> <div class="menu_title uk-width-expand">
{{subcategory.name}} {{subcategory.name}}
</div> </div>
<div class="uk-width-1-6" <div class="menu_on_hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<i class="material-icons onHover">more_vert</i> <i class="material-icons onHover">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false" <div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"

View File

@ -62,6 +62,10 @@ html .dashboard {
width: 30px; 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 { .dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover {
background-color: #F0F0F0; background-color: #F0F0F0;
margin-right: 5px; margin-right: 5px;
@ -72,6 +76,10 @@ html .dashboard {
color: rgba(0, 0, 0, 0.7); 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 { .dashboard #sidebar_main .menu_section .uk-dropdown {
min-width: 150px; min-width: 150px;
} }