IBX-1386: Model edit redesign

ibexa · Dec 8, 2021 · eebecc0 · eebecc0
1 parent aef3895
commit eebecc0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 52 deletions.
diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss
@@ -7,7 +7,7 @@
     border-color: $ibexa-color-light-400;
     border-top-left-radius: $ibexa-border-radius;
     border-top-right-radius: $ibexa-border-radius;
-    transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+    transition: all $ibexa-admin-transition-duration $ibexa-admin-transition, border-bottom-width 0;
 
     &__container {
         display: flex;
@@ -121,6 +121,10 @@
     }
 
     &--slim {
+        &.ibexa-edit-header--has-extra-content {
+            border-bottom: calculateRem(1px) solid $ibexa-color-light;
+        }
+
         .ibexa-edit-header {
             &__row {
                 &--bottom {

diff --git a/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig b/src/bundle/Resources/views/themes/admin/ui/anchor_navigation_menu.html.twig
@@ -21,6 +21,7 @@
 
                     <li class="ibexa-anchor-navigation-menu__item">
                         <button
+                            type="button"
                             class="ibexa-anchor-navigation-menu__item-btn {% if loop.first %}ibexa-anchor-navigation-menu__item-btn--active{% endif %}" 
                             data-anchor-target-section-id="#{{ sanitized_item }}"
                         >

diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig
@@ -1,4 +1,6 @@
-<div class="ibexa-edit-header">
+{% set show_extra_bottom_content = show_extra_bottom_content|default(false) %}
+
+<div class="ibexa-edit-header {{ show_extra_bottom_content ? 'ibexa-edit-header--has-extra-content' }}">
     <div class="container ibexa-edit-header__container">
         <div class="offset-1 ibexa-edit-header__row ibexa-edit-header__row--top">
             <div class="ibexa-edit-header__column ibexa-edit-header__column--main">
@@ -48,7 +50,7 @@
                     {% include '@ibexadesign/ui/autosave.html.twig' %}
                 {% endif %}
             </div>
-            {% if block('extra_bottom_content') is defined %}
+            {% if show_extra_bottom_content %}
                 <div class="ibexa-edit-header__extra-bottom-content">
                     {{ block('extra_bottom_content') }}
                 </div>

diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -137,58 +137,60 @@
             </div>
         {% endblock %}
 
-        <div class="ibexa-main-container {% block main_container_class %}{% endblock %}">
-            {% block side_column %}
-                <div class="ibexa-main-container__side-column {% block side_column_class %}{% endblock %}">
-                    {% block left_sidebar %}
-                        {% set main_menu_context = {
-                            'location': location ?? null,
-                            'content': content ?? null
-                        } %}
-                        {% set main_menu = knp_menu_get('ezplatform_admin_ui.menu.main', [], main_menu_context) %}
-
-                        <nav class="ibexa-main-menu">
-                            {{ knp_menu_render(main_menu, {
-                                'depth': 1,
-                                'template': '@ibexadesign/ui/menu/main.html.twig',
-                                'currentClass': 'active',
-                                'ancestorClass': 'active'
-                            }) }}
-
-                            {{ knp_menu_render(main_menu, {
-                                'depth': 2,
-                                'template': '@ibexadesign/ui/menu/main_2nd_level.html.twig',
-                                'currentClass': 'active',
-                                'ancestorClass': 'active'
-                            }) }}
+        {% block main_container %}
+            <div class="ibexa-main-container {% block main_container_class %}{% endblock %}">
+                {% block side_column %}
+                    <div class="ibexa-main-container__side-column {% block side_column_class %}{% endblock %}">
+                        {% block left_sidebar %}
+                            {% set main_menu_context = {
+                                'location': location ?? null,
+                                'content': content ?? null
+                            } %}
+                            {% set main_menu = knp_menu_get('ezplatform_admin_ui.menu.main', [], main_menu_context) %}
+
+                            <nav class="ibexa-main-menu">
+                                {{ knp_menu_render(main_menu, {
+                                    'depth': 1,
+                                    'template': '@ibexadesign/ui/menu/main.html.twig',
+                                    'currentClass': 'active',
+                                    'ancestorClass': 'active'
+                                }) }}
 
-                            {% block content_tree %}{% endblock %}
-                        </nav>
-                    {% endblock %}
-                </div>
-            {% endblock %}
-
-            {% block content_column %}
-                <div class="ibexa-main-container__content-column">
-                    <div class="container">
-                        {% block content_header %}
-                            <div class="ibexa-page-header-wrapper">
-                                <div class="ibexa-breadcrums-wrapper">
-                                    {% block breadcrumbs %}{% endblock %}
-                                </div>
-                                <div class="ibexa-content-menu-wrapper">
-                                    {% block context_menu %}{% endblock %}
-                                </div>
-                                <div class="ibexa-header-wrapper">
-                                    {% block header %}{% endblock %}
-                                </div>
-                            </div>
+                                {{ knp_menu_render(main_menu, {
+                                    'depth': 2,
+                                    'template': '@ibexadesign/ui/menu/main_2nd_level.html.twig',
+                                    'currentClass': 'active',
+                                    'ancestorClass': 'active'
+                                }) }}
+
+                                {% block content_tree %}{% endblock %}
+                            </nav>
                         {% endblock %}
-                        {% block content %}{% endblock %}
                     </div>
-                </div>
-            {% endblock %}
-        </div>
+                {% endblock %}
+
+                {% block content_column %}
+                    <div class="ibexa-main-container__content-column">
+                        <div class="container">
+                            {% block content_header %}
+                                <div class="ibexa-page-header-wrapper">
+                                    <div class="ibexa-breadcrums-wrapper">
+                                        {% block breadcrumbs %}{% endblock %}
+                                    </div>
+                                    <div class="ibexa-content-menu-wrapper">
+                                        {% block context_menu %}{% endblock %}
+                                    </div>
+                                    <div class="ibexa-header-wrapper">
+                                        {% block header %}{% endblock %}
+                                    </div>
+                                </div>
+                            {% endblock %}
+                            {% block content %}{% endblock %}
+                        </div>
+                    </div>
+                {% endblock %}
+            </div>
+        {% endblock %}
 
         <div
             class="ibexa-notifications-container"