Quick contact: Fix a bug with dropdown and add some inputs to make it dynamic. GeneraL: Fix some breadcrumb alignments and fix modal overflowBody parameter

This commit is contained in:
Konstantinos Triantafyllou 2022-06-02 17:27:45 +03:00
parent f05af7b89a
commit bc5f5860f9
10 changed files with 35 additions and 30 deletions

View File

@ -1,5 +1,5 @@
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small"> <div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</div> </div>

View File

@ -6,7 +6,7 @@ export class ConnectHelper {
public static getCommunityFromDomain(domain: string): string{ public static getCommunityFromDomain(domain: string): string{
if(properties.environment == "development") { if(properties.environment == "development") {
domain = "covid-19.openaire.eu"; //for testing // domain = "covid-19.openaire.eu"; //for testing
} }
domain = domain.indexOf("//") != -1? domain.split("//")[1]:domain; //remove https:// prefix domain = domain.indexOf("//") != -1? domain.split("//")[1]:domain; //remove https:// prefix
if (domain.indexOf('eosc-portal.eu') != -1) { if (domain.indexOf('eosc-portal.eu') != -1) {

View File

@ -1,8 +1,8 @@
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1> <h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
<ng-content select="[page-title]"></ng-content> <ng-content select="[page-title]"></ng-content>
<ng-content select="[page-description]"></ng-content> <ng-content select="[page-description]"></ng-content>
<div class="uk-child-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null" <div class="uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null"
[class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid> [class.uk-grid-column-small]="smallForm" [class.uk-child-width-1-2@s]="!smallForm" [formGroup]="contactForm" uk-grid>
<div *ngIf="contactForm.get('name')" input placeholder="Name" <div *ngIf="contactForm.get('name')" input placeholder="Name"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('name')"></div> [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('name')"></div>
<div *ngIf="contactForm.get('surname')" input placeholder="Surname" <div *ngIf="contactForm.get('surname')" input placeholder="Surname"

View File

@ -2,7 +2,7 @@
uk-flex uk-flex-middle uk-background-fixed uk-section uk-section-small" [ngClass]="searchForm.class"> uk-flex uk-flex-middle uk-background-fixed uk-section uk-section-small" [ngClass]="searchForm.class">
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div *ngIf="breadcrumbs.length > 0" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark"> <div *ngIf="breadcrumbs.length > 0" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark">
<div class="uk-padding-small uk-padding-remove-bottom"> <div class="uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</div> </div>
@ -121,4 +121,4 @@
(searchPageUpdates)="activeEntityUpdate($event)" (searchPageUpdates)="activeEntityUpdate($event)"
simpleSearchLink="/search/find" [customFilter]="customFilter" simpleSearchLink="/search/find" [customFilter]="customFilter"
type="services" entityType="service" [typeName]="openaireEntities.SERVICES"> type="services" entityType="service" [typeName]="openaireEntities.SERVICES">
</search-dataproviders> </search-dataproviders>

View File

@ -130,7 +130,7 @@
<!-- TODO - Kostis until here--> <!-- TODO - Kostis until here-->
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div *ngIf="showBreadcrumb" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark"> <div *ngIf="showBreadcrumb" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark">
<div class="uk-padding-small uk-padding-remove-bottom"> <div class="uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</div> </div>

View File

@ -44,7 +44,7 @@
[queryParams]="menu.rootItem.params" [queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a> [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)" href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="menu.rootItem.url.includes('http')"
target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a> target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) ||
(menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) (menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage)
@ -59,7 +59,7 @@
routerLink="{{submenu.route}}" [queryParams]=submenu.params routerLink="{{submenu.route}}" [queryParams]=submenu.params
[fragment]="submenu.fragment">{{submenu.title}}</a> [fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" (click)="closeCanvas(canvas)" href="{{submenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.url.includes('http')"
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a> target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub"> <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items"> <ng-container *ngFor="let subsubmenu of submenu.items">
@ -68,7 +68,7 @@
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params" routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a> [fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" class="custom-external"
target="_blank">{{subsubmenu.title}}</a> target="_blank">{{subsubmenu.title}}</a>
</li> </li>
</ng-container> </ng-container>
@ -140,7 +140,7 @@
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a> [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
aria-expanded="false">{{menu.rootItem.title}}</a> [class.custom-external]="menu.rootItem.url.includes('http')">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a> <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.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">
<div class="uk-height-max-medium uk-overflow-auto"> <div class="uk-height-max-medium uk-overflow-auto">
@ -154,7 +154,7 @@
routerLink="{{submenu.route}}" [queryParams]="submenu.params" routerLink="{{submenu.route}}" [queryParams]="submenu.params"
[fragment]="submenu.fragment">{{submenu.title}}</a> [fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" href="{{submenu.url}}" [class.custom-external]="submenu.url.includes('http')"
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a> target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub"> <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items"> <ng-container *ngFor="let subsubmenu of submenu.items">
@ -163,7 +163,7 @@
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params" routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a> [fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a> href="{{subsubmenu.url}}" class="custom-external" target="_blank">{{subsubmenu.title}}</a>
</li> </li>
</ng-container> </ng-container>
</ul> </ul>
@ -191,7 +191,7 @@
<!-- EXTERNAL ROOT--> <!-- EXTERNAL ROOT-->
<a *ngIf="menu.type == 'external' && menu.url" <a *ngIf="menu.type == 'external' && menu.url"
href="{{menu.url}}" href="{{menu.url}}"
target="_blank"> target="_blank" class="custom-external">
{{menu.title}} {{menu.title}}
</a> </a>
<!-- NO ACTION ROOT--> <!-- NO ACTION ROOT-->
@ -216,7 +216,7 @@
<!-- EXTERNAL CHILD --> <!-- EXTERNAL CHILD -->
<a *ngIf="submenu.type == 'external' && submenu.url" <a *ngIf="submenu.type == 'external' && submenu.url"
href="{{submenu.url}}" href="{{submenu.url}}"
target="_blank"> target="_blank" class="custom-external">
{{submenu.title}} {{submenu.title}}
</a> </a>
</li> </li>
@ -250,7 +250,7 @@
</a> </a>
<!-- EXTERNAL --> <!-- EXTERNAL -->
<a *ngIf="item.type == 'external' && item.url" <a *ngIf="item.type == 'external' && item.url"
href="{{item.url}}" href="{{item.url}}" class="custom-external"
target="_blank"> target="_blank">
{{item.title}} {{item.title}}
</a> </a>

View File

@ -6,9 +6,9 @@
} }
.uk-dropdown { .uk-dropdown {
max-height: 650px; max-height: 550px;
height: calc(80vh - 100px); height: calc(80vh - 100px);
width: 500px; width: 400px;
max-width: 80vw; max-width: 80vw;
} }

View File

@ -1,17 +1,17 @@
<div class="quick-contact dark"> <div class="quick-contact">
<a class="uk-button uk-box-shadow-default uk-button-secondary uk-flex uk-flex-middle"> <button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle">
<icon *ngIf="!showDrop" name="mail" [flex]="true"></icon> <icon *ngIf="!showDrop" name="mail" [flex]="true"></icon>
<icon *ngIf="showDrop" name="close" [flex]="true"></icon> <icon *ngIf="showDrop" name="close" [flex]="true"></icon>
<span class="uk-margin-small-left">Contact</span> <span class="uk-margin-small-left">{{contact}}</span>
</a> </button>
<div #drop id="quick-contact" class="uk-dropdown uk-padding-remove uk-overflow-auto" uk-dropdown="mode: click; pos: top-right; animation: uk-animation-fade"> <div #drop id="quick-contact" class="uk-dropdown uk-padding-remove uk-overflow-auto"
<div class="uk-card-header uk-background-primary uk-padding-small uk-text-center"> uk-dropdown="mode: click; pos: top-right; animation: uk-animation-fade; offset: 20">
<div class="uk-card-header uk-padding-small uk-text-center" [ngClass]="background">
<div class="uk-text-small"> <div class="uk-text-small">
Send a message Send a message
</div> </div>
<div class="uk-margin-small avatars"> <div *ngIf="images.length > 0" class="uk-margin-small avatars">
<img class="uk-border-circle" src="assets/monitor-assets/avatar1.jpg"> <img *ngFor="let image of images" [src]="image" class="uk-border-circle" >
<img class="uk-border-circle" src="assets/monitor-assets/avatar2.jpg">
</div> </div>
<div class="uk-text-bold"> <div class="uk-text-bold">
How can we help? How can we help?

View File

@ -14,6 +14,12 @@ export class QuickContactComponent implements OnInit, OnDestroy {
@Input() @Input()
public contactForm: FormGroup; public contactForm: FormGroup;
@Input() @Input()
public images: string[] = [];
@Input()
public contact: string = 'contact';
@Input()
public background: string = 'uk-background-primary';
@Input()
public sending = false; public sending = false;
@Input() @Input()
public organizationTypes: string[] = []; public organizationTypes: string[] = [];
@ -48,7 +54,7 @@ export class QuickContactComponent implements OnInit, OnDestroy {
} }
public close() { public close() {
UIkit.drop(this.drop.nativeElement).hide(); UIkit.dropdown(this.drop.nativeElement).hide();
} }
public send(event) { public send(event) {

View File

@ -16,9 +16,8 @@ declare var UIkit: any;
<icon name="close" ratio="1.5"></icon> <icon name="close" ratio="1.5"></icon>
</button> </button>
</div> </div>
<div class="uk-modal-body uk-animation-fast uk-text-left" <div class="uk-modal-body uk-animation-fast uk-text-left"
[ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody"> [ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody?'':null">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div> <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>