From 0d73e4f798d823849a12eb7180c22cd080878746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michel=20Gabri=C3=ABl?= <michel.gabriel@geocat.net>
Date: Mon, 23 Sep 2024 21:00:30 +0200
Subject: [PATCH] Fix the overlapping filter settings and the customize options
 (#8316)

* These changes fix the overlapping filter settings and the customize options dropdown on the `User Interface` page. The 2 buttons (save and delete) got an improvement alignment.

Further improvements:
- spacing between title and UI config name
- fix paddings on smaller screens
- whitespace between buttons and inputs

* Fix for a few cases where the layout was still wrong and too small. Every width now displays the buttons below the 2 inputs

* Remove commented style
---
 .../admin/uiconfig/partials/uiconfig.html     | 14 ++++++-------
 .../catalog/templates/admin/settings/ui.html  | 20 +++++++++++-------
 .../views/default/less/gn_admin_default.less  | 21 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/web-ui/src/main/resources/catalog/components/admin/uiconfig/partials/uiconfig.html b/web-ui/src/main/resources/catalog/components/admin/uiconfig/partials/uiconfig.html
index e4c6199680b..132fc2c5b36 100644
--- a/web-ui/src/main/resources/catalog/components/admin/uiconfig/partials/uiconfig.html
+++ b/web-ui/src/main/resources/catalog/components/admin/uiconfig/partials/uiconfig.html
@@ -3,14 +3,12 @@
     id="gn-uiconfig-customize"
     class="col-lg-6 col-lg-offset-6 gn-nopadding-right height-70-px"
   >
-    <div class="pull-right">
-      <label class="d-block" data-translate="">chooseOptionsToCustomize</label>
-      <select
-        class="form-control"
-        data-ng-options="o.label group by o.group for o in configOptions"
-        data-ng-model="optionsToAdd"
-      ></select>
-    </div>
+    <label class="d-block" data-translate="">chooseOptionsToCustomize</label>
+    <select
+      class="form-control"
+      data-ng-options="o.label group by o.group for o in configOptions"
+      data-ng-model="optionsToAdd"
+    ></select>
   </div>
 
   <p class="help-block" data-translate="">ui/config-help</p>
diff --git a/web-ui/src/main/resources/catalog/templates/admin/settings/ui.html b/web-ui/src/main/resources/catalog/templates/admin/settings/ui.html
index 80dd7408aec..fab8d3a89e6 100644
--- a/web-ui/src/main/resources/catalog/templates/admin/settings/ui.html
+++ b/web-ui/src/main/resources/catalog/templates/admin/settings/ui.html
@@ -25,7 +25,7 @@
       id="gn-uiconfig-toolbar"
     >
       <div class="row">
-        <div class="col-md-4 gn-nopadding-left">
+        <div class="col-md-6 gn-nopadding-left">
           <label
             for="uiConfigurationList"
             title="{{'uiConfiguration-help' | translate}}"
@@ -40,12 +40,12 @@
           ></select>
         </div>
 
-        <div class="col-md-8 gn-nopadding-left gn-nopadding-right">
+        <div class="col-md-6 gn-nopadding-left gn-nopadding-right">
           <label for="addUiSettings" data-translate="">addUiSettings</label>
 
           <div class="row">
             <!-- add UI config -->
-            <div class="col-md-6 gn-nopadding-left">
+            <div class="col-md-12 gn-nopadding-left">
               <div class="input-group">
                 <input
                   class="form-control"
@@ -69,8 +69,9 @@
               </div>
             </div>
 
+
             <!-- delete and save-->
-            <div class="col-md-6 gn-nopadding-left gn-nopadding-right">
+            <div class="col-md-12 gn-nopadding-left gn-nopadding-right">
               <div class="btn-toolbar pull-right">
                 <button
                   type="submit"
@@ -78,8 +79,9 @@
                   id="gn-btn-settings-delete"
                   data-ng-disabled="!uiConfiguration"
                   data-ng-click="deleteUiConfig()"
+                  title="{{'deleteUiSettings'|translate}}"
                 >
-                  <span class="fa fa-times"></span>
+                  <span class="fa fa-fw fa-times"></span>
                   {{"deleteUiSettings"|translate}}
                 </button>
                 <button
@@ -88,8 +90,9 @@
                   id="gn-btn-settings-save"
                   data-ng-disabled="!gnSettings.$valid"
                   data-ng-click="updateUiConfig()"
+                  title="{{'saveSettings'|translate}}"
                 >
-                  <span class="fa fa-save"></span>
+                  <span class="fa fa-fw fa-save"></span>
                   {{"saveSettings"|translate}}
                 </button>
               </div>
@@ -104,7 +107,10 @@
       data-ng-show="uiConfiguration.configuration !== undefined"
     >
       <div class="panel-heading">
-        <h1><span data-translate="">ui</span> <strong>{{uiConfiguration.id}}</strong></h1>
+        <h1>
+          <span data-translate="" class="gn-margin-right-sm">ui</span>
+          <strong>{{uiConfiguration.id}}</strong>
+        </h1>
 
         <div data-gn-need-help="user-interface-configuration" class="pull-right"></div>
       </div>
diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_admin_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_admin_default.less
index 461ec2fa5c1..c9b868d0b27 100644
--- a/web-ui/src/main/resources/catalog/views/default/less/gn_admin_default.less
+++ b/web-ui/src/main/resources/catalog/views/default/less/gn_admin_default.less
@@ -515,6 +515,16 @@ ul.gn-resultview li.list-group-item {
         margin-bottom: 10px;
         border-color: #ccc;
       }
+      .col-lg-4, .col-md-6 {
+        @media (max-width: @screen-sm-max) {
+          padding-right: 0 !important;
+        }
+      }
+      .col-md-12, #gn-uiconfig-customize {
+        padding-right: 0 !important;
+        margin-bottom: @gn-spacing;
+      }
+
       // checkbox (Bootstrap 5.2)
       input[type="checkbox"],
       input[type="radio"] {
@@ -656,7 +666,16 @@ ul.gn-resultview li.list-group-item {
         z-index: 901;
       }
       #gn-uiconfig-customize {
-        margin-top: -85px;
+
+        @media (max-width: @screen-md-max) {
+          padding-left: 0 !important;
+        }
+
+        @media (min-width: @screen-lg-min) {
+          margin-top: -85px;
+        }
+
+
         .dropdown-menu {
           padding: 0 !important;
           li {