Update to Uikit 3.16.24

This commit is contained in:
Konstantinos Triantafyllou 2023-08-22 17:08:46 +03:00
parent f34a501046
commit d9a8283630
16 changed files with 45 additions and 85 deletions

View File

@ -45,7 +45,7 @@
</a>
</div>
</div>
<div *ngIf="!inlineEntity" uk-sticky="offset: 65; bottom: #pageBottom; media: @m" class="uk-blur-background">
<div *ngIf="!inlineEntity" uk-sticky="offset: 65; end: #pageBottom; media: @m" class="uk-blur-background">
<div class="uk-section-xsmall">
<stepper>
<step [status]="stepStatus('source')" stepId="source" stepNumber="1"
@ -110,7 +110,7 @@
</div>
<!-- Basket-->
<div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3">
<div id="basket" uk-sticky="offset: 220; bottom: !*; media: @m" style="z-index: 0!important;">
<div id="basket" uk-sticky="offset: 220; end: !*; media: @m" style="z-index: 0!important;">
<div class="uk-card uk-card-default linkingBasket">
<div class="uk-card-body uk-padding-small">
<div class="uk-margin-right">

View File

@ -80,9 +80,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
}
ngOnInit() {
if(this.isBrowser) {
this.stickyBugWorkaround();
}
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
if(this.isBrowser) {
@ -132,41 +129,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
initFooter() {
let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset});
}
/**
* Workaround for sticky not update bug when sidebar is toggled.
* TODO when UIKit will be updated => remove
*
* */
stickyBugWorkaround() {
let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) -
Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width'));
let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000;
this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => {
if (this.sticky.header) {
if (isOpen) {
this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px';
} else {
this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px';
}
setTimeout(() => {
this.sticky.header.$emit();
}, transitionDelay);
}
if (this.sticky.footer) {
if (isOpen) {
this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px';
} else {
this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px';
}
setTimeout(() => {
this.sticky.footer.$emit();
}, transitionDelay);
}
this.cdr.detectChanges();
}));
this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {end: true, offset: footer_offset});
}
/**

View File

@ -29,7 +29,7 @@
</a>
</div>
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
<ul #nav class="uk-list uk-nav uk-nav-parent-icon" [class.uk-list-large]="mobile"
<ul #nav class="uk-list uk-nav" [class.uk-list-large]="mobile"
[class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
<ng-template ngFor [ngForOf]="items" let-item>
<li [class.uk-active]="item.isActive" [ngClass]="item.customClass"
@ -40,6 +40,7 @@
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
</div>
<span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon hide-on-close"></span>
</a>
<ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
<li *ngFor="let subItem of item.items" [ngClass]="subItem.customClass"

View File

@ -49,7 +49,7 @@
<div class="uk-margin-top uk-padding-small">
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4@m uk-visible@m">
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;">
<div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 200;">
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
class="uk-margin-small-bottom uk-text-capitalize">

View File

@ -17,7 +17,7 @@
<!-- left box - actions -->
<!-- <div id="landing-left-sidebar" *ngIf="dataProviderInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
<ng-container *ngIf="dataProviderInfo && hasMetrics">
<metrics [pageViews]="pageViews"
@ -66,7 +66,7 @@
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
uk-sticky="end: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
@ -229,7 +229,7 @@
</div>
</div>
<div id="main-tabs-div" class="uk-sticky uk-blur-background"
uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
uk-sticky="end: true; media: @m" [attr.offset]="offset">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
[properties]="properties" [title]="dataProviderInfo.title.name"

View File

@ -16,7 +16,7 @@
<!-- left column -->
<!-- <div id="landing-left-sidebar" *ngIf="organizationInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-right uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-margin-large-bottom uk-align-center">
<div class="uk-text-meta uk-text-uppercase">Actions</div>
<ul class="uk-list">
@ -65,7 +65,7 @@
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
uk-sticky="end: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
@ -171,7 +171,7 @@
</div>
<!-- Tabs section -->
<div id="main-tabs-div" class="uk-sticky uk-blur-background"
uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
uk-sticky="end: true; media: @m" [attr.offset]="offset">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<!-- <showTitle *ngIf="stickyHeader" [titleName]="organizationInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
<landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"

View File

@ -17,7 +17,7 @@
<!-- left box - actions -->
<!-- <div id="landing-left-sidebar" *ngIf="projectInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
<ng-container *ngIf="projectInfo && hasMetrics">
<metrics [pageViews]="pageViews"
@ -103,7 +103,7 @@
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
uk-sticky="end: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
@ -363,7 +363,7 @@
</div>
<div id="main-tabs-div" class="uk-sticky uk-blur-background"
uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
uk-sticky="end: true; media: @m" [attr.offset]="offset">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<!-- <showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
<landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"

View File

@ -17,7 +17,7 @@
<!-- left box/sidebar - actions -->
<!-- <div id="landing-left-sidebar" *ngIf="resultLandingInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
<ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)">
<metrics *ngIf="hasMetrics" class="uk-margin-bottom"
@ -99,7 +99,7 @@
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
uk-sticky="end: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
@ -266,7 +266,7 @@
</div>
<div id="main-tabs-div" class="uk-sticky uk-blur-background"
uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
uk-sticky="end: true; media: @m" [attr.offset]="offset">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
[properties]="properties" [title]="resultLandingInfo.title"
@ -346,7 +346,7 @@
<ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
<div id="landing-right-sidebar" *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m"
[class.uk-animation-right]="viewAll">
<div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-overflow-auto uk-height-1-1">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
</div>

View File

@ -83,12 +83,13 @@ declare var UIkit;
{{user.fullname}}
</h5>
</div>
<ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
<ul class="uk-nav uk-nav-primary uk-list uk-margin-top" uk-nav>
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [ngClass]="item.customClass">
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas(account)">{{item.title}}</a>
<a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas(account)">
{{item.title}}<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon"></span></a>
<a *ngIf="!item.route && item.url" (click)="closeCanvas(account)" [href]="item.url" [class.custom-external]="item.target != '_self'"
[target]="item.target">{{item.title}}</a>
[target]="item.target">{{item.title}}<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon"></span></a>
</li>
</ng-container>
<ng-container *ngIf="notificationConfiguration">

View File

@ -39,7 +39,7 @@ declare var ResizeObserver;
</div>
</div>
<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="end: true"
[attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
@ -50,7 +50,7 @@ declare var ResizeObserver;
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-medium uk-margin-top">
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;">
<div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 100;">
<slider-tabs type="scrollable" position="left">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>

View File

@ -196,11 +196,11 @@ declare var UIkit;
</div>
</div>
<div *ngIf="!mobile && type === 'date' && opened" class="uk-dropdown" #calendarBox
uk-dropdown="pos: bottom-left; mode: none; boundary-align: true;" [attr.boundary]="'#' + id" (click)="$event.stopPropagation()">
uk-dropdown="pos: bottom-left; mode: none; flip: false ; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id" (click)="$event.stopPropagation()">
<mat-calendar [selected]="selectedDate" [startAt]="selectedDate" (selectedChange)="dateChanged($event)"></mat-calendar>
</div>
<div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; boundary-align: true;" [attr.boundary]="'#' + id">
uk-dropdown="mode: none; stretch: true; flip: false; shift: false" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
[class.uk-active]="(formControl.value === option.value) || selectedIndex === i">

View File

@ -31,7 +31,7 @@
<ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
</div>
</nav>
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top uk-nav-parent-icon" uk-nav>
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top" uk-nav>
<ng-container *ngIf="!onlyTop">
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
@ -40,17 +40,15 @@
<li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass"
*ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
[routerLink]="menu.items.length === 0?menu.route:null" (click)="menu.items.length === 0?closeCanvas(canvas):null"
<a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null"
(click)="menu.items.length === 0?closeCanvas(canvas):null"
[queryParams]="menu.params"
[fragment]="menu.fragment">{{menu.title}}</a>
<a *ngIf="!menu.route && menu.url"
[href]="menu.items.length === 0?menu.url:null" (click)="menu.items.length === 0?closeCanvas(canvas):null"
[class.custom-external]="menu.target != '_self'" [target]="menu.target">{{menu.title}}</a>
<a *ngIf="(!menu.route && !menu.url) ||
(menu.route && menu.routeRequired && !isEnabled([menu.route], showPage)
&& isAtleastOneEnabled(menu.routeRequired, showPage))"
(click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
[fragment]="menu.fragment">{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
<a *ngIf="menu.url"
(click)="menu.items.length === 0?closeCanvas(canvas):null"
[href]="menu.items.length === 0?menu.url:null"
[class.custom-external]="menu.url && menu.target != '_self'" [target]="menu.url?menu.target:null">
{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass"
@ -270,11 +268,10 @@
<a *ngIf="menu.type == 'noAction'">
{{menu.title}}
</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto"
style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav">
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass">
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
@ -291,7 +288,6 @@
</li>
</ng-container>
</ul>
</div>
</div>
</div>
</li>

View File

@ -90,6 +90,7 @@ export class SearchInputComponent implements OnInit, AfterViewInit {
ngAfterViewInit() {
if(typeof document !== 'undefined') {
this.ratio = Number.parseFloat(getComputedStyle(this.searchInput.nativeElement).getPropertyValue('--search-input-icon-ratio'));
this.cdr.detectChanges()
}
}

View File

@ -31,7 +31,7 @@ import {AutoCompleteValue} from "../../searchPages/searchUtils/searchHelperClass
<!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
<div *ngIf="focus && showInput" class="options uk-dropdown uk-open" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
uk-dropdown="pos: bottom-left; mode: none; stretch: true; offset: 15; flip: false; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li>
<span *ngIf="!_search.ready && warningMessage.length ==0" class="uk-padding-small"> Loading..... </span>

View File

@ -25,7 +25,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
<!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
<div *ngIf="focus && showInput" class="options uk-dropdown uk-open" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id" >
uk-dropdown="pos: bottom-left; mode: none; stretch: true; offset: 15; flip: false; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li>
<span [style.display]="showLoading ? 'inline' : 'none'" class="uk-padding-small uk-text-center"> <i class="uk-icon-spinner"></i> Loading... </span>

View File

@ -226,18 +226,16 @@
</div>
<div class="uk-width-expand@m">
<div class="uk-margin-medium-bottom">
<form class="uk-search uk-search-default uk-width-1-1">
<span uk-search-icon="" class="uk-icon uk-search-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
<input class="uk-search-input" type="search" placeholder="Search...">
</form>
</div>
<ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium uk-nav" uk-nav="">
<ul class="uk-nav-default uk-margin-medium uk-nav" uk-nav="">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<a href="#">Parent<span class="uk-nav-parent-icon"></span></a>
<ul class="uk-nav-sub" aria-hidden="true" hidden="">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a>
@ -249,7 +247,7 @@
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<a href="#">Parent without icon</a>
<ul class="uk-nav-sub" aria-hidden="true" hidden="">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>