From 398b80d2280248e9a7dba038d614a0d06afe612d Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 17 Jun 2022 02:57:56 +0300
Subject: [PATCH] Change all offcanvas with uikit class. FIx search filter
 checkbox and radio label. Modal: Add container to avoid insert class at DOM

---
 .../result/resultLanding.component.html       |  8 +--
 .../notification-sidebar.component.css        | 60 -------------------
 .../notification-sidebar.component.less       | 34 +++++++++++
 .../notifications-sidebar.component.ts        | 15 +++--
 .../searchUtils/newSearchPage.component.html  |  2 +-
 .../searchUtils/searchFilter.component.html   |  8 +--
 sharedComponents/navigationBar.component.html |  9 +--
 sharedComponents/navigationBar.module.ts      |  3 +-
 utils/modal/alert.ts                          |  5 +-
 9 files changed, 59 insertions(+), 85 deletions(-)
 delete mode 100644 notifications/notifications-sidebar/notification-sidebar.component.css
 create mode 100644 notifications/notifications-sidebar/notification-sidebar.component.less

diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index fe90e220..6226127d 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -406,17 +406,17 @@
         <!-- right box/ sidebar-->
         <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
           <div id="right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
-               class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
+               class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
                (click)="rightSidebarOffcanvasClicked = true;">
             <icon name="more" ratio="1.5" customClass="uk-text-primary" flex="true" visuallyHidden="sidebar"></icon>
           </div>
-          <div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
+          <div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
             <div class="uk-offcanvas-bar">
-              <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button"
+              <button class="uk-offcanvas-close uk-close uk-icon" type="button"
                       (click)="rightSidebarOffcanvasClicked = false">
                 <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
               </button>
-              <div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding">
+              <div *ngIf="rightSidebarOffcanvasClicked">
                 <ng-container *ngTemplateOutlet="right_column"></ng-container>
               </div>
             </div>
