enhances inline forms display alignment

fixes #147, fixes #149
vincentmorneau · Nov 8, 2016 · b2be6bd · b2be6bd
1 parent 16df414
commit b2be6bd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 40 deletions.
diff --git a/src/js/apex-init.js b/src/js/apex-init.js
@@ -117,18 +117,16 @@ materialAPEX.initial = {
  /* Display only & read only */
  $(".display_only")
  .siblings("label")
- .addClass("active display-only")
- .closest('.input-field')
- .addClass('display-only-container');
+ .addClass("active");
 
  /* Fieldset */
  $("fieldset.checkbox_group, fieldset.radio_group")
  .siblings("label")
- .addClass("active display-only")
+ .addClass("active label-block")
  .closest('.input-field')
  .removeClass('input-field');
 
- $("fieldset.checkbox_group input").each(function(){
+ $("fieldset.checkbox_group input, fieldset.radio_group input").each(function(){
  if (!$(this).next().is("label")) {
  $(this).after("<label for='" + this.id + "'></label>");
  }
@@ -188,9 +186,6 @@ materialAPEX.initial = {
  $(this).closest(".card-panel").remove();
  });
 
- // switches
- $(".switch").parent().addClass("switch-fix");
-
  // checkboxes and radio alternate look
  $(".ma-alternate-look input[type='checkbox']").addClass("filled-in");
  $(".ma-alternate-look input[type='radio']").addClass("with-gap");

diff --git a/src/scss/_apex_buttons.scss b/src/scss/_apex_buttons.scss
@@ -7,7 +7,7 @@
  @extend .right;
 }
 
-// FAB (Fixed Action Button)
+// Fixed Action Button
 .fixed-action-btn {
  bottom: 45px;
  z-index: 997;
@@ -43,3 +43,9 @@
 .fab-relative {
  position: relative;
 }
+
+/* Inline button
+This is to give space as if there was a label */
+.ma-btn-inline {
+ margin-top: 2rem;
+}
diff --git a/src/scss/_apex_forms.scss b/src/scss/_apex_forms.scss
@@ -52,10 +52,6 @@ Inputs
  }
 }
 
-.item-no-label > label {
- display: none!important;
-}
-
 .item-image-responsive img {
  @extend .responsive-img;
 }
@@ -151,44 +147,32 @@ span.ma-error-message {
  }
 }
 
-/* display only */
-label.active.display-only {
- margin-bottom: 10px;
- display: block;
-}
-
+/* Display Only */
 .input-field .prefix ~ .display_only {
  margin-left: 3rem;
 }
 
-.display-only-container {
- margin-top: 3rem;
-
- &.item-no-label {
- margin-top: 0;
- }
-}
-
-.input-field.display-only-container .prefix {
- font-size: 24px;
+/* No Label */
+.item-no-label > label {
+ visibility: hidden!important;
 }
 
 /* Switches */
-.switch {
- margin-top: -0.8rem;
-}
-
-.switch-fix {
- top: -0.8rem;
+.switch label {
+ position: relative;
 }
 
-.input-field .switch+label {
- margin-top: -1.8rem;
+.input-field .switch + label {
+ font-size: 0.8rem;
+ -webkit-transform: translateY(-190%);
+ transform: translateY(-190%);
 }
 
 /* Ranges */
-.input-field .range-field+label {
- top: -.8rem;
+.input-field .range-field + label {
+ font-size: 0.8rem;
+ -webkit-transform: translateY(-190%);
+ transform: translateY(-190%);
 }
 
 /* Text Size */
@@ -228,3 +212,8 @@ label.active.display-only {
  }
  }
 }
+
+/* Fieldset Labels */
+.label-block {
+ display: block;
+}
diff --git a/src/templates/Buttons/Standard.hbs b/src/templates/Buttons/Standard.hbs
@@ -94,5 +94,13 @@
 {{/template_option_groups}}
 
 {{#template_options}}
-{}
+[
+ {
+ "name": "INLINE_BUTTON",
+ "display_name": "Inline (Next to an item)",
+ "display_sequence": 1,
+ "css_classes": "ma-btn-inline",
+ "help_text": ""
+ }
+]
 {{/template_options}}