From eaebaded606ec045f52bd35d16be6c747dfe0fa7 Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Mon, 4 Jul 2022 15:47:07 +0300
Subject: [PATCH] customization: fix some margins, add overflow

---
 .../pages/customization/background-upload.component.ts |  2 +-
 src/app/pages/customization/border.component.ts        |  6 +++---
 .../pages/customization/customization.component.html   | 10 +++++-----
 .../pages/customization/customize-buttons.component.ts |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts
index d2daddd..f866555 100644
--- a/src/app/pages/customization/background-upload.component.ts
+++ b/src/app/pages/customization/background-upload.component.ts
@@ -16,7 +16,7 @@ declare var UIkit;
       </div>
     </div>
  
-      <div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle uk-heading-small ">
+      <div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle ">
         <div class="uk-width-1-1 uk-height-small" style = "background-size:cover"
              [style.background-image]=" getUrl()">
 
diff --git a/src/app/pages/customization/border.component.ts b/src/app/pages/customization/border.component.ts
index 548728b..010b8b9 100644
--- a/src/app/pages/customization/border.component.ts
+++ b/src/app/pages/customization/border.component.ts
@@ -6,7 +6,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
   template: `
     <div class="uk-grid  ">
       <div class="uk-margin-remove">
-        <div class="uk-text-bold  uk-margin-small-bottom uk-text-uppercase uk-text-meta"> Border radius (px)
+        <div class="uk-text-bold  uk-margin-xsmall-bottom uk-text-uppercase uk-text-meta"> Border radius (px)
             <a *ngIf="radius != radiusPublished" class="uk-margin-small-left"
                uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
                (click)="radius = radiusPublished;borderChanged()">  <icon name="reset"></icon></a>
@@ -17,7 +17,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
         </div>
       </div>
       <div class="uk-margin-top">
-        <div class="uk-text-bold uk-text-uppercase uk-text-meta"> Border width (px)
+        <div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-xsmall-bottom"> Border width (px)
             <a *ngIf="width != widthPublished" class="uk-margin-small-left"
                uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
                (click)="width = widthPublished; borderChanged()">  <icon name="reset"></icon></a>
@@ -27,7 +27,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
         </div>
       </div> 
       <div class="uk-margin-top uk-width-1-1">
-        <div class="uk-text-bold uk-text-uppercase uk-text-meta"> Border style
+        <div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-xsmall-bottom"> Border style
             <a *ngIf="style != stylePublished" class="uk-margin-small-left"
                uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
                (click)="style = stylePublished;borderChanged()">  <icon name="reset"></icon></a>
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
index b757f68..f928b5d 100644
--- a/src/app/pages/customization/customization.component.html
+++ b/src/app/pages/customization/customization.component.html
@@ -172,7 +172,7 @@
             </div>
         </div>
         <div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
-            <div class=" uk-margin-medium-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
                 <a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
                     draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
@@ -205,9 +205,9 @@
                   </mat-slide-toggle>
                   </span>
         </div>
-        <div *ngIf="draftCustomizationOptions.backgroundsIsCustom" class="">
+        <div *ngIf="draftCustomizationOptions.backgroundsIsCustom" class=" uk-overflow-auto" style="max-height: 50vh">
 
-            <div class="uk-margin-medium-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
                 <a *ngIf="(
         hasChanges(publishedCustomizationOptions.backgrounds.light, draftCustomizationOptions.backgrounds.light)||
@@ -229,7 +229,7 @@
                         [light]="true"
                         [oldBackground]="publishedCustomizationOptions.backgrounds.form"
                         [communityId]="communityId"></background>
-            <div class="uk-margin-medium-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
                 <a *ngIf="(formHasChanges(publishedCustomizationOptions, draftCustomizationOptions)  )
                   && draftCustomizationOptions.backgroundsIsCustom"
@@ -272,7 +272,7 @@
 
                     </div>
                 </div>
-                <div class="functionalities-border">
+                <div class="functionalities-border uk-overflow-auto" style="max-height: 50vh">
                     <ng-container *ngIf="buttonsSelected == 'dark'">
                         <customize-buttons
                             [buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
diff --git a/src/app/pages/customization/customize-buttons.component.ts b/src/app/pages/customization/customize-buttons.component.ts
index 40c5b02..fe52d72 100644
--- a/src/app/pages/customization/customize-buttons.component.ts
+++ b/src/app/pages/customization/customize-buttons.component.ts
@@ -19,7 +19,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
         ></border>
         <div class="uk-grid  uk-margin-top" >
           <div class="">
-            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors
+            <div class=" uk-margin-xsmall-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors
                 <a *ngIf="buttons.color !=buttonsPublished.color ||  buttons.backgroundColor != buttonsPublished.backgroundColor || buttons.borderColor !=buttonsPublished.borderColor  " class="uk-margin-small-left"
                    uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
                    (click)="buttons.color =buttonsPublished.color;  buttons.backgroundColor = buttonsPublished.backgroundColor ; buttons.borderColor =buttonsPublished.borderColor  ">  <icon name="reset"></icon></a>
@@ -38,7 +38,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
             ></color>
           </div>
           <div class="uk-margin-top">
-            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors on hover
+            <div class=" uk-margin-xsmall-bottom uk-text-bold uk-margin-small-left uk-text-meta uk-text-uppercase">Colors on hover
                 <a *ngIf="hasChanges(buttons.onHover,buttonsPublished.onHover)" class="uk-margin-small-left"
                    uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
                    (click)="buttons.onHover.color =buttonsPublished.onHover.color;  buttons.onHover.backgroundColor = buttonsPublished.onHover.backgroundColor ;