Add flaot animation to input fields and fix bug with styled-dropdown.

dpgmediamagazines · Aug 15, 2017 · eb6062e · eb6062e
1 parent 7c2752e
commit eb6062e
Show file tree

Hide file tree

Showing 6 changed files with 14,967 additions and 12 deletions.
diff --git a/arctic/static/arctic/dist/assets/css/arctic.css b/arctic/static/arctic/dist/assets/css/arctic.css
diff --git a/arctic/static/arctic/dist/assets/js/app.js b/arctic/static/arctic/dist/assets/js/app.js
diff --git a/arctic/static/arctic/src/assets/js/components/widgets.js b/arctic/static/arctic/src/assets/js/components/widgets.js
@@ -45,6 +45,24 @@ $(document).ready(function() {
             delimiter: ',',
             persist: false,
             plugins: ['remove_button'],
+            onDropdownOpen: function($dropdown) {
+                if ( $('form').hasClass('float-label') ) {
+                    $dropdown.parent().next('label').css({
+                        top: '.3rem',
+                        fontSize: '75%'
+                    });
+                }
+            },
+            onDropdownClose: function($dropdown) {
+                if ( $('form').hasClass('float-label') ) {
+                    if ( $('.float-label .selectize-input').find('.item').length == 0 ) {
+                        $dropdown.parent().next('label').css({
+                            top: '.75rem',
+                            fontSize: '100%'
+                        });
+                    }
+                }
+            },
             create: function(input) {
                 return {
                     value: input,
@@ -73,7 +91,21 @@ $(document).ready(function() {
                         callback(res.options);
                     }
                 });
-            }
+            },
+            onDropdownOpen: function($dropdown) {
+                $dropdown.parent().next('label').css({
+                    top: '.3rem',
+                    fontSize: '75%'
+                });
+            },
+            onDropdownClose: function($dropdown) {
+                if ( $('.float-label .selectize-input').find('.item').length == 0 ) {
+                    $dropdown.parent().next('label').css({
+                        top: '.75rem',
+                        fontSize: '100%'
+                    });
+                }
+            },
         });
     });
 

diff --git a/arctic/static/arctic/src/assets/scss/partials/_float-label.scss b/arctic/static/arctic/src/assets/scss/partials/_float-label.scss
@@ -1,7 +1,3 @@
-.form-control {
-    padding: $input-btn-padding-y $input-btn-padding-x;
-}
-
 .float-label {
 
     input[type='text'],
@@ -66,6 +62,11 @@
         }
     }
 
+    .styled-select label {
+        top: .3rem;
+        font-size: 75%;
+    }
+
     .selectize-control {
 
         .selectize-input {
@@ -90,8 +91,6 @@
     .selectize-control ~ label {
         pointer-events: none;
         user-select: none;
-        top: .3rem;
-        font-size: 75%;
     }
 
     .selectize-control.single {

diff --git a/arctic/static/arctic/src/assets/scss/partials/_forms.scss b/arctic/static/arctic/src/assets/scss/partials/_forms.scss
@@ -27,6 +27,10 @@ label {
     padding-left: 2px;
 }
 
+.form-control {
+    padding: $input-btn-padding-y $input-btn-padding-x;
+}
+
 .form-check-label {
     position: relative;
     top: 27px;
@@ -100,6 +104,7 @@ label {
         border-style: solid;
         border-width: 5px 5px 0 5px;
         content: ' ';
+        pointer-events: none;
     }
 }
 

diff --git a/arctic/templates/arctic/index.html b/arctic/templates/arctic/index.html
@@ -60,8 +60,8 @@ <h4 id="form" data-magellan-target="form">Form with validation</h4>
                 </div>
                 <div class="col-sm-6 col-md-3 col">
                     <div class="form-group styled-select">
-                        <label for="select-gear">Option groups</label>
-                        <select id="select-gear" placeholder="Select gear...">
+                        <label for="styled-select">Option groups</label>
+                        <select id="styled-select">
                             <option value="">Select gear...</option>
                             <optgroup label="Climbing">
                                 <option value="pitons">Pitons</option>