From dd48ee6bb50b5103abc76c4ce5584b4cdd85078e Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Wed, 27 Jul 2022 14:44:41 +0300
Subject: [PATCH] layout fixes in customization

---
 .../customization.component.html              | 19 +++++++++--------
 .../customization/customization.component.ts  | 21 ++++++++++---------
 .../quickLook-backgrounds.component.ts        | 12 +++++------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
index 57aa30d..111daab 100644
--- a/src/app/pages/customization/customization.component.html
+++ b/src/app/pages/customization/customization.component.html
@@ -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"
diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts
index 7f944de..93b2e23 100644
--- a/src/app/pages/customization/customization.component.ts
+++ b/src/app/pages/customization/customization.component.ts
@@ -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;
       }
      
diff --git a/src/app/pages/customization/quickLook-backgrounds.component.ts b/src/app/pages/customization/quickLook-backgrounds.component.ts
index cb9afc9..435e821 100644
--- a/src/app/pages/customization/quickLook-backgrounds.component.ts
+++ b/src/app/pages/customization/quickLook-backgrounds.component.ts
@@ -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>