MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard | Trunk]: Css changes on pills 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60212 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2021-01-11 18:34:31 +00:00
parent 549763c5df
commit ecbe7acaa8
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/topic/topic.component.html
View File

@ -103,7 +103,7 @@
<nav> <nav>
<div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]"> <div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
<ul *ngIf="stakeholder.topics[topicIndex]" <ul *ngIf="stakeholder.topics[topicIndex]"
class="customTabs uk-tab ignore admin uk-flex uk-flex-middle" visibility="true"> class="customTabs uk-tab admin uk-flex uk-flex-middle" visibility="true">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index"> <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle uk-flex uk-flex-middle" <li class="uk-visible-toggle uk-flex uk-flex-middle"
[class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias"> [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
@ -148,7 +148,7 @@
</div> </div>
</nav> </nav>
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]" <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
visibility="true" class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle"> visibility="true" class="uk-subnav uk-subnav-pill subCategoriesTabs admin uk-flex uk-flex-middle">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
let-subCategory let-i="index"> let-subCategory let-i="index">
<li [class.uk-active]="(subCategory.alias === <li [class.uk-active]="(subCategory.alias ===
@ -189,7 +189,7 @@
</span> </span>
</li> </li>
</ng-template> </ng-template>
<li class="uk-visible-toggle ignore"> <li class="uk-visible-toggle">
<span (click)="editSubCategoryOpen(); $event.preventDefault()" class="clickable"> <span (click)="editSubCategoryOpen(); $event.preventDefault()" class="clickable">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>

12
src/assets/dashboard-theme/tabs-pills.css
View File

@ -1,6 +1,8 @@
.uk-subnav-pill:not(.ignore), .uk-tab:not(.ignore) { @media only screen and (max-width: 959px) {
flex-wrap: nowrap; .uk-subnav-pill, .uk-tab {
overflow-x: auto; flex-wrap: nowrap;
overflow-x: auto;
}
} }
.uk-subnav-pill > * > a, .uk-subnav-pill > * > span > a { .uk-subnav-pill > * > a, .uk-subnav-pill > * > span > a {
@ -18,6 +20,10 @@
color: var(--text-color); color: var(--text-color);
} }
.uk-subnav-pill > li {
margin-bottom: 10px;
}
.uk-subnav-pill > li > a:hover, .uk-subnav-pill > li > span > a:hover { .uk-subnav-pill > li > a:hover, .uk-subnav-pill > li > span > a:hover {
border-color: var(--secondary-color); border-color: var(--secondary-color);
color: var(--secondary-color) !important; color: var(--secondary-color) !important;