From ecbe7acaa86984ee4256c986ebaf877fafb7d66c Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Mon, 11 Jan 2021 18:34:31 +0000
Subject: [PATCH] [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
---
 src/app/topic/topic.component.html        |  6 +++---
 src/assets/dashboard-theme/tabs-pills.css | 12 +++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 30d166b..7258028 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -103,7 +103,7 @@
     <nav>
       <div *ngIf="stakeholder.topics.length > 0 && 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">
             <li class="uk-visible-toggle uk-flex uk-flex-middle"
                 [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
@@ -148,7 +148,7 @@
       </div>
     </nav>
     <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"
                    let-subCategory let-i="index">
         <li [class.uk-active]="(subCategory.alias ===
@@ -189,7 +189,7 @@
             </span>
         </li>
       </ng-template>
-      <li class="uk-visible-toggle ignore">
+      <li class="uk-visible-toggle">
             <span (click)="editSubCategoryOpen(); $event.preventDefault()" class="clickable">
               <span class="uk-icon-button small portal-icon-button">
                 <icon name="add"></icon>
diff --git a/src/assets/dashboard-theme/tabs-pills.css b/src/assets/dashboard-theme/tabs-pills.css
index 85edf02..5075874 100644
--- a/src/assets/dashboard-theme/tabs-pills.css
+++ b/src/assets/dashboard-theme/tabs-pills.css
@@ -1,6 +1,8 @@
-.uk-subnav-pill:not(.ignore), .uk-tab:not(.ignore) {
-  flex-wrap: nowrap;
-  overflow-x: auto;
+@media only screen and (max-width: 959px) {
+  .uk-subnav-pill, .uk-tab {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
 }
 
 .uk-subnav-pill > * > a, .uk-subnav-pill > * > span > a {
@@ -18,6 +20,10 @@
   color: var(--text-color);
 }
 
+.uk-subnav-pill > li {
+  margin-bottom: 10px;
+}
+
 .uk-subnav-pill > li > a:hover, .uk-subnav-pill > li > span > a:hover {
   border-color: var(--secondary-color);
   color: var(--secondary-color) !important;