MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 8 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">
<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>
<li>
<a>
@ -18,7 +18,7 @@
</li>
</ul>
</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>
<ng-template ngFor [ngForOf]="sidebarItems" let-item let-i="index">
<li class="uk-visible-toggle" [class.uk-active]="menuSelected.id == item.id">
@ -164,7 +164,7 @@
</mat-slide-toggle>
</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">
Colors
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
@ -184,7 +184,7 @@
</div>
</ng-template>
<ng-template #backgroundOptions>
<div class="functionalities-container">
<div class="functionalities-container" >
<div class="uk-margin-top">
<span>Custom style </span>
<span>
@ -198,7 +198,7 @@
</mat-slide-toggle>
</span>
</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">
Colors
@ -218,12 +218,12 @@
[light]="false"></background>
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
[light]="true"></background>
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
<background label="Hero" [background]="draftCustomizationOptions.backgrounds.form"
[light]="true"
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId"></background>
<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) )
&& draftCustomizationOptions.backgroundsIsCustom"
(click)="resetImageTo(publishedCustomizationOptions.backgrounds);" class="uk-margin-small-left"
@ -232,10 +232,11 @@
<icon name="reset"></icon>
</a>
</div>
<div class="uk-margin-medium-bottom">
<background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[oldBackground]="publishedCustomizationOptions.backgrounds.form"
[communityId]="communityId"></background-upload>
</div>
</div>
</div>
</ng-template>
@ -265,7 +266,7 @@
</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'">
<customize-buttons
[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 {
background-color: rgba(0, 0, 0, 0.50);
background-color: rgba(0, 0, 0, 0.80);
border-radius: 4px;
position: absolute;
color: white;
@ -45,21 +45,22 @@ declare var UIkit;
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
/*padding-top: 56.25%; !* 16:9 Aspect Ratio *!*/
padding-top: 65%;
background-color:black;
border-radius:10px;
border-radius:40px;
}
#iframecontainer{
position: absolute;
top: 2%;
left: 2.5%;
bottom: 2%;
right: 2.5%;
width: 95%;
height: 96%;
top: 4.5%;
left: 3.5%;
bottom: 4.5%;
right: 3.5%;
width: 93%;
height: 91%;
border: none;
border-radius:10px;
border-radius:20px;
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 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':'') "
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView" >
<div *ngIf="!buttonView">
[class.uk-height-small]="buttonView">
<div *ngIf="!buttonView" class="uk-margin-small-bottom">
<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>
</div>
<quick-look-buttons
@ -24,10 +24,10 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
<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':'') "
[class.uk-height-small]="buttonView" [class.uk-height-medium]="!buttonView">
<div *ngIf="!buttonView">
[class.uk-height-small]="buttonView" >
<div *ngIf="!buttonView" class="uk-margin-small-bottom">
<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>
<br>
</div>