diff --git a/notifications/notifications-sidebar/notification-sidebar.component.css b/notifications/notifications-sidebar/notification-sidebar.component.css
deleted file mode 100644
index c2b6f233..00000000
--- a/notifications/notifications-sidebar/notification-sidebar.component.css
+++ /dev/null
@@ -1,60 +0,0 @@
-#notifications-switcher {
-  top: 480px !important;
-}
-
-#notifications .notification-list {
-  padding: 45px 0 45px 45px;
-}
-
-#notifications .notification-list:not(:last-child) {
-  height: 440px;
-  border-bottom: 1px solid #E4E4E4;
-}
-
-#notifications .notification-list ul {
-  overflow: auto;
-  padding: 10px 45px 10px 0;
-  height: calc(100% - 77px);
-}
-
-#notifications .notification-list ul > li:nth-child(n+2){
-  margin-top: 15px;
-}
-
-#notifications .notify {
-  padding: 20px 45px;
-}
-
-#notifications .notification {
-  padding: 45px 45px;
-  overflow: auto;
-}
-
-/*#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link {*/
-/*  color: var(--secondary-color);*/
-/*}*/
-
-#notifications .uk-offcanvas-bar button.uk-button-link:disabled {
-  color: var(--secondary-color);
-  opacity: 0.5;
-}
-
-/*#notifications .uk-offcanvas-bar .uk-button-secondary {*/
-/*  background-color: var(--secondary-color);*/
-/*  color: #fff;*/
-/*  border: 1px solid transparent;*/
-/*}*/
-
-/*#notifications .uk-offcanvas-bar .uk-button-secondary:focus, #notifications .uk-offcanvas-bar .uk-button-secondary:hover {*/
-/*  background-color: transparent;*/
-/*  color: #4687e6;*/
-/*  border-color: #4687e6;*/
-/*}*/
-
-#notifications .uk-offcanvas-bar .uk-button-secondary:disabled {
-  background-color: transparent;
-  color: #bfbfbf;
-  border: 1px solid #ededed;
-  background-image: none;
-  box-shadow: none;
-}
diff --git a/notifications/notifications-sidebar/notification-sidebar.component.less b/notifications/notifications-sidebar/notification-sidebar.component.less
new file mode 100644
index 00000000..48553951
--- /dev/null
+++ b/notifications/notifications-sidebar/notification-sidebar.component.less
@@ -0,0 +1,34 @@
+@import "~src/assets/openaire-theme/less/_import-variables";
+
+#notifications-switcher {
+  top: 480px !important;
+}
+
+#notifications .notification-list {
+  padding: @global-medium-gutter 0 @global-medium-gutter @global-medium-gutter;
+}
+
+#notifications .notification-list:not(:last-child) {
+  height: 45vh;
+  border-bottom: @global-border-width solid @global-border;
+  overflow: hidden;
+}
+
+#notifications .notification-list ul {
+  overflow: auto;
+  padding: 20px @global-medium-gutter 20px 0;
+  height: calc(100% - 77px);
+}
+
+#notifications .notification-list ul > li:nth-child(n+2){
+  margin-top: 15px;
+}
+
+#notifications .notify {
+  padding: 20px @global-medium-gutter;
+}
+
+#notifications .notification {
+  padding: @global-medium-gutter @global-medium-gutter;
+  overflow: auto;
+}
diff --git a/notifications/notifications-sidebar/notifications-sidebar.component.ts b/notifications/notifications-sidebar/notifications-sidebar.component.ts
index 0eaabd94..94df2e22 100644
--- a/notifications/notifications-sidebar/notifications-sidebar.component.ts
+++ b/notifications/notifications-sidebar/notifications-sidebar.component.ts
@@ -11,18 +11,17 @@ declare var UIkit;
 @Component({
   selector: 'notification-sidebar',
   template: `
-    <div id="notifications-switcher" uk-toggle href="#notifications" class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle">
+    <div id="notifications-switcher" uk-toggle="" href="#notifications" class="uk-offcanvas-switcher uk-flex uk-flex-middle uk-flex-center">
       <icon name="mail" ratio="1.5" customClass="uk-text-background" flex="true" visuallyHidden="Notifications"></icon>
-      <span [class.uk-hidden]="unreadCount === 0" id="notifications-count" class="offcanvas-count uk-flex uk-flex-middle uk-flex-center">
+      <span [class.uk-hidden]="unreadCount === 0" class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
         {{unreadCount}}
       </span>
     </div>
-    <div id="notifications" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
-      <div class="uk-offcanvas-bar">
-        <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
+    <div id="notifications" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
+      <div class="uk-offcanvas-bar uk-padding-remove">
+        <button class="uk-offcanvas-close uk-close uk-icon" type="button">
           <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
         </button>
-
         <ng-template [ngIf]="!notification">
           <div class="notification-list uk-position-relative">
             <h4>Notifications</h4>
@@ -43,7 +42,7 @@ declare var UIkit;
                         </p>
                       </div>
                       <div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
-                        <icon *ngIf="!notification.read" name="bullet" ratio="0.6" visuallyHidden="unread"></icon>
+                        <icon *ngIf="!notification.read" name="circle" ratio="0.6" visuallyHidden="unread"></icon>
                       </div>
                     </div>
                     <span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span>
@@ -76,7 +75,7 @@ declare var UIkit;
       </div>
     </div>
   `,
-  styleUrls: ['notification-sidebar.component.css'],
+  styleUrls: ['notification-sidebar.component.less'],
   encapsulation: ViewEncapsulation.None
 })
 export class NotificationsSidebarComponent implements OnInit, OnDestroy {
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index ca0d8923..943754ed 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -201,7 +201,7 @@
               <div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
                 <div class="uk-offcanvas-bar">
                   <a class="uk-offcanvas-close uk-icon uk-close" (click)="showOffCanvas=false">
-                    <icon name="close" visuallyHidden="close Filters"></icon>
+                    <icon name="close" ratio="1.5" visuallyHidden="close filters"></icon>
                   </a>
                   <div *ngIf="showOffCanvas">
                     <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index a923ec76..b593f672 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -41,7 +41,7 @@
 <ng-template #input_label let-filter="filter" let-value="value">
   <span *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'" class="uk-flex uk-flex-middle"
         [class.uk-disabled]="isDisabled || (showResultCount && value.number === 0)">
-    <span>
+    <label>
       <input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
              [disabled]="isDisabled || (showResultCount && value.number === 0)"
              [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)"/>
@@ -49,17 +49,17 @@
              [disabled]="isDisabled || (showResultCount && value.number === 0)"
              [name]="filter.filterId" [value]="value.id" [(ngModel)]="filter.radioValue"
              (ngModelChange)="uniqueFilterChange(value)"/>
-    </span>
-    <span class="uk-margin-small-left">
+       <span class="uk-margin-small-left">
        <span *ngIf="filter.type && filter.type == 'boolean' else noboolean">
          {{value.name=='true'?'Yes':'No'}}
         </span>
           <ng-template  #noboolean>
           {{_formatName(value)}}
           </ng-template>
-      
+
       <span *ngIf="showResultCount">({{value.number|number}})</span>
     </span>
+    </label>
   </span>
 </ng-template>
 <ng-template #input_label_wrapper let-filter="filter" let-value="value">
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 2c3a84d4..7f8c1004 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -18,17 +18,18 @@
           <ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
         </div>
         <div *ngIf="!onlyTop || userMenu" class="uk-navbar-right">
-          <a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
+          <a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="">
             <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
           </a>
         </div>
       </nav>
     </div>
     <div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
-         class="uk-offcanvas uk-hidden@m"
-         style="z-index:9999;">
+         class="uk-offcanvas uk-hidden@m">
       <div class="uk-offcanvas-bar">
-        <button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
+        <a class="uk-offcanvas-close uk-icon uk-close">
+          <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
+        </a>
         <div class="uk-padding">
           <ul class="uk-nav uk-nav-default">
             <ng-container *ngIf="!onlyTop">
diff --git a/sharedComponents/navigationBar.module.ts b/sharedComponents/navigationBar.module.ts
index f302555b..ba856688 100644
--- a/sharedComponents/navigationBar.module.ts
+++ b/sharedComponents/navigationBar.module.ts
@@ -9,12 +9,13 @@ import { NavigationBarComponent} from './navigationBar.component';
 import { UserMiniModule} from '../login/userMiniModule.module';
 import {SearchBarModule} from "./searchBar/searchBar.module";
 import {HelpContentService} from '../services/help-content.service';
+import {IconsModule} from "../utils/icons/icons.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
     RouterModule,
-    UserMiniModule
+    UserMiniModule, IconsModule,
     // , SearchBarModule
   ],
   declarations: [
diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts
index 1f3e8be6..9e16d872 100644
--- a/utils/modal/alert.ts
+++ b/utils/modal/alert.ts
@@ -1,12 +1,11 @@
-import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input, ViewChild} from '@angular/core';
-import {properties} from "../../../../environments/environment";
+import {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
 
 declare var UIkit: any;
 
 @Component({
   selector: 'modal-alert',
   template: `
-    <div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal>
+    <div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #here">
       <div class="uk-modal-dialog">
         <div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
           <div class="uk-modal-title" [hidden]=!alertHeader>