From 0c9242d9de0a08a5af48223585e04a9e3237cf3a Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Tue, 5 Jul 2022 16:43:18 +0300
Subject: [PATCH] customization: fixes layout + preview background and sizes

---
 .../background-upload.component.ts            |  4 +--
 .../pages/customization/color.component.ts    |  8 +++--
 .../customization.component.html              | 12 ++++----
 .../customization/customization.component.ts  | 30 ++++++++++++-------
 .../quickLook-backgrounds.component.ts        |  2 +-
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts
index f866555..228658d 100644
--- a/src/app/pages/customization/background-upload.component.ts
+++ b/src/app/pages/customization/background-upload.component.ts
@@ -21,8 +21,8 @@ declare var UIkit;
              [style.background-image]=" getUrl()">
 
 
-            <a (click)="removePhoto()" uk-tooltip="Remove" class="uk-float-right uk-padding-small uk-background-muted">
-                <icon name="remove" [defaultSize]="true" [flex]="true"></icon>
+            <a (click)="removePhoto()" uk-tooltip="Remove" class="uk-float-right  uk-border-rounded uk-margin-top uk-margin-right uk-background-muted uk-button uk-button-link">
+                <icon name="delete" [defaultSize]="true" [flex]="true"></icon>
             </a>
         </div>
       </div>
diff --git a/src/app/pages/customization/color.component.ts b/src/app/pages/customization/color.component.ts
index 63e9b91..115c6ef 100644
--- a/src/app/pages/customization/color.component.ts
+++ b/src/app/pages/customization/color.component.ts
@@ -19,10 +19,12 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
   styles:[
     `
     .color-input{
-        width:15px;
-        height:8px;
+        width:24px;
+        height:14px;
         border-radius:3px;
-        border:0.10000000149011612px solid #707070;
+        border:0.1px solid #707070;
+        cursor: pointer;
+        
     }`
   ]
 })
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
index f928b5d..00db71a 100644
--- a/src/app/pages/customization/customization.component.html
+++ b/src/app/pages/customization/customization.component.html
@@ -28,7 +28,7 @@
                                 <div *ngIf="item.icon" class="uk-width-auto">
                                     <icon class="menu-icon" [name]="item.icon" [flex]="true"></icon>
                                 </div>
-                                <span [class.uk-text-small]="item.id != menuSelected.id"
+                                <span
                                       class="uk-width-expand uk-text-truncate uk-margin-small-left">
                   {{item.name}}
                 </span>
@@ -126,12 +126,10 @@
 
             <div class=" uk-padding-small ">
                 <div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
-                <div id="ipadcontainer" class=" uk-flex uk-flex-center uk-flex-middle">
+                <div id="container" class=" uk-flex uk-flex-center uk-flex-middle">
                     <div id="iframecontainer" class="">
-                        <div
-                            class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center">
-                            <div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
-                                 class="  uk-width-1-1  refresh-indicator">
+                        <div class="uk-height-1-1">
+                            <div class="  uk-width-1-1  refresh-indicator">
                                 <div class="uk-position-relative uk-height-1-1">
                                     <div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
                                          (click)="applyLayout()">
@@ -144,7 +142,7 @@
                                 </div>
                             </div>
                             <iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
-                                    style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;"
+                                    style="  border-radius: 10px;"
                             ></iframe>
 
                         </div>
diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts
index 68be4c7..015649d 100644
--- a/src/app/pages/customization/customization.component.ts
+++ b/src/app/pages/customization/customization.component.ts
@@ -41,20 +41,27 @@ declare var UIkit;
   iframe, .refresh-indicator{
       height:100%
   }
-  #ipadcontainer{
-       background-image: url('/assets/iPad-Pro.svg'); 
-      background-size: contain; 
-      background-repeat: no-repeat; 
-      height: 900px;
-      
+  #container{
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+      padding-top: 56.25%; /* 16:9 Aspect Ratio */
+      background-color:black;
+      border-radius:10px;
   }
       #iframecontainer{
-          height: 64%;
-          width: 73%;
-      }
-      .uk-nav-sub{
-          padding-left: 25px;
+ 
+          position: absolute;
+          top: 2%;
+          left: 2.5%;
+          bottom: 2%;
+          right: 2.5%;
+          width: 95%;
+          height: 96%;
+          border: none;
+          border-radius:10px;
       }
+     
   `]
 })
 
@@ -270,6 +277,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
   }
   getCommunityUrl() {
     return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
+    // return "https://example.com"
   }
 
   getCommunityUrlNewLayout(layout: string) {
diff --git a/src/app/pages/customization/quickLook-backgrounds.component.ts b/src/app/pages/customization/quickLook-backgrounds.component.ts
index b9a6739..cb9afc9 100644
--- a/src/app/pages/customization/quickLook-backgrounds.component.ts
+++ b/src/app/pages/customization/quickLook-backgrounds.component.ts
@@ -21,7 +21,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
         ></quick-look-buttons>
       </div>
     </div>
-    <div [class.uk-margin-top]="!buttonView">
+    <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">