From 2d5df1b3b72f22c7da2963645bdb42d5eb771df2 Mon Sep 17 00:00:00 2001
From: Anton Ignatov <aignatov@biosistemika.com>
Date: Mon, 25 Mar 2019 13:56:32 +0100
Subject: [PATCH] Moving dropdown container to left

---
 .../javascripts/select2_customization.js      |  5 +++-
 .../stylesheets/select2_customizations.scss   | 23 +++++++++++++++++++
 .../global_activities/_side_filters.html.erb  | 11 +++++----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/select2_customization.js b/app/assets/javascripts/select2_customization.js
index 622612a27..eb04c1b9d 100644
--- a/app/assets/javascripts/select2_customization.js
+++ b/app/assets/javascripts/select2_customization.js
@@ -24,7 +24,6 @@ $.fn.extend({
       select2.next().find('.select2-selection .select2-selection__rendered').css('width', '100%');
     }
 
-
     // select all check
     this[0].dataset.singleDisplay = config.singleDisplay || false;
     if (this[0].dataset.selectAll === 'true') {
@@ -49,6 +48,10 @@ $.fn.extend({
             $(selectElement).select2('open');
           });
         }
+
+        if (selectElement.dataset.dropdownPosition === 'left') {
+          $('.select2-dropdown').parent().addClass('left-position');
+        }
       })
       // Prevent shake bug with multiple select
       .on('select2:open select2:close', function() {
diff --git a/app/assets/stylesheets/select2_customizations.scss b/app/assets/stylesheets/select2_customizations.scss
index 47037fc06..1fef68d1d 100644
--- a/app/assets/stylesheets/select2_customizations.scss
+++ b/app/assets/stylesheets/select2_customizations.scss
@@ -30,6 +30,7 @@
 
   .select2-dropdown {
     border: 1px solid $color-alto;
+    z-index: 1000;
 
     .select2_select_all {
       border: 0;
@@ -87,3 +88,25 @@
     }
   }
 }
+
+@media (min-width: 1200px) {
+
+  .select2-container--open.left-position {
+    left: calc(75% - 280px) !important;
+    top: 60px  !important;
+
+    .select2-dropdown {
+      border-radius: 0px;
+      height: calc(100vh - 70px)  !important;
+      width: 300px !important;
+
+      .select2-results {
+        height: calc(100% - 31px);
+      }
+
+      .select2-results__options {
+        max-height: 100%;
+      }
+    }
+  }
+}
diff --git a/app/views/global_activities/_side_filters.html.erb b/app/views/global_activities/_side_filters.html.erb
index a8860b06e..29305ae63 100644
--- a/app/views/global_activities/_side_filters.html.erb
+++ b/app/views/global_activities/_side_filters.html.erb
@@ -5,7 +5,8 @@
     <%= select_tag "team", options_from_collection_for_select(@teams, :id, :name, current_user.current_team_id),{
         'data-select-all-button': t('global_activities.index.all_teams'),
         'data-select-multiple-name': t('global_activities.index.l_teams'),
-        'data-select-multiple-all-selected': t('global_activities.index.all_teams')
+        'data-select-multiple-all-selected': t('global_activities.index.all_teams'),
+        'data-dropdown-position': 'left'
       } %>
     </div>
 </div>
@@ -40,7 +41,8 @@
       'data-select-all-button': t('global_activities.index.all_activities'),
       'data-select-all': 'true',
       'data-select-multiple-name': t('global_activities.index.l_activities'),
-      'data-select-multiple-all-selected': t('global_activities.index.all_activities')
+      'data-select-multiple-all-selected': t('global_activities.index.all_activities'),
+      'data-dropdown-position': 'left'
     } %>
   </div>
 </div>
@@ -53,7 +55,8 @@
       'data-select-all-button': t('global_activities.index.all_users'),
       'data-select-all': 'true',
       'data-select-multiple-name': t('global_activities.index.l_users'),
-      'data-select-multiple-all-selected': t('global_activities.index.all_users')
+      'data-select-multiple-all-selected': t('global_activities.index.all_users'),
+      'data-dropdown-position': 'left'
     } %>
   </div>
 </div>
@@ -62,6 +65,6 @@
   <h4 class="title"><strong><%= t('global_activities.index.object') %></strong></h4>
   <h6 class="clear"><%= t('global_activities.index.clear') %></h6>
   <div class="select-container">
-    <select name="subject" data-select-all="false"></select>
+    <select name="subject" data-select-all="false" data-dropdown-position="left"></select>
   </div>
 </div>