fixed filter selects (empty option & lack of styling)

Author: Oaphi

app/assets/javascripts/audit_logs.js

@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-log-type-select, .js-event-type-select').forEach((el) => {
+    $(el).select2();
+  });
+})

app/assets/stylesheets/audit_logs.scss

@@ -0,0 +1,22 @@
+@import 'variables';
+
+.audit-log-filters {
+  .select2-container {
+    height: 37px;
+    margin: 4px 0px;
+
+    .selection {
+
+      .select2-selection {
+        border-color: $muted-graphic;
+        height: 100%;
+        padding: 4px 0;
+      }
+
+      .select2-selection__arrow {
+        top: 50%;
+        translate: 0 -50%;
+      }
+    }
+  }
+}

app/assets/stylesheets/forms.scss

@@ -55,6 +55,10 @@ select.form-element {
   z-index: 8999;
 }
 
+.select2-results__option {
+  min-height: 2em;
+}
+
 @for $i from 1 through 25 {
   textarea.has-rows[rows="#{$i}"] {
     min-height: (1.2em * $i) + 1.2em;

app/views/admin/audit_log.html.erb

@@ -2,18 +2,18 @@
 
 <div>
   <h3>Filters</h3>
-  <%= form_tag audit_log_path, method: :get, class: 'form-inline' do %>
+  <%= form_tag audit_log_path, method: :get, class: 'form-inline audit-log-filters' do %>
     <div class="form-group-horizontal">
       <div class="form-group">
         <%= label_tag :log_type, 'Log category', class: 'form-element' %>
         <%= select_tag :log_type, options_for_select(@log_types.map { |lt| [lt, lt] }, selected: params[:log_type]),
-                       include_blank: true, class: 'form-element' %>
+                       include_blank: true, class: 'form-element js-log-type-select' %>
       </div>
       <div class="form-group">
         <%= label_tag :event_type, 'Event', class: 'form-element' %>
         <%= select_tag :event_type, options_for_select(@event_types.map { |et| [et, et] },
                                                        selected: params[:event_type]),
-                       include_blank: true, class: 'form-element' %>
+                       include_blank: true, class: 'form-element js-event-type-select' %>
       </div>
       <div class="form-group">
         <%= label_tag :from, 'From date', class: 'form-element' %>