dropdown qa - #374, #375, #376, #377, #378

voxmedia · Jul 29, 2016 · f7a8f46 · f7a8f46
1 parent aba490c
commit f7a8f46
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 24 deletions.
diff --git a/app/assets/javascripts/autotune/application.js b/app/assets/javascripts/autotune/application.js
diff --git a/app/assets/stylesheets/autotune/_core.scss b/app/assets/stylesheets/autotune/_core.scss
@@ -933,10 +933,7 @@ $nav-break: 550px;
       width: auto;
     }
     .filters{
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      align-items: center;
+      display: inline-block;
       margin-left: 0px;
       // .form-inline .form-control{
       //   @media (min-width: 768px){
@@ -984,6 +981,7 @@ $nav-break: 550px;
   // margin: auto;
   width:100%;
   display: flex;
+  z-index: 1;
   .pagination{
     width: initial;
     margin: 0 auto;

diff --git a/app/assets/stylesheets/autotune/_custom_overrides.scss b/app/assets/stylesheets/autotune/_custom_overrides.scss
@@ -4,13 +4,16 @@ input#search{
   float:right;
 }
 
+.filters .select {
+	margin-bottom: 5px;
+}
+
 .selectize-target,
 .selectize-control {
 	z-index: 2;
 }
 
 .selectize-input {
-	min-width: 140px;
 	background-color: color(background);
   color: color(text);
   border: 2px solid color(border);
@@ -42,7 +45,11 @@ input#search{
 }
 
 .selectize-dropdown {
-	width: 100%;
+	width: -moz-fit-content !important;
+  width: -webkit-fit-content !important;
+	width: fit-content !important;
+  margin: auto;   
+	z-index: 3;
 	.option {
 		text-align: left;
 		min-width: 100%;

diff --git a/appjs/templates/project_list.ejs b/appjs/templates/project_list.ejs
@@ -29,7 +29,7 @@
           </div>
           <% if ( app.themes.length > 1 ) { %>
             <div class="select">
-              <select name="theme" id="theme" class="form-control selectize-target" data-auto-submit="true" placeholder = "Search themes">
+              <select name="theme" id="theme" class="form-control selectize-target" data-auto-submit="true" placeholder="Theme">
                 <option disabled <% if(!query.theme) { %>selected<% } %>></option>
               <% app.themes.each(function(theme) { %>
                 <option <% if(theme.get('slug') == query.theme) { %>selected<% } %>
@@ -39,17 +39,17 @@
             </div>
             <% } %>
             <div class="select">
-              <select name="blueprint_title" id="blueprint_title" class="form-control" data-auto-submit="true">
-                <option disabled <% if(!query.blueprint_title) { %>selected<% } %>>Blueprint</option>
+              <select name="blueprint_title" id="blueprint_title" class="form-control selectize-target" data-auto-submit="true" placeholder="Blueprint">
+                <option disabled <% if(!query.blueprint_title) { %>selected<% } %>></option>
               <% _.each(app.config.blueprint_titles, function(blueprint_title) { %>
                 <option <% if(String(blueprint_title.id) === query.blueprint_title) { %>selected<% } %>
                       value="<%=blueprint_title.id %>"><%=blueprint_title.title %></option>
               <% }) %>
               </select>
             </div>
             <div class="select">
-              <select name="pub_status" id="pub_status" class="form-control" data-auto-submit="true">
-                <option disabled <% if(!query.pub_status) { %>selected<% } %>>Status</option>
+              <select name="pub_status" id="pub_status" class="form-control selectize-target" data-auto-submit="true" placeholder="Status">
+                <option disabled <% if(!query.pub_status) { %>selected<% } %>></option>
               <% _.each(app.config.project_pub_statuses, function(pub_status) { %>
                 <option <% if(pub_status === query.pub_status) { %>selected<% } %>
                       value="<%=pub_status %>"><%=pub_status %></option>

diff --git a/appjs/views/edit_project.js b/appjs/views/edit_project.js
@@ -501,6 +501,9 @@ var EditProject = BaseView.extend(require('./mixins/actions'), require('./mixins
             $( "input[name='google_doc_url']" ).after('<button type="button" id="spreadsheet-button" data-hook="create-spreadsheet" class="btn btn-default">Get new spreadsheet</button>');
           }
         }
+        $('div[data-alpaca-field-name="theme"] .form-control').selectize({
+          highlight: false
+        });
       }).catch(function(err) {
         console.error(err);
       }).then(function() {

diff --git a/appjs/views/list_projects.js b/appjs/views/list_projects.js
@@ -14,8 +14,10 @@ module.exports = BaseView.extend(require('./mixins/actions'), require('./mixins/
   },
 
   afterRender: function() {
-    $('.selectize-target').selectize({
-      highlight: false
+    $.each($('.selectize-target'), function(k, v){
+      $(v).selectize({
+        highlight: false
+      });
     });
   },