IBX-5140: Add new-line break option to details component (#709)

ibexa · Mar 9, 2023 · a61d12c · a61d12c
1 parent 1c1d516
commit a61d12c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/bundle/Resources/public/scss/_details.scss b/src/bundle/Resources/public/scss/_details.scss
@@ -20,6 +20,11 @@
             margin-top: calculateRem(8px);
             margin-bottom: 0;
         }
+
+        &--break {
+            flex-basis: 100%;
+            height: 0;
+        }
     }
 
     &__item-content {

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig
@@ -12,12 +12,16 @@
     {% block details_items %}
         <div class="ibexa-details__items {{ view_mode|default('') == 'vertical' ? 'ibexa-details__items--vertical' }}">
             {% for item in items %}
-                <div class="ibexa-details__item">
-                    <div class="ibexa-details__item-label ibexa-label">{{ item.label }}</div>
-                    <div class="ibexa-details__item-content">
-                        {{ item.content_raw is defined ? item.content_raw|raw : item.content }}
+                {% if item.is_break|default(false) %}
+                    <div class="ibexa-details__item ibexa-details__item--break"></div>
+                {% else %}
+                    <div class="ibexa-details__item">
+                        <div class="ibexa-details__item-label ibexa-label">{{ item.label }}</div>
+                        <div class="ibexa-details__item-content">
+                            {{ item.content_raw is defined ? item.content_raw|raw : item.content }}
+                        </div>
                     </div>
-                </div>
+                {% endif %}
             {% endfor %}
         </div>
     {% endblock %}