[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
This commit is contained in:
Konstantinos Triantafyllou 2019-12-04 10:08:11 +00:00
parent 563ecc6f7c
commit 2feb26dc63
3 changed files with 28 additions and 27 deletions

View File

@ -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">

View File

@ -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">

View File

@ -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);
}