-

EasyCorp · Oct 18, 2023 · d2aa1ca · d2aa1ca
1 parent e9a59c9
commit d2aa1ca
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 37 deletions.
diff --git a/assets/css/easyadmin-theme/forms.scss b/assets/css/easyadmin-theme/forms.scss
@@ -340,28 +340,37 @@ label.form-check-label {
 }
 
 .form-tabs .tab-help {
-    color: var(--form-fieldset-help-color);
+    color: var(--form-tabs-help-color);
     margin-top: -10px;
     margin-bottom: 15px;
 }
 
 // Form columns
 .form-column {
     .form-column-title {
-        align-items: center;
         display: flex;
-        color: var(--form-fieldset-header-color);
-        font-size: 17px;
-        font-weight: bold;
-        padding: 0 0 5px;
+        flex-direction: column;
+        margin-bottom: 5px;
+
+        .form-column-title-content {
+            align-items: center;
+            display: flex;
+            color: var(--form-column-header-color);
+            font-size: 17px;
+            font-weight: bold;
+            padding: 0 0 2px;
+        }
 
         .form-column-icon {
-            color: var(--form-fieldset-icon-color);
+            color: var(--form-column-icon-color);
             margin-right: 7px;
         }
-    }
-    .form-column-help {
-        color: var(--form-fieldset-help-color);
+
+        .form-column-help {
+            color: var(--form-column-help-color);
+            flex: 1;
+            margin: 0;
+        }
     }
 
     .field-form_fieldset {
@@ -383,7 +392,7 @@ label.form-check-label {
         box-shadow: none;
         padding: calc(var(--bs-gutter-x) - 5px) var(--bs-gutter-x) calc(var(--bs-gutter-x) / 2);
 
-        .form-fieldset-title .form-fieldset-title-contents {
+        .form-fieldset-title .form-fieldset-title-content {
             box-shadow: none;
             padding: 0;
         }
@@ -430,7 +439,7 @@ label.form-check-label {
     .form-fieldset-title {
         flex: 1;
 
-        .form-fieldset-title-contents {
+        .form-fieldset-title-content {
             align-items: center;
             box-shadow: 0 1px 0 var(--form-fieldset-header-border-color);
             display: flex;
@@ -463,7 +472,7 @@ label.form-check-label {
 
         .form-fieldset-help {
             color: var(--form-fieldset-help-color);
-            margin-top: 5px;
+            margin-top: 2px;
         }
     }
 }

diff --git a/assets/css/easyadmin-theme/variables-theme.scss b/assets/css/easyadmin-theme/variables-theme.scss
@@ -179,7 +179,11 @@
     --form-help-error-color: var(--gray-800);
     --form-help-active-color: var(--gray-800);
     --form-tabs-border-color: var(--gray-200);
-    --form-fieldset-header-color: var(--gray-800);
+    --form-tabs-help-color: var(--gray-600);
+    --form-column-header-color: var(--gray-700);
+    --form-column-help-color: var(--gray-600);
+    --form-column-icon-color: var(--gray-500);
+    --form-fieldset-header-color: var(--gray-700);
     --form-fieldset-help-color: var(--gray-600);
     --form-fieldset-border-color: var(--gray-200);
     --form-fieldset-header-border-color: var(--gray-200);
@@ -497,6 +501,10 @@
     --form-help-error-color: var(--true-gray-200);
     --form-help-active-color: var(--true-gray-300);
     --form-tabs-border-color: var(--true-gray-600);
+    --form-tabs-help-color: var(--true-gray-500);
+    --form-column-header-color: var(--true-gray-300);
+    --form-column-help-color: var(--true-gray-500);
+    --form-column-icon-color: var(--true-gray-400);
     --form-fieldset-header-color: var(--true-gray-300);
     --form-fieldset-help-color: var(--true-gray-500);
     --form-fieldset-border-color: var(--true-gray-600);

diff --git a/src/Resources/public/app.211b7677.css → src/Resources/public/app.d10ccfaf.css b/src/Resources/public/app.211b7677.css → src/Resources/public/app.d10ccfaf.css
diff --git a/src/Resources/public/app.211b7677.rtl.css → src/Resources/public/app.d10ccfaf.rtl.css b/src/Resources/public/app.211b7677.rtl.css → src/Resources/public/app.d10ccfaf.rtl.css
diff --git a/src/Resources/public/entrypoints.json b/src/Resources/public/entrypoints.json
@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.211b7677.css",
-        "/app.211b7677.rtl.css"
+        "/app.d10ccfaf.css",
+        "/app.d10ccfaf.rtl.css"
       ],
       "js": [
         "/app.914bb6ba.js"

diff --git a/src/Resources/public/manifest.json b/src/Resources/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "app.css": "app.211b7677.css",
-  "app.rtl.css": "app.211b7677.rtl.css",
+  "app.css": "app.d10ccfaf.css",
+  "app.rtl.css": "app.d10ccfaf.rtl.css",
   "app.js": "app.914bb6ba.js",
   "form.js": "form.fc39362b.js",
   "page-layout.js": "page-layout.3347892e.js",

diff --git a/src/Resources/views/crud/detail.html.twig b/src/Resources/views/crud/detail.html.twig
@@ -181,14 +181,16 @@
     {% set field_icon = field.getCustomOption('icon') %}
 
     <div class="form-column {{ field.icon|default(false) == false and field.label|default(false) == false ? 'form-column-no-header' }} {{ field.cssClass|default('') }}">
-        <h2>
-            {% if field_icon|default(false) %}<i class="fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
-            <span>{% if field.label|default(false) %}{{ field.label|default('')|trans(domain = ea.i18n.translationDomain)|raw }}{% endif %}</span>
-        </h2>
+        <div class="form-column-title">
+            <div class="form-column-title-content">
+                {% if field_icon|default(false) %}<i class="form-column-icon fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
+                {% if field.label|default(false) %}{{ field.label|default('')|trans(domain = ea.i18n.translationDomain)|raw }}{% endif %}
+            </div>
 
-        {% if field.help|default(false) %}
-            <p class="form-section-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</p>
-        {% endif %}
+            {% if field.help|default(false) %}
+                <div class="form-column-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</div>
+            {% endif %}
+        </div>
 {% endmacro %}
 
 {% macro render_column_close(field) %}
@@ -221,12 +223,12 @@
 
                         {% if is_collapsible %}
                             <a href="#content-{{ field.property }}" data-bs-toggle="collapse"
-                               class="form-fieldset-title-contents form-fieldset-collapse {{ is_collapsed ? 'collapsed' }}"
+                               class="form-fieldset-title-content form-fieldset-collapse {{ is_collapsed ? 'collapsed' }}"
                                aria-expanded="{{ is_collapsed ? 'false' : 'true' }}" aria-controls="content-{{ field.property }}">
                                 {{ fieldset_title_contents|raw }}
                             </a>
                         {% else %}
-                            <span class="not-collapsible form-fieldset-title-contents">
+                            <span class="not-collapsible form-fieldset-title-content">
                                 {{ fieldset_title_contents|raw }}
                             </span>
                         {% endif %}

diff --git a/src/Resources/views/crud/form_theme.html.twig b/src/Resources/views/crud/form_theme.html.twig
@@ -536,13 +536,15 @@
 
     <div class="form-column {{ field.icon|default(false) == false and field.label|default(false) == false ? 'form-column-no-header' }} {{ field.cssClass|default('') }}">
         <div class="form-column-title">
-            {% if field_icon|default(false) %}<i class="form-column-icon fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
-            <span>{% if field.label|default(false) %}{{ field.label|default('')|trans(domain = ea.i18n.translationDomain)|raw }}{% endif %}</span>
-        </div>
+            <div class="form-column-title-content">
+                {% if field_icon|default(false) %}<i class="form-column-icon fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
+                {% if field.label|default(false) %}{{ field.label|default('')|trans(domain = ea.i18n.translationDomain)|raw }}{% endif %}
+            </div>
 
-        {% if field.help|default(false) %}
-            <p class="form-column-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</p>
-        {% endif %}
+            {% if field.help|default(false) %}
+                <div class="form-column-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</div>
+            {% endif %}
+        </div>
 {% endblock ea_form_column_open_row %}
 
 {% block ea_form_column_close_row %}
@@ -571,12 +573,12 @@
 
                         {% if ea_is_collapsible %}
                             <a href="#content-{{ form.vars.name }}" data-bs-toggle="collapse"
-                               class="form-fieldset-title-contents form-fieldset-collapse {{ ea_is_collapsed ? 'collapsed' }}"
+                               class="form-fieldset-title-content form-fieldset-collapse {{ ea_is_collapsed ? 'collapsed' }}"
                                aria-expanded="{{ ea_is_collapsed ? 'false' : 'true' }}" aria-controls="content-{{ form.vars.name }}">
                                 {{ fieldset_title_contents|raw }}
                             </a>
                         {% else %}
-                            <span class="not-collapsible form-fieldset-title-contents">
+                            <span class="not-collapsible form-fieldset-title-content">
                                 {{ fieldset_title_contents|raw }}
                             </span>
                         {% endif %}