[Monitor Dashboard | Trunk]: Fix paddings and widths of dashboard structure for mobiles

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59968 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.component.ts

@@ -127,14 +127,18 @@ export class AppComponent implements OnInit, OnDestroy {
                 this.buildMenu();
                 this.loading = false;
               } else {
+                this.stakeholder = null;
                 LinksResolver.resetProperties();
                 this.navigateToError();
                 this.buildMenu();
                 this.loading = false;
               }
             }, error => {
+              this.stakeholder = null;
               LinksResolver.resetProperties();
-              this.navigateToError();
+              if(error.status === 404)  {
+                this.navigateToError();
+              }
               this.buildMenu();
               this.loading = false;
             }));

src/app/manageStakeholders/manageStakeholders.component.css

@@ -1,5 +1,5 @@
 .uk-card {
-  min-height: 150px;
+  min-height: 230px;
 }
 
 .uk-card-body {

src/app/manageStakeholders/manageStakeholders.component.html

@@ -1,13 +1,13 @@
 <div page-content>
   <div header>
     <ul *ngIf="isCurator()" class="uk-tab customTabs admin" uk-tab>
-      <li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('all')"><span class="title">All</span></a></li>
-      <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a>
+      <li [class.uk-active]="tab === 'all'"><a (click)="changeTab('all')"><span class="title">All</span></a></li>
+      <li [class.uk-active]="tab === 'templates'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a>
       </li>
-      <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('profiles')"><span
+      <li [class.uk-active]="tab === 'profiles'"><a (click)="changeTab('profiles')"><span
           class="title">Profiles</span></a></li>
     </ul>
-    <div class="uk-grid uk-margin-medium" uk-grid>
+    <!--<div class="uk-grid uk-margin-medium" uk-grid>
       <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
         <div>
           <div dashboard-input [formInput]="filters.get('status')"
@@ -20,7 +20,7 @@
           <div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile" icon="search"></div>
         </div>
       </div>
-    </div>
+    </div>-->
   </div>
   <div inner>
     <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
@@ -29,7 +29,7 @@
     <div *ngIf="!loading">
       <div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-medium-top">
         <h6 class="uk-text-bold">Profile Templates</h6>
-        <div class="uk-grid uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match" uk-grid
+        <div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid
              uk-height-match="target: .name;">
           <ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
             <ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
@@ -42,7 +42,7 @@
       </div>
       <div *ngIf="tab != 'templates' && isManager()" class="uk-margin-large-top">
         <h6 class="uk-text-bold">Profiles</h6>
-        <div class="uk-grid uk-grid-match uk-child-width-1-4@m uk-child-width-1-3@s" uk-grid uk-grid
+        <div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid
              uk-height-match="target: .name;">
           <ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
             <ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
@@ -109,7 +109,7 @@
         <div class="name uk-width-2-3@l">
           {{stakeholder.name}}
         </div>
-        <div *ngIf="stakeholder.logoUrl" class="logo uk-margin-medium-top">
+        <div *ngIf="stakeholder.logoUrl" class="logo uk-margin-top uk-margin-bottom">
           <img *ngIf="stakeholder.isUpload" [src]="properties.utilsService + '/download/' + stakeholder.logoUrl">
           <img *ngIf="!stakeholder.isUpload" [src]="stakeholder.logoUrl">
         </div>

src/assets/dashboard-theme/structure.css

@@ -35,7 +35,6 @@
 
 .sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle {
   left: var(--sidebar-mini-width);
-
 }
 
 .sidebar_main_swipe #sidebar_switcher_toggle {
@@ -44,6 +43,7 @@
 
 #sidebar_main .menu_section {
   min-height: 30vh;
+  padding: 0 10px;
 }
 
 #sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li,  #sidebar_main .special_section  ul:not(.uk-dropdown-nav) > li {
@@ -171,6 +171,30 @@
   padding: 50px 90px 90px;
 }
 
+@media only screen and (max-width: 639px){
+  :root {
+    --sidebar-mini-width: 100px;
+  }
+
+  #page_content_inner {
+    padding: 50px 45px 90px;
+  }
+
+  #page_content_header {
+    padding: 0 45px;
+  }
+
+  .sidebar_mini #page_content_header {
+    width: calc(100vw - var(--sidebar-mini-width) - 50px);
+  }
+}
+
+.uk-navbar-center:not(:only-child) {
+  max-width: 50%;
+  text-align: center;
+  padding-left: calc(var(--sidebar-mini-width)/2);
+}
+
 navbar > *, openaire-error > *, openaire-user> user > * {
   background-color: var(--background-color);
 }

src/assets/dashboard-theme/text.css

@@ -43,3 +43,14 @@ body {
   font-size: 24px;
   color: var(--text-color);
 }
+
+@media only screen and (max-width: 639px) {
+  :root {
+    --font-size: 14px;
+    --small-font-size: 12px;
+  }
+
+  .uk-logo {
+    font-size: 18px;
+  }
+}