From 7e7c7c4b2566dd74762579cbf567f920c86d1d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 19 May 2023 15:38:09 +0200
Subject: [PATCH] Adjust compose navigation block configuratorUI

---
 .../PageBlocks/Navigation/Configurator.vue    |  2 +-
 .../Navigation/NavTypes/ComposePage.vue       | 14 +++----
 .../Navigation/NavTypes/Dropdown.vue          | 42 +++++++++++--------
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index a55b65e1d..b31ea63e3 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -108,7 +108,7 @@
                     </th>
                     <th
                       class="text-center"
-                      style="min-width: 200px;"
+                      style="width: 50px; min-width: 50px;"
                     >
                       {{ $t("navigation.enabled") }}
                     </th>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
index 6fecf5bf4..e09da2bb3 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -9,7 +9,7 @@
         />
       </b-form-group>
     </td>
-    <td style="width: 50%; min-width: 200px;">
+    <td style="min-width: 200px;">
       <b-form-group :label="$t('navigation.composePage')">
         <vue-select
           key="pageID"
@@ -148,6 +148,12 @@ export default {
     overflow: hidden;
   }
 }
+
+th,
+td {
+  padding-left: 15px;
+  padding-right: 15px;
+}
 </style>
 
 <style lang="css">
@@ -160,10 +166,4 @@ export default {
   text-overflow: ellipsis;
   overflow: hidden !important;
 }
-
-th,
-td {
-  padding-left: 15px;
-  padding-right: 15px;
-}
 </style>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
index 8f830ff9c..fd7b04b4c 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
@@ -3,11 +3,11 @@
     <td />
 
     <td
-      colspan="4"
+      colspan="5"
       class="p-0"
     >
       <div class="d-flex">
-        <th>
+        <th style="min-width: 200px;">
           <b-form-group :label="$t('navigation.fieldLabel')">
             <b-form-input
               v-model="options.item.dropdown.label"
@@ -16,7 +16,7 @@
           </b-form-group>
         </th>
 
-        <th>
+        <th style="min-width: 200px;">
           <b-form-group
             horizontal
             :label="$t('navigation.drop')"
@@ -41,19 +41,25 @@
       <div class="px-3">
         <table
           v-if="options.item.dropdown.items.length > 0"
-          class="table table-sm table-borderless table-responsive-lg"
+          class="dd-items table table-sm table-borderless table-responsive-lg"
         >
           <tr>
-            <th>
+            <th style="min-width: 200px;">
               {{ $t("navigation.text") }}
             </th>
-            <th>
+            <th style="min-width: 200px;">
               {{ $t("navigation.url") }}
             </th>
-            <th class="text-center">
+            <th
+              class="text-center"
+              style="min-width: 200px;"
+            >
               {{ $t('navigation.openIn') }}
             </th>
-            <th class="text-center">
+            <th
+              class="text-center"
+              style="width: 50px; min-width: 50px;"
+            >
               {{ $t("navigation.delimiter") }}
             </th>
           </tr>
@@ -62,34 +68,34 @@
             v-for="(item, dropIndex) in options.item.dropdown.items"
             :key="`drop-${dropIndex}`"
           >
-            <th>
+            <td>
               <b-form-group class="mb-0">
                 <b-form-input
                   v-model="item.label"
                   type="text"
                 />
               </b-form-group>
-            </th>
+            </td>
 
-            <th>
+            <td>
               <b-form-group class="mb-0">
                 <b-form-input
                   v-model="item.url"
                   type="text"
                 />
               </b-form-group>
-            </th>
+            </td>
 
-            <th class="align-middle text-center">
+            <td class="align-middle text-center">
               <b-form-group class="mb-0">
                 <b-form-select
                   v-model="item.target"
                   :options="targetOptions"
                 />
               </b-form-group>
-            </th>
+            </td>
 
-            <th class="align-middle text-center">
+            <td class="align-middle text-center">
               <b-form-group class="mb-0">
                 <b-form-checkbox
                   v-model="item.delimiter"
@@ -97,13 +103,13 @@
                   size="sm"
                 />
               </b-form-group>
-            </th>
+            </td>
 
-            <th class="align-middle text-center">
+            <td class="align-middle text-center">
               <c-input-confirm
                 @confirmed="options.item.dropdown.items.splice(dropIndex, 1)"
               />
-            </th>
+            </td>
           </tr>
         </table>
       </div>