Tweak the design of the detail page

EasyCorp · Oct 26, 2023 · 64caec2 · 64caec2
1 parent e59d14c
commit 64caec2
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 41 deletions.
diff --git a/assets/css/easyadmin-theme/detail-page.scss b/assets/css/easyadmin-theme/detail-page.scss
@@ -1,37 +1,58 @@
 // Detail Page styles
 // ----------------------------------------------------------------------------
 .ea-detail .form-column .form-fieldset-body {
-  padding-bottom: 5px;
+  padding-bottom: 7px;
   padding-top: 5px;
 
   &.without-header {
-    padding-bottom: var(--bs-gutter-x);
+    padding-bottom: 10px;
     padding-top: var(--bs-gutter-x);
   }
 }
 
 .ea-detail .field-group {
+  display: flex;
   margin-bottom: 12px;
 }
 
 .ea-detail .field-group .field-label {
   color: var(--form-label-color);
   font-size: var(--font-size-base);
   font-weight: 500;
-  margin: 0;
+  margin: 0 15px 0 0;
   padding: 0 0 1px 0;
+  text-align: right;
+  width: 130px;
 
-  .data-help {
-    color: var(--gray-600);
-    font-size: var(--font-size-sm);
-    margin: 15px 0 0;
+  &:empty {
+    display: none;
+  }
+
+  div[data-bs-toggle="tooltip"] {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: var(--detail-label-tooltip-underline-color);
+    text-decoration-style: dotted;
+    text-underline-offset: 2px;
+  }
+}
+
+.tooltip.ea-detail-label-tooltip {
+  --bs-tooltip-max-width: 350px;
+  --bs-tooltip-border-radius: var(--border-radius);
+  --bs-tooltip-padding-x: 20px;
+  --bs-tooltip-padding-y: 10px;
 
-    i {
-      color: var(--datalist-label-color);
-    }
+  .tooltip-inner {
+    text-align: start;
   }
 }
 
+.ea-detail .field-group .field-value {
+  flex: 1;
+  min-width: 66%;
+}
+
 .ea-detail .field-group .field-code_editor {
   color: inherit;
   font-family: var(--font-family-monospace);
@@ -46,3 +67,22 @@
   max-width: 80ch;
   overflow-y: auto;
 }
+
+// for boolean fields, flip the label <-> value order because the label is
+// usually a medium-long string of text and the value is always tiny (YES/NO)
+.ea-detail .field-group.field-boolean {
+  flex-direction: row-reverse;
+
+  .field-label {
+    flex: 1;
+    min-width: 66%;
+    margin: 0 0 0 15px;
+    text-align: left;
+  }
+  .field-value {
+    flex: unset;
+    min-width: 0;
+    text-align: right;
+    width: 130px;
+  }
+}
diff --git a/assets/css/easyadmin-theme/forms.scss b/assets/css/easyadmin-theme/forms.scss
@@ -350,7 +350,7 @@ label.form-check-label {
     .form-column-title {
         display: flex;
         flex-direction: column;
-        margin-bottom: 5px;
+        margin-bottom: 15px;
 
         .form-column-title-content {
             align-items: center;
@@ -394,13 +394,17 @@ label.form-check-label {
             box-shadow: none;
             padding: 0;
         }
+
+        .form-fieldset-title .form-fieldset-help {
+            margin-top: 2px;
+        }
     }
 
     .form-fieldset-body {
-        padding: 5px var(--bs-gutter-x);
+        padding: 5px var(--bs-gutter-x) 0;
 
         &.without-header {
-            padding: var(--bs-gutter-x);
+            padding: var(--bs-gutter-x) var(--bs-gutter-x) 0;
         }
     }
 }
@@ -465,7 +469,7 @@ label.form-check-label {
 
         .form-fieldset-help {
             color: var(--form-fieldset-help-color);
-            margin-top: 2px;
+            margin-top: 6px;
         }
     }
 }

diff --git a/assets/css/easyadmin-theme/variables-theme.scss b/assets/css/easyadmin-theme/variables-theme.scss
@@ -132,6 +132,7 @@
     --modal-header-border-color: var(--gray-300);
     --modal-footer-bg: var(--gray-100);
     --modal-title-color: var(--gray-700);
+    --detail-label-tooltip-underline-color: var(--gray-400);
     --form-label-color: var(--gray-800);
     --form-control-bg: var(--white);
     --form-control-disabled-bg: var(--gray-200);
@@ -454,6 +455,7 @@
     --modal-footer-bg: var(--true-gray-700);
     --modal-title-color: var(--true-gray-400);
     --pagination-disabled-color: var(--true-gray-600);
+    --detail-label-tooltip-underline-color: var(--true-gray-400);
     --form-label-color: var(--true-gray-300);
     --form-control-bg: var(--true-gray-700);
     --form-control-disabled-bg: var(--true-gray-800);

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -30,6 +30,7 @@ class App {
         this.#createBatchActions();
         this.#createModalWindowsForDeleteActions();
         this.#createPopovers();
+        this.#createTooltips();
 
         document.addEventListener('ea.collection.item-added', () => this.#createAutoCompleteFields());
     }
@@ -367,6 +368,12 @@ class App {
         });
     }
 
