fix(admin): Fix quick forms, form tabs, and L10N inputs

Changed: - Display all form groups when quick form is tabbed by language. - Replaced default `.nav-pills` with `.nav-tabs` for a better appearance. - Fixed spacing between groups with and without headers. - Fixed disappeared language prefixes (amends 524ec25). - Fixed and improved appearance of tabs in quick form.
charcoalphp · Mar 11, 2024 · cd65f2c · cd65f2c
1 parent ffc3382
commit cd65f2c
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 50 deletions.
diff --git a/packages/admin/assets/dist/styles/charcoal.admin.css b/packages/admin/assets/dist/styles/charcoal.admin.css
diff --git a/packages/admin/assets/src/styles/charcoal/admin/bootstrap/_modal.scss b/packages/admin/assets/src/styles/charcoal/admin/bootstrap/_modal.scss
@@ -3,10 +3,6 @@
 // ==========================================================================
 
 .modal {
-    &.-quick-form {
-
-    }
-
     iframe {
         display: block;
     }

diff --git a/packages/admin/assets/src/styles/charcoal/admin/bootstrap/_nav.scss b/packages/admin/assets/src/styles/charcoal/admin/bootstrap/_nav.scss
@@ -8,10 +8,6 @@
         margin-bottom: $unit / 2;
     }
 
