Update custom validation && location style

assets/javascripts/wizard/initializers/custom.js.es6

@@ -179,7 +179,6 @@ export default {
           type: 'PUT',
           data: { fields }
         }).catch(response => {
-          console.log(response)
           if (response && response.responseJSON && response.responseJSON.errors) {
             let wizardErrors = [];
             response.responseJSON.errors.forEach(err => {
@@ -248,39 +247,31 @@ export default {
     ];
 
     FieldModel.reopen({
-      hasCustomCheck: false,
-
-      customCheck() {
-        return true;
-      },
-
       check() {
-        let valid = this.get('valid');
+        if (this.customCheck) {
+          return this.customCheck();
+        }
+        
+        let valid = this.valid;
 
-        if (!this.get('required')) {
+        if (!this.required) {
           this.setValid(true);
           return true;
         }
 
-        const hasCustomCheck = this.get('hasCustomCheck');
-        if (hasCustomCheck) {
-          valid = this.customCheck();
-        } else {
-          const val = this.get('value');
-          const type = this.get('type');
-                    
-          if (type === 'checkbox') {
-            valid = val;
-          } else if (type === 'upload') {
-            valid = val && val.id > 0;
-          } else if (StandardFieldValidation.indexOf(type) > -1) {
-            valid = val && val.toString().length > 0;
-          } else if (type === 'url') {
-            valid = true;
-          }
+        const val = this.get('value');
+        const type = this.get('type');
+                  
+        if (type === 'checkbox') {
+          valid = val;
+        } else if (type === 'upload') {
+          valid = val && val.id > 0;
+        } else if (StandardFieldValidation.indexOf(type) > -1) {
+          valid = val && val.toString().length > 0;
+        } else if (type === 'url') {
+          valid = true;
         }
-
-
+            
         this.setValid(valid);
 
         return valid;

assets/stylesheets/wizard/wizard_locations.scss

@@ -1,11 +1,19 @@
 @import "wizard_variables";
 
-.location-selector-container {
-  width: 350px;
+.location-form-instructions {
+  color: #919191;
+  margin: 5px 0;
+  font-size: 80%;
+  line-height: 1.4em;
+
+  a {
+    text-decoration: underline;
+  }
 }
 
 .location-form {
   display: flex;
+  overflow: visible;
 
   .title {
     font-weight: 700;
@@ -40,30 +48,16 @@
   }
 
   .address + .coordinates {
-    border-left: 1px solid #eee;
+    border-left: 1px solid $primary-low;
     padding-left: 20px;
   }
-}
-
-.location-form-instructions {
-  color: #919191;
-  margin: 5px 0;
-  font-size: 80%;
-  line-height: 1.4em;
-
-  a {
-    text-decoration: underline;
-  }
-}
-
-.location-form, .add-location {
-  overflow: visible;
-
+  
   .control-group {
     display: inline-block;
     vertical-align: top;
     margin-right: 20px;
     margin-top: 10px;
+    width: auto;
 
     .instructions {
       @extend .location-form-instructions;
@@ -86,4 +80,111 @@ input.input-location, div.input-location {
   box-shadow: none;
   box-sizing: border-box;
   margin: 0;
+}
+
+.input-location .select2-choice {
+  padding: 2px 5px;
+}
+
+.input-location.input-small {
+  width: 100px;
+}
+
+.location-selector-container {
+  position: relative;
+
+  .ac-wrap {
+    box-sizing: border-box;
+
+    .ac-loading {
+      position: absolute;
+      top: 7px;
+      right: 5px;
+    }
+
+    .item {
+      line-height: 1.6;
+    }
+
+    .autocomplete {
+      width: inherit;
+      left: 0 !important;
+      width: 100%;
+      top: 30px !important;
+      box-sizing: border-box;
+
+      li, .no-results {
+        padding: 10px;
+      }
+
+      ul > label {
+        @extend .location-form-instructions;
+        padding: 0 5px;
+      }
+    }
+  }
+}
+
+.location-form-result {
+  cursor: pointer;
+  background-color: $secondary;
+  display: flex;
+
+  &:hover, &.selected {
+    background-color: $tertiary;
+    color: white;
+
+    label {
+      color: white;
+    }
+  }
+
+  label {
+    flex: 1 1 auto;
+    margin-bottom: 0;
+    cursor: pointer;
+  }
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.location-results {
+  max-width: 550px;
+  position: relative;
+
+  .spinner {
+    position: absolute;
+    right: 50%;
+    top: 50%;
+  }
+
+  ul {
+    background-color: dark-light-diff($primary, $secondary, 97%, -65%);
+    border: 1px solid #e9e9e9;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    height: 95px;
+    overflow: scroll;
+  }
+
+  li {
+    padding: 6px 12px;
+  }
+
+  .no-results {
+    padding: 15px;
+  }
+
+  .default {
+    margin: 0 auto;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    color: #919191;
+  }
 }