+    #createTooltips() {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((tooltipElement) => {
+            new bootstrap.Tooltip(tooltipElement);
+        });
+    }
+
     #createFilterToggles() {
         document.querySelectorAll('.filter-checkbox').forEach((filterCheckbox) => {
             filterCheckbox.addEventListener('change', () => {

diff --git a/src/Resources/public/app.1c98f4b0.css → src/Resources/public/app.052a1081.css b/src/Resources/public/app.1c98f4b0.css → src/Resources/public/app.052a1081.css
diff --git a/src/Resources/public/app.1c98f4b0.rtl.css → src/Resources/public/app.052a1081.rtl.css b/src/Resources/public/app.1c98f4b0.rtl.css → src/Resources/public/app.052a1081.rtl.css
diff --git a/src/Resources/public/app.a937f82e.js → src/Resources/public/app.e7951020.js b/src/Resources/public/app.a937f82e.js → src/Resources/public/app.e7951020.js
diff --git a/...ources/public/app.a937f82e.js.LICENSE.txt → ...ources/public/app.e7951020.js.LICENSE.txt b/...ources/public/app.a937f82e.js.LICENSE.txt → ...ources/public/app.e7951020.js.LICENSE.txt
diff --git a/src/Resources/public/entrypoints.json b/src/Resources/public/entrypoints.json
@@ -2,11 +2,11 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.1c98f4b0.css",
-        "/app.1c98f4b0.rtl.css"
+        "/app.052a1081.css",
+        "/app.052a1081.rtl.css"
       ],
       "js": [
-        "/app.a937f82e.js"
+        "/app.e7951020.js"
       ]
     },
     "form": {

diff --git a/src/Resources/public/manifest.json b/src/Resources/public/manifest.json
@@ -1,7 +1,7 @@
 {
-  "app.css": "app.1c98f4b0.css",
-  "app.rtl.css": "app.1c98f4b0.rtl.css",
-  "app.js": "app.a937f82e.js",
+  "app.css": "app.052a1081.css",
+  "app.rtl.css": "app.052a1081.rtl.css",
+  "app.js": "app.e7951020.js",
   "form.js": "form.fc39362b.js",
   "page-layout.js": "page-layout.3347892e.js",
   "page-color-scheme.js": "page-color-scheme.a1970567.js",

diff --git a/src/Resources/views/crud/detail.html.twig b/src/Resources/views/crud/detail.html.twig
@@ -71,13 +71,17 @@
 {% macro render_field_contents(entity, field) %}
     <div class="field-group {{ field.cssClass }}">
         <div class="field-label">
-            {{ field.label|trans|raw }}
-
-            {% if field.help is not empty %}
-                <a tabindex="0" class="data-help" data-bs-toggle="popover" data-bs-custom-class="ea-content-help-popover" data-bs-animation="true" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-content="{{ field.help|trans|e('html_attr') }}">
-                    <i class="far fa-question-circle"></i>
-                </a>
-            {% endif %}
+            {%- set label_html_attributes -%}
+                {%- if field.help is not empty -%}
+                    data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-animation="false"
+                    data-bs-html="true" data-bs-custom-class="ea-detail-label-tooltip"
+                    data-bs-title="{{ field.help|trans|e('html_attr') }}"
+                {%- endif -%}
+            {%- endset -%}
+
+            <div {{ label_html_attributes }}>
+                {{ field.label|trans|raw }}
+            </div>
         </div>
 
         <div class="field-value">

diff --git a/src/Resources/views/crud/form_theme.html.twig b/src/Resources/views/crud/form_theme.html.twig
@@ -542,18 +542,21 @@
 {% block ea_form_column_open_row %}
     {% set field = form.vars.ea_vars.field %}
     {% set field_icon = field.getCustomOption('icon') %}
+    {% set column_has_title = field_icon != null or field.label != false or field.label != null or field.help != null %}
+
+    <div class="form-column {{ not column_has_title ? 'form-column-no-header' }} {{ field.cssClass }}">
+        {% if column_has_title %}
+            <div class="form-column-title">
+                <div class="form-column-title-content">
+                    {% if field_icon %}<i class="form-column-icon fa fa-fw fa-{{ field_icon }}"></i>{% endif %}
+                    {% if field.label %}{{ field.label|default('')|trans(domain = ea.i18n.translationDomain)|raw }}{% endif %}
+                </div>
 
-    <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">
-            <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 %}
+                {% if field.help %}
+                    <div class="form-column-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</div>
+                {% endif %}
             </div>
-
-            {% if field.help|default(false) %}
-                <div class="form-column-help">{{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}</div>
-            {% endif %}
-        </div>
+        {% endif %}
 {% endblock ea_form_column_open_row %}
 
 {% block ea_form_column_close_row %}