-    @media (min-width: $from-large) {
-        border-color: transparent;
-    }
-
     .nav-item {
         position: relative;
 
@@ -49,10 +45,6 @@
         &.active {
             color: $black;
 
-            @media (min-width: $from-large) {
-                border-color: $charcoal-white-1;
-            }
-
             &.hide-title {
                 .nav-title {
                     display: inline-block;

diff --git a/packages/admin/assets/src/styles/charcoal/admin/components/_form-widget.scss b/packages/admin/assets/src/styles/charcoal/admin/components/_form-widget.scss
@@ -15,14 +15,36 @@
 
 .c-form-widget_nav {
     .c-form-widget.-object-form & {
-        @media (min-width: $from-small) {
-            justify-content: flex-end;
-            transform: translateY(-100%);
+        @media (max-width: $to-small) {
+            &.nav-tabs {
+                margin-left: -10px;
+                margin-right: -10px;
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+        }
+
+        @media (min-width: $from-small) and (max-width: $to-large) {
+            &.nav-tabs {
+                margin-left: -1.25rem;
+                padding-left: 1.25rem;
+                padding-right: 1.25rem;
+            }
         }
 
         @media (min-width: $from-large) {
             position: absolute;
             width: 100%;
+            justify-content: flex-end;
+            transform: translateY(-100%);
+
+            &.nav-tabs {
+                border-color: transparent;
+
+                .nav-link.active {
+                    border-color: $charcoal-white-1;
+                }
+            }
         }
     }
 }
@@ -38,18 +60,30 @@
 }
 
 .c-form-widget_groups {
+    margin-top: rem($unit / 2);
+
+    .c-form-widget.-quick-form &:first-child {
+        margin-top: 0;
+    }
+
+    .c-form-widget.-quick-form & {
+        margin-bottom: rem($unit / 2);
+    }
 
     .c-form-widget_group {
         > header {
-            margin-top: rem($unit / 2);
-            padding: rem($unit / 2) rem($unit / 2) 0 rem($unit / 2);
+            margin-top: rem($unit);
+            margin-bottom: 0.25rem;
 
             .c-form-widget.-quick-form & {
                 margin-top: 0;
-                margin-bottom: rem($unit / 2);
             }
         }
 
+        &:first-child > header {
+            margin-top: rem($unit / 2);
+        }
+
         .c-form-widget_group_content {
             background-color: $charcoal-white-0;
             border-radius: $border-radius;
@@ -59,8 +93,8 @@
             .c-form-widget.-object-form &,
             .c-form-widget.-tabbed & {
                 padding: rem($unit / 2);
-                margin-top: rem($unit / 2);
             }
+
             .c-form-widget.-quick-form & {
                 background: none;
             }
@@ -71,13 +105,18 @@
                 //border-top-right-radius: 0;
 
                 @media (min-width: $from-large) {
-                    margin-top: 0;
                     margin-bottom: rem($unit / 2);
                     padding: rem($unit / 2) rem($unit / 2) 0;
                 }
             }
         }
     }
+
+    .c-form-widget.-stacked & {
+        .c-form-widget_group + .c-form-widget_group {
+            margin-top: rem($unit / 2);
+        }
+    }
 }
 
 .c-form-widget_sidebar {
@@ -108,18 +147,20 @@
     .modal-footer {
         background-color: $charcoal-gray-5;
     }
-}
 
-.bootstrap-dialog.-quick-form .modal-body {
-    background-color: #e1e1e1;
-}
+    .c-form-widget_nav.nav-tabs {
+        margin-left: -1rem;
+        margin-right: -1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 
-.bootstrap-dialog.-quick-form .modal-body .c-form-widget.-tabbed-by-lang .form-field.-l10n[data-lang]::before {
-    font-size:      10px;
-    content:        attr(data-custom-modal-lang);
-    position:       absolute;
-    left:           -50px;
-    display:        contents;
-    width:          30px;
-    text-transform: uppercase;
+    .c-form-widget.-tabbed-by-lang .form-field.-l10n[data-lang] {
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .c-form-widget.-tabbed-by-lang .form-field.-l10n[data-lang]::before {
+        display:  none;
+    }
 }
diff --git a/packages/admin/assets/src/styles/charcoal/admin/objects/_header.scss b/packages/admin/assets/src/styles/charcoal/admin/objects/_header.scss
@@ -26,12 +26,12 @@
     }
 
     &.-small {
-        height: $unit;
+        height: auto;
     }
 
     &.-small\@to-large {
         @media (max-width: $to-large) {
-            height: $unit;
+            height: auto;
         }
     }
 }
diff --git a/packages/admin/src/Charcoal/Admin/Widget/QuickFormWidget.php b/packages/admin/src/Charcoal/Admin/Widget/QuickFormWidget.php
@@ -2,11 +2,7 @@
 
 namespace Charcoal\Admin\Widget;
 
-// From 'charcoal-admin'
 use Charcoal\Admin\Widget\ObjectFormWidget;
-// From 'charcoal-property'
-use Charcoal\Property\ModelStructureProperty;
-// From 'charcoal-ui'
 use Charcoal\Admin\Ui\HasLanguageSwitcherInterface;
 use Charcoal\Admin\Ui\HasLanguageSwitcherTrait;
 
@@ -162,6 +158,6 @@ public function availableLanguagesAsJson()
      */
     public function defaultFormTabsTemplate()
     {
-        return 'charcoal/admin/template/form/nav-pills';
+        return 'charcoal/admin/template/form/nav-tabs';
     }
 }
diff --git a/packages/admin/templates/charcoal/admin/template/form/groups.mustache b/packages/admin/templates/charcoal/admin/template/form/groups.mustache
@@ -5,19 +5,19 @@
     @used-by charcoal/admin/template/object-form
     @used-by charcoal/admin/template/quick-form
 --}}
-<div class="c-form-widget_groups{{# isTabbable }} tab-content{{/ isTabbable }}">
+<div class="c-form-widget_groups{{^ isDisplayModeLang }}{{# isTabbable }} tab-content{{/ isTabbable }}{{/ isDisplayModeLang }}">
     {{# groups }}
         {{^ hidden }}
             {{# form.layout }}
                 {{> charcoal/admin/widget/layout.start }}
             {{/ form.layout }}
-            <div class="c-form-widget_group{{# ident }} form-group-{{ . }}{{/ ident }}{{# form.layout.cellSpanBy12 }} col-md-{{ . }}{{/ form.layout.cellSpanBy12 }} js-group-tab{{# form.isTabbable }} tab-pane{{^ isHidden }} active{{/ isHidden }}{{/ form.isTabbable }}{{^ form.isTabbable }}{{# isHidden }} hidden{{/ isHidden }}{{/ form.isTabbable }}"
+            <div class="c-form-widget_group{{# ident }} form-group-{{ . }}{{/ ident }}{{# form.layout.cellSpanBy12 }} col-md-{{ . }}{{/ form.layout.cellSpanBy12 }} js-group-tab{{^ form.isDisplayModeLang }}{{# form.isTabbable }} tab-pane{{^ isHidden }} active{{/ isHidden }}{{/ form.isTabbable }}{{/ form.isDisplayModeLang }}{{^ form.isTabbable }}{{# isHidden }} hidden{{/ isHidden }}{{/ form.isTabbable }}"
                 id="{{ widgetId }}"
                 style="{{# conditionalLogicUnmet }}display:none;{{/ conditionalLogicUnmet }}"
-                {{# form.isTabbable }}
+                {{^ isDisplayModeLang }}{{# form.isTabbable }}
                 role="tabpanel"
                 aria-labelledby="{{ widgetId }}_tab_{{ident}}"
-                {{/ form.isTabbable }}>
+                {{/ form.isTabbable }}{{/ isDisplayModeLang }}>
 
                 {{> $widget_template }}
             </div>

diff --git a/packages/admin/templates/charcoal/admin/template/form/nav-tabs-languages.mustache b/packages/admin/templates/charcoal/admin/template/form/nav-tabs-languages.mustache
@@ -1,5 +1,11 @@
+{{!--
+    Togglable Language Tabs
+    =======================
+
+    @used-by charcoal/admin/template/quick-form
+--}}
 {{# showLanguageSwitch }}
-<ul class="c-form-widget_nav nav nav-tabs available-languages" role="tablist">
+<ul class="c-form-widget_nav nav nav-tabs available-languages{{# tabCssClasses }} {{.}}{{/ tabCssClasses }}" role="tablist">
     {{# languages }}
     <li class="nav-item">
         <a class="nav-link nav-lang{{# isSelected }} active{{/ isSelected }} js-group-tabs"
@@ -16,4 +22,4 @@
     </li>
     {{/ languages }}
 </ul>
-{{/ showLanguageSwitch }}
+{{/ showLanguageSwitch }}
diff --git a/packages/admin/templates/charcoal/admin/widget/doc.mustache b/packages/admin/templates/charcoal/admin/widget/doc.mustache
@@ -8,7 +8,7 @@
 --}}
 <div id="{{ widgetId }}">
     {{! Using object form classes for style only }}
-    <div class="o-flex c-form-widget -object-form{{# isTabbable }} -tabbed{{/ isTabbable }}">
+    <div class="o-flex c-form-widget -object-form{{# isTabbable }} -tabbed{{/ isTabbable }}{{^ isTabbable }} -stacked{{/ isTabbable }}">
         <div class="o-flex_main c-form-widget_form">
             {{# isTabbable }}
                 {{> $form_tabs_template }}

diff --git a/packages/admin/templates/charcoal/admin/widget/form.mustache b/packages/admin/templates/charcoal/admin/widget/form.mustache
@@ -7,7 +7,7 @@
     This widget expects to be in a context (model) of type `Charcoal\Admin\Widget\Form`.
 --}}
 <form id="{{ widgetId }}" method="{{ method }}" action="{{ adminUrl }}{{ action }}" enctype="multipart/form-data"{{# novalidate }} novalidate{{/ novalidate }}>
-    <div class="o-flex c-form-widget -form{{# isTabbable }} -tabbed{{/ isTabbable }}">
+    <div class="o-flex c-form-widget -form{{# isTabbable }} -tabbed{{/ isTabbable }}{{^ isTabbable }} -stacked{{/ isTabbable }}">
         <div class="o-flex_main c-form-widget_form">
             <div class="o-section">
                 {{# isTabbable }}

diff --git a/packages/admin/templates/charcoal/admin/widget/object-form.mustache b/packages/admin/templates/charcoal/admin/widget/object-form.mustache
@@ -7,7 +7,7 @@
     This widget expects to be in a context (model) of type `Charcoal\Admin\Widget\Form`.
 --}}
 <form id="{{ widgetId }}" method="{{ method }}" action="{{ adminUrl }}{{ action }}" enctype="multipart/form-data"{{# novalidate }} novalidate{{/ novalidate }}>
-    <div class="o-flex c-form-widget -object-form -sticky-sidebar{{# isTabbable }} -tabbed{{/ isTabbable }}">
+    <div class="o-flex c-form-widget -object-form -sticky-sidebar{{# isTabbable }} -tabbed{{/ isTabbable }}{{^ isTabbable }} -stacked{{/ isTabbable }}">
         <div class="o-flex_main c-form-widget_form">
             {{# isTabbable }}
                 {{> $form_tabs_template }}

diff --git a/packages/admin/templates/charcoal/admin/widget/quick-form.mustache b/packages/admin/templates/charcoal/admin/widget/quick-form.mustache
@@ -7,7 +7,7 @@
     Expects JS initialization of this component to be handled by the dialog manager.
 --}}
 <form id="{{ widgetId }}" method="{{ method }}" action="{{ adminUrl }}{{ action }}" enctype="multipart/form-data">
-    <div class="o-flex c-form-widget -quick-form{{# isTabbable }} -tabbed{{/ isTabbable }}{{# isDisplayModeLang }} -tabbed-by-lang{{/ isDisplayModeLang }}">
+    <div class="o-flex c-form-widget -quick-form{{# isTabbable }} -tabbed{{/ isTabbable }}{{^ isTabbable }} -stacked{{/ isTabbable }}{{# isDisplayModeLang }} -stacked -tabbed-by-lang{{/ isDisplayModeLang }}">
         <div class="o-flex_main c-form-widget_form">
             {{# isTabbable }}
                 {{> $form_tabs_template }}