From e6b157914a8423496e30b93821e596eef522bb9f Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Fri, 27 Nov 2020 09:54:57 +0000
Subject: [PATCH] [Monitor Dashboard | Trunk]: Fix topics on admin

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59978 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/app.component.ts           |  4 ++--
 src/app/topic/topic.component.html | 27 ++++++++++++++++-----------
 src/assets/new.css                 |  9 ++++++++-
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a9449cf..d329db3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -113,11 +113,11 @@ export class AppComponent implements OnInit, OnDestroy {
       this.isViewPublic = (params['view'] == 'public');
     });
     this.layoutService.setOpen(false);
+    this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
+    this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
     this.subscriptions.push(this.params.subscribe(params => {
       if (this.paramsResolved) {
         this.loading = true;
-        this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
-        this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
         let isSearch = this.router.url.includes('search');
         if (params && params['stakeholder']) {
           // this.stakeholder = this.stakeholderService.stakeholder;
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 2bb3005..4084c77 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -18,15 +18,16 @@
                 <span *ngIf="topic.icon"></span>
                 <div class="uk-width-expand uk-position-relative uk-flex uk-flex-middle"
                      [class.uk-flex-center]="open">
-                  <span>
+                  <span class="uk-flex-none">
                     <ng-container *ngTemplateOutlet="visibilityOptions; context:
                     {i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}">
                     </ng-container>
                   </span>
-                  <span [class.uk-text-center]="open" [class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
+                  <span [class.uk-text-center]="open"
+                        [class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
                   <span class="uk-invisible-hover color"
                         (click)="$event.stopPropagation();$event.preventDefault()">
-                    <span class="uk-icon uk-position-center-right" uk-icon="more-vertical"></span>
+                    <span class="uk-icon more" uk-icon="more-vertical"></span>
                     <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false">
                       <ul class="uk-nav uk-dropdown-nav uk-list">
                         <li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
@@ -106,10 +107,12 @@
           <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">
-              <ng-container *ngTemplateOutlet="visibilityOptions; context:
+              <span class="uk-flex-none">
+                <ng-container *ngTemplateOutlet="visibilityOptions; context:
                     {i:i, type: 'cat',
                     visibility: stakeholder.topics[topicIndex].categories[i].visibility}">
-              </ng-container>
+                </ng-container>
+              </span>
               <a (click)="toggleCategory(i)">
                 <span class="title"> {{category.name}}</span>
               </a>
@@ -152,10 +155,12 @@
               stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)"
             class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
             <span>
-              <ng-container *ngTemplateOutlet="visibilityOptions; context:
-                {i:i, type: 'sub',
-                visibility: stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].visibility}">
-              </ng-container>
+              <span class="uk-flex-none">
+                <ng-container *ngTemplateOutlet="visibilityOptions; context:
+                  {i:i, type: 'sub',
+                  visibility: stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].visibility}">
+                </ng-container>
+              </span>
               <a (click)="chooseSubcategory(categoryIndex, i);$event.preventDefault()"
                  class="space">
                 <span>{{subCategory.name}}</span>
@@ -249,8 +254,8 @@
 
 
 <ng-template #visibilityOptions let-type="type" let-i="i" let-visibility="visibility">
-   <span class="uk-invisible-hover visibility small" (click)="$event.stopPropagation();$event.preventDefault()">
-      <span class="clickable">
+   <span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
+      <span class="clickable visibility small">
         <icon [name]="stakeholderUtils.visibilityIcon.get(visibility)" [ratio]="0.5"></icon>
       </span>
       <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
diff --git a/src/assets/new.css b/src/assets/new.css
index a8a62ae..6c4c65b 100644
--- a/src/assets/new.css
+++ b/src/assets/new.css
@@ -124,7 +124,7 @@
   transform: rotate(0deg);
   width: inherit;
   height: inherit;
-  margin: 0;
+  margin: 4px 0 0;
 }
 
 
@@ -221,6 +221,13 @@
   padding: 3px 2px;
 }
 
+.more {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  right: -30px;
+  top: 50%;
+}
+
 .descriptionIcon {
   position: absolute;
   bottom: 3px;