IBX-7773: Fixed Sub-items sorting order form vertical alignment (#1167)

* IBX-7773: Fix Sub-items sorting order form vertical alignment (content details tab) * UI fixes * dropdown fix
ibexa · Feb 13, 2024 · 526fc99 · 526fc99
1 parent 7327ac9
commit 526fc99
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -203,6 +203,10 @@
         font-weight: 400;
         line-height: calculateRem(18px);
         padding: calculateRem(12px) calculateRem(16px) 0;
+
+        &:empty {
+            padding: 0;
+        }
     }
 
     &__items-list {

diff --git a/src/bundle/Resources/views/themes/admin/content/tab/details.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/details.html.twig
@@ -137,13 +137,31 @@
             'method': 'POST',
             'action': path('ibexa.location.update'),
             'attr': {'class': 'form-inline ibexa-form-inline justify-content-start'}
-            }) }}
-
-        {{ form_label(form_location_update.sort_field, 'tab.details.sub_items_listing_by.order_by'|trans|desc('Order by')) }}
-        {{ form_widget(form_location_update.sort_field, { 'attr': {'class': 'ibexa-form-autosubmit ml-2'} }) }}
-
-        {{ form_label(form_location_update.sort_order, 'tab.details.sub_items_listing_by.in'|trans|desc('in')) }}
-        {{ form_widget(form_location_update.sort_order, { 'attr': {'class': 'ibexa-form-autosubmit ml-2'} }) }}
+        }) }}
+
+        <div class="form-group">
+            {{ form_label(
+                form_location_update.sort_field,
+                'tab.details.sub_items_listing_by.order_by'|trans|desc('Order by'),
+                { label_attr: { class: 'mb-0 mt-3' } },
+            ) }}
+            {{ form_widget(
+                form_location_update.sort_field,
+                { attr: { class: 'ibexa-form-autosubmit', dropdown_class: 'ms-0', is_small: true }}
+            ) }}
+        </div>
+
+        <div class="form-group ms-2">
+            {{ form_label(
+                form_location_update.sort_order,
+                'tab.details.sub_items_listing_by.in'|trans|desc('in'),
+                { label_attr: { class: 'mb-0 mt-3' } },
+            ) }}
+            {{ form_widget(
+                form_location_update.sort_order,
+                { attr: { class: ' ibexa-form-autosubmit', dropdown_class: 'ms-0', is_small: true } }
+            ) }}
+        </div>
 
         {% do form_location_update.update.setRendered() %}
         {{ form_end(form_location_update) }}

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
@@ -126,7 +126,7 @@
             {% block items_list_header %}
                 {% if items_list_header is defined %}
                     <div class="ibexa-dropdown__items-list-header">
-                        {{ items_list_header }}
+                        {{- items_list_header -}}
                     </div>
                 {% endif %}
             {% endblock items_list_header %}