[Library & common-assets | new-theme]: min-width in landing right sidebar | fix in classified subjects display | tooltip for license in download from.

1. landing-utils.css: Added class .landing-right-sidebar-min-width { min-width: 360px; }.
2. resultLanding.component.html: In right sidebar added class "landing-right-sidebar-min-width".
3. showSubjects.component.ts: [Bug fix] Removed class "uk-flex-inline" from keys for loop div - so that each tag goes to a new line.
4. availableOn.component.ts: Added uk-tooltip for accessRight tooltip | On hovering licence, show in tooltip the whole value.
This commit is contained in:
Konstantina Galouni 2022-06-09 17:51:58 +03:00
parent b451a2ea3a
commit c9143ebbf0
3 changed files with 8 additions and 7 deletions

View File

@ -21,8 +21,9 @@ import {properties} from "../../../../environments/environment";
<div *ngIf="availableOn" class="download-from uk-margin-small-bottom"> <div *ngIf="availableOn" class="download-from uk-margin-small-bottom">
<div *ngFor="let instance of availableOn.slice(0, viewAll?availableOn.length:threshold) let i=index" <div *ngFor="let instance of availableOn.slice(0, viewAll?availableOn.length:threshold) let i=index"
class="uk-flex uk-flex-top uk-padding-small uk-margin-small-bottom" class="uk-flex uk-flex-top uk-padding-small uk-margin-small-bottom"
[title]="instance.accessRight ? instance.accessRight : 'Not available'"> uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"> <span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon> <icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon>
</span> </span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical"> <div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
@ -37,7 +38,7 @@ import {properties} from "../../../../environments/environment";
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span> <span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span> <span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
</div> </div>
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate"> <div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
License: License:
<a *ngIf="isUrl(instance.license); else elseBlock" <a *ngIf="isUrl(instance.license); else elseBlock"
[href]="instance.license" target="_blank" class="custom-external"> [href]="instance.license" target="_blank" class="custom-external">

View File

@ -56,7 +56,7 @@ import {properties} from "../../../../environments/environment";
<ng-template #subjects_by_vocabulary_template let-customClasses="customClasses" let-id="id"> <ng-template #subjects_by_vocabulary_template let-customClasses="customClasses" let-id="id">
<div *ngFor="let key of getKeys(classifiedSubjects) let i=index" <div *ngFor="let key of getKeys(classifiedSubjects) let i=index"
class="uk-flex-inline uk-flex-wrap uk-margin-medium-right" class="uk-flex-wrap uk-margin-medium-right"
[ngClass]="customClasses"> [ngClass]="customClasses">
<p #classifiedContent [id]="id+'_'+key" class="uk-grid uk-grid-small uk-flex-middle uk-margin-bottom uk-margin-remove-left" uk-grid> <p #classifiedContent [id]="id+'_'+key" class="uk-grid uk-grid-small uk-flex-middle uk-margin-bottom uk-margin-remove-left" uk-grid>
<span class="uk-padding-remove"> <span class="uk-padding-remove">

View File

@ -3,7 +3,7 @@
<div class="publication"> <div class="publication">
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid> <div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions --> <!-- left box/sidebar - actions -->
<div *ngIf="resultLandingInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color uk-visible@s uk-padding-remove-horizontal"> <div *ngIf="resultLandingInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
@ -402,7 +402,7 @@
</div> </div>
<!-- right box--> <!-- right box/ sidebar-->
<ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo"> <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
<div id="right-sidebar-switcher" uk-toggle href="#right-column-offcanvas" <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="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
@ -421,7 +421,7 @@
</div> </div>
</div> </div>
<div *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small uk-visible@m" <div *ngIf="!rightSidebarOffcanvasClicked" class="landing-right-sidebar-min-width uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small uk-visible@m"
[class.uk-animation-right]="viewAll"> [class.uk-animation-right]="viewAll">
<div class="uk-sticky uk-overflow-auto landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset"> <div class="uk-sticky uk-overflow-auto landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset">
<ng-container *ngTemplateOutlet="right_column"></ng-container> <ng-container *ngTemplateOutlet="right_column"></ng-container>