fix(admin): Fix margins for switch and file inputs

charcoalphp · Mar 11, 2024 · e582431 · e582431
1 parent 8eb96cb
commit e582431
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 27 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-custom/_switch.scss b/packages/admin/assets/src/styles/charcoal/admin/bootstrap-custom/_switch.scss
@@ -43,6 +43,7 @@ $switch-transition: .2s all !default;
         + label {
             position: relative;
             min-width: calc(#{$switch-height} * 2);
+            margin-bottom: 0;
             border-radius: $switch-border-radius;
             height: $switch-height;
             line-height: $switch-height;

diff --git a/packages/admin/assets/src/styles/charcoal/admin/bootstrap/_forms.scss b/packages/admin/assets/src/styles/charcoal/admin/bootstrap/_forms.scss
@@ -3,11 +3,11 @@
 // ==========================================================================
 
 // Focus for file, radio, and checkbox
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-   // outline: none;
-}
+// input[type="file"]:focus,
+// input[type="radio"]:focus,
+// input[type="checkbox"]:focus {
+//    outline: none;
+// }
 
 input[type="url"] {
     // @see https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966
@@ -120,6 +120,13 @@ label {
     }
 }
 
+.form-file-group {
+    & + .preview-file {
+        margin-top: 1em;
+        margin-bottom: 0;
+    }
+}
+
 .active-lang {
     [data-lang] {
         color:          $charcoal-gray-3;

diff --git a/packages/admin/templates/charcoal/admin/property/input/audio-widget.mustache b/packages/admin/templates/charcoal/admin/property/input/audio-widget.mustache
@@ -81,7 +81,7 @@
                         --}}
                         {{! charcoal/admin/property/input/file/control }}
                         <div id="{{ inputId }}">
-                            <div class="form-group" >
+                            <div class="form-file-group" >
                                 {{# showFileUpload }}
                                     <input
                                         type="file"

diff --git a/packages/admin/templates/charcoal/admin/property/input/file/control.mustache b/packages/admin/templates/charcoal/admin/property/input/file/control.mustache
@@ -4,7 +4,7 @@
 
     `charcoal/admin/property/input/file`
 --}}
-<div class="form-group">
+<div class="form-file-group">
     <input type="hidden" name="{{ inputName }}" value="{{ inputVal }}">
 {{# showFileUpload }}
     <input
@@ -23,4 +23,4 @@
 {{^ showFilePreview }}
     <button type="button" class="btn btn-link js-remove-file hide-if-no-file{{^ inputVal }} d-none{{/ inputVal }}">{{ removeButtonLabel }}</button>
 {{/ showFilePreview }}
-</div>
+</div>
diff --git a/packages/admin/templates/charcoal/admin/property/input/file/placeholder-container.mustache b/packages/admin/templates/charcoal/admin/property/input/file/placeholder-container.mustache
@@ -6,7 +6,7 @@
 --}}
 {{# showFilePreview }}
 {{# placeholder }}
-<figure class="img-thumbnail show-if-no-file{{# inputVal }} d-none{{/ inputVal }}">
+<figure class="preview-file img-thumbnail show-if-no-file{{# inputVal }} d-none{{/ inputVal }}">
     <div>
         <img src="{{& placeholderVal }}" style="max-width: 100%; opacity: 0.5">
     </div>
@@ -17,5 +17,4 @@
     </figcaption>
 </figure>
 {{/ placeholder }}
-{{/ showFilePreview }}
-
+{{/ showFilePreview }}
diff --git a/packages/admin/templates/charcoal/admin/property/input/file/preview-container.mustache b/packages/admin/templates/charcoal/admin/property/input/file/preview-container.mustache
@@ -5,7 +5,7 @@
     `charcoal/admin/property/input/file`
 --}}
 {{# showFilePreview }}
-<figure class="figure img-thumbnail hide-if-no-file{{^ inputVal }} d-none{{/ inputVal }}">
+<figure class="preview-file figure img-thumbnail hide-if-no-file{{^ inputVal }} d-none{{/ inputVal }}">
     <div class="js-preview-file">{{& filePreview }}</div>
     <figcaption class="figure-caption p-1">
         <p class="u-truncate">

diff --git a/packages/admin/templates/charcoal/admin/property/input/switch.mustache b/packages/admin/templates/charcoal/admin/property/input/switch.mustache
@@ -9,17 +9,15 @@
     type="hidden"
     name="{{ inputName }}"
 >
-<div class="form-group">
-    <span class="switch switch-lg{{# inputClass }} {{ . }}{{/ inputClass }}">
-        <input
-            class="switch"
-            type="checkbox"
-            id="{{ inputId }}"
-            name="{{ inputName }}"
-            {{# checked }}checked{{/ checked }}
-            {{# readOnly }}readonly{{/ readOnly }}
-            {{# required }}required{{/ required }}
-            {{# disabled }}disabled{{/ disabled }}>
-        <label for="{{ inputId }}"><span class="sr-only">{{# _t }}Toggle Value{{/ _t }}</span></label>
-    </span>
-</div>
+<span class="switch switch-lg{{# inputClass }} {{ . }}{{/ inputClass }}">
+    <input
+        class="switch"
+        type="checkbox"
+        id="{{ inputId }}"
+        name="{{ inputName }}"
+        {{# checked }}checked{{/ checked }}
+        {{# readOnly }}readonly{{/ readOnly }}
+        {{# required }}required{{/ required }}
+        {{# disabled }}disabled{{/ disabled }}>
+    <label for="{{ inputId }}"><span class="sr-only">{{# _t }}Toggle Value{{/ _t }}</span></label>
+</span>