MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change all offcanvas with uikit class. FIx search filter checkbox and radio label. Modal: Add container to avoid insert class at DOM

This commit is contained in:
Konstantinos Triantafyllou 2022-06-17 02:57:56 +03:00
parent 4ed89bac13
commit 398b80d228
9 changed files with 59 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
landingPages/result/resultLanding.component.html
View File

@ -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>

60
notifications/notifications-sidebar/notification-sidebar.component.css
View File

@ -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;
}

34
notifications/notifications-sidebar/notification-sidebar.component.less Normal file
View File

@ -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;
}

15
notifications/notifications-sidebar/notifications-sidebar.component.ts
View File

@ -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 {

2
searchPages/searchUtils/newSearchPage.component.html
View File

@ -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>

8
searchPages/searchUtils/searchFilter.component.html
View File

@ -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">

9
sharedComponents/navigationBar.component.html
View File

@ -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">

3
sharedComponents/navigationBar.module.ts
View File

@ -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: [

5
utils/modal/alert.ts
View File

@ -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>