MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

layout fixes in customization

This commit is contained in:
argirok 2022-07-27 14:44:41 +03:00
parent 97481480df
commit dd48ee6bb5
3 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/pages/customization/customization.component.html
View File

@ -1,6 +1,6 @@
<aside *ngIf="draftCustomizationOptions" id="sidebar_main"> <aside *ngIf="draftCustomizationOptions" id="sidebar_main">
<div id="sidebar_content"> <div id="sidebar_content">
<div class="menu_section uk-margin-top"> <div class="menu_section uk-margin-top" style="max-height: 10vh">
<ul class="uk-list uk-nav uk-nav-default" uk-nav> <ul class="uk-list uk-nav uk-nav-default" uk-nav>
<li> <li>
<a> <a>
@ -18,7 +18,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="menu_section uk-margin-large-top"> <div class="menu_section uk-margin-large-top uk-overflow-auto" style="max-height: 75vh">
<ul *ngIf="menuSelected.id == 'home'" class="uk-list uk-nav uk-nav-default" uk-nav> <ul *ngIf="menuSelected.id == 'home'" class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="sidebarItems" let-item let-i="index"> <ng-template ngFor [ngForOf]="sidebarItems" let-item let-i="index">
<li class="uk-visible-toggle" [class.uk-active]="menuSelected.id == item.id"> <li class="uk-visible-toggle" [class.uk-active]="menuSelected.id == item.id">
@ -164,7 +164,7 @@
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
</div> </div>
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top"> <div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top uk-margin-medium-bottom">
<div class=" uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold"> <div class=" uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold">
Colors Colors
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) && <a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
@ -184,7 +184,7 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #backgroundOptions> <ng-template #backgroundOptions>
<div class="functionalities-container"> <div class="functionalities-container" >
<div class="uk-margin-top"> <div class="uk-margin-top">
<span>Custom style </span> <span>Custom style </span>
<span> <span>
@ -198,7 +198,7 @@
</mat-slide-toggle> </mat-slide-toggle>
</span> </span>
</div> </div>
<div *ngIf="draftCustomizationOptions.backgroundsIsCustom" class=" uk-overflow-auto" style="max-height: 50vh"> <div *ngIf="draftCustomizationOptions.backgroundsIsCustom" >
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top"> <div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
Colors Colors
@ -218,12 +218,12 @@
[light]="false"></background> [light]="false"></background>
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light" <background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
[light]="true"></background> [light]="true"></background>
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form" <background label="Hero" [background]="draftCustomizationOptions.backgrounds.form"
[light]="true" [light]="true"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId"></background> [communityId]="communityId"></background>
<div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top"> <div class="uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta uk-text-bold uk-margin-large-top">
Image Hero Image
<a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions) ) <a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions) )
&& draftCustomizationOptions.backgroundsIsCustom" && draftCustomizationOptions.backgroundsIsCustom"
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left" (click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left"
@ -232,10 +232,11 @@
<icon name="reset"></icon> <icon name="reset"></icon>
</a> </a>
</div> </div>
<div class="uk-margin-medium-bottom">
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form" <background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId"></background-upload> [communityId]="communityId"></background-upload>
</div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
@ -265,7 +266,7 @@
</div> </div>
</div> </div>
<div class="functionalities-border uk-overflow-auto" style="max-height: 50vh"> <div class="functionalities-border uk-overflow-auto uk-margin-medium-bottom">
<ng-container *ngIf="buttonsSelected == 'dark'"> <ng-container *ngIf="buttonsSelected == 'dark'">
<customize-buttons <customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true" [buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"

21
src/app/pages/customization/customization.component.ts
View File

@ -33,7 +33,7 @@ declare var UIkit;
} }
.refresh-indicator { .refresh-indicator {
background-color: rgba(0, 0, 0, 0.50); background-color: rgba(0, 0, 0, 0.80);
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
color: white; color: white;
@ -45,21 +45,22 @@ declare var UIkit;
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */ /*padding-top: 56.25%; !* 16:9 Aspect Ratio *!*/
padding-top: 65%;
background-color:black; background-color:black;
border-radius:10px; border-radius:40px;
} }
#iframecontainer{ #iframecontainer{
position: absolute; position: absolute;
top: 2%; top: 4.5%;
left: 2.5%; left: 3.5%;
bottom: 2%; bottom: 4.5%;
right: 2.5%; right: 3.5%;
width: 95%; width: 93%;
height: 96%; height: 91%;
border: none; border: none;
border-radius:10px; border-radius:20px;
background-color: white; background-color: white;
} }

12
src/app/pages/customization/quickLook-backgrounds.component.ts
View File

@ -10,10 +10,10 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
<div> <div>
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Dark background</div> <div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Dark background</div>
<div [class]="'uk-padding-small uk-text-center darkBackground uk-light' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') " <div [class]="'uk-padding-small uk-text-center darkBackground uk-light' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView" > [class.uk-height-small]="buttonView">
<div *ngIf="!buttonView"> <div *ngIf="!buttonView" class="uk-margin-small-bottom">
<h1 >Heading</h1> <h1 >Heading</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div> <div class="uk-margin-small-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
<a class="">Link</a> <a class="">Link</a>
</div> </div>
<quick-look-buttons <quick-look-buttons
@ -24,10 +24,10 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
<div> <div>
<div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</div> <div class="uk-margin-large-top uk-margin-medium-bottom uk-text-large">Light background</div>
<div [class]="'uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') " <div [class]="'uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView"> [class.uk-height-small]="buttonView" >
<div *ngIf="!buttonView"> <div *ngIf="!buttonView" class="uk-margin-small-bottom">
<h1 >Heading</h1> <h1 >Heading</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div> <div class="uk-margin-small-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
<a class="portal-link">Link</a> <a class="portal-link">Link</a>
<br> <br>
</div> </div>