Fix accordion header

tienvx · Oct 12, 2021 · 72fb582 · 72fb582
1 parent ac944a6
commit 72fb582
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 deletions.
diff --git a/src/Resources/assets/src/style.css b/src/Resources/assets/src/style.css
@@ -1,7 +1,37 @@
+/* Common */
+.collection-js-accordion-collapse-marker {
+    color: #ced4da; /* gray-400 */
+    margin: 0 8px 0 4px;
+}
+
+.form-group.field-collection [data-toggle="collapse"]:not(.collapsed) i {
+    transform: rotate(90deg);
+}
+
+/* Bootstrap 5 */
 .form-group.collection-js.field-collection .accordion-header {
     padding-right: 0;
 }
 
 .form-group.collection-js .accordion-header {
     display: flex;
 }
+
+/* Bootstrap 3, 4 */
+.form-group.collection-js .panel-heading,
+.form-group.collection-js .card-header {
+    display: flex;
+}
+
+.form-group.collection-js .panel-heading > [data-toggle="collapse"],
+.form-group.collection-js .card-header > [data-toggle="collapse"] {
+    width: 100%;
+    text-align: left;
+    align-items: center;
+    display: flex;
+}
+
+.form-group.collection-js .panel-heading > .collection-js-actions,
+.form-group.collection-js .card-header > .collection-js-actions {
+    display: inline-flex;
+}
diff --git a/src/Resources/views/bootstrap_3_layout.html.twig b/src/Resources/views/bootstrap_3_layout.html.twig
@@ -11,12 +11,11 @@
 {% block collection_js_accordion_item %}
     <div class="panel panel-default">
         <div class="panel-heading" role="tab">
-            <h4 class="panel-title">
-                <a class="{{ form.vars.valid ? 'collapsed' }}" role="button" data-toggle="collapse" href="#{{ id }}-contents" aria-expanded="{{ form.vars.valid ? 'false' : 'true' }}">
-                    {{ value|collection_js_as_string }}
-                </a>
-                {{ block('collection_js_actions') }}
-            </h4>
+            <a class="{{ form.vars.valid ? 'collapsed' }}" data-toggle="collapse" href="#{{ id }}-contents" aria-expanded="{{ form.vars.valid ? 'false' : 'true' }}">
+                <i class="fa fa-chevron-right collection-js-accordion-collapse-marker"></i>
+                {{ value|collection_js_as_string }}
+            </a>
+            {{ block('collection_js_actions') }}
         </div>
         <div id="{{ id }}-contents" class="panel-collapse collapse {{ not form.vars.valid ? 'in' }}" role="tabpanel">
             <div class="panel-body">

diff --git a/src/Resources/views/bootstrap_4_layout.html.twig b/src/Resources/views/bootstrap_4_layout.html.twig
@@ -11,12 +11,11 @@
 {% block collection_js_accordion_item %}
     <div class="card">
         <div class="card-header">
-            <h5 class="mb-0">
-                <button class="btn btn-link {{ form.vars.valid ? 'collapsed' }}" data-toggle="collapse" data-target="#{{ id }}-contents" aria-expanded="{{ form.vars.valid ? 'false' : 'true' }}">
-                    {{ value|collection_js_as_string }}
-                </button>
-                {{ block('collection_js_actions') }}
-            </h5>
+            <a class="{{ form.vars.valid ? 'collapsed' }}" data-toggle="collapse" href="#{{ id }}-contents" aria-expanded="{{ form.vars.valid ? 'false' : 'true' }}">
+                <i class="fa fa-chevron-right collection-js-accordion-collapse-marker"></i>
+                {{ value|collection_js_as_string }}
+            </a>
+            {{ block('collection_js_actions') }}
         </div>
         <div id="{{ id }}-contents" class="collapse {{ not form.vars.valid ? 'show' }}">
             <div class="card-body">

diff --git a/src/Resources/views/bootstrap_5_layout.html.twig b/src/Resources/views/bootstrap_5_layout.html.twig
@@ -12,7 +12,7 @@
     <div class="accordion-item">
         <h2 class="accordion-header">
             <button class="accordion-button {{ form.vars.valid ? 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ id }}-contents">
-                <i class="fas fw fa-chevron-right form-collection-item-collapse-marker"></i>
+                <i class="fa fa-chevron-right collection-js-accordion-collapse-marker"></i>
                 {{ value|collection_js_as_string }}
             </button>
             {{ block('collection_js_actions') }}