Merge pull request #2229 from aignatov-bio/ai-sci-4111-fix-css-on-activity-page

Update css for global activities page [SCI-4111]

app/assets/stylesheets/global_activities.scss

@@ -51,6 +51,7 @@
       }
 
       .ga-search-container {
+        display: none;
         flex-grow: 1;
         max-width: 500px;
         position: relative;
@@ -174,9 +175,15 @@
     flex-grow: 5;
     height: 100%;
     overflow: hidden;
-    padding-top: 10px;
     position: relative;
 
+    .activities-container {
+      height: 100%;
+      padding-top: 10px;
+      position: absolute;
+      width: 100%;
+    }
+
     .ga-activities-list {
 
       .activities-day {
@@ -303,9 +310,15 @@
   height: 100%;
   margin-right: -15px;
   overflow: hidden;
-  padding: 15px 20px;
   position: relative;
 
+  .filters-container {
+    height: 100%;
+    margin-bottom: 60px;
+    padding: 15px 20px;
+    position: absolute;
+  }
+
   .filter-block {
     display: inline-block;
     width: 100%;
@@ -340,6 +353,10 @@
         display: none;
       }
     }
+
+    &.report-block {
+      margin-bottom: 60px;
+    }
   }
 
   .date-selector {
@@ -436,12 +453,27 @@
 .datetime-picker-container {
   position: relative;
 
-  input {
+  .fa-calendar-alt {
+    color: $color-silver-chalice;
+    font-size: 18px;
+    line-height: 34px;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: 34px;
+    }
+
+  .calendar-input {
     background-color: transparent !important;
     box-shadow: none;
     color: inherit;
+    cursor: pointer;
     font-size: 13px;
     padding-left: 5px;
+    padding-right: 34px;
+    position: relative;
+    z-index: 3;
 
     &::placeholder {
       color: $color-silver-chalice;

app/views/global_activities/_date_picker.html.erb

@@ -2,7 +2,8 @@
   <% if label %>
     <label class="control-label required" for="calendar-<%= id %>"><%= label %></label>
   <% end %>
-  <input type="datetime" class="form-control" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" value="<%= defined?(setDate) ? setDate : '' %>"/>
+  <span class="fas fa-calendar-alt"></span>
+  <input type="datetime" class="form-control calendar-input" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" value="<%= defined?(setDate) ? setDate : '' %>"/>
   <%
     js_format = I18n.backend.date_format.dup
       js_format.gsub!(/%-d/, 'D')

app/views/global_activities/_side_filters.html.erb

@@ -121,7 +121,7 @@
 </div>
 
 
-<div class="filter-block small-left">
+<div class="filter-block small-left report-block">
   <h4 class="title"><%= t('global_activities.index.reports') %></h4>
   <h6 class="report clear"><%= t('global_activities.index.clear') %></h6>
   <div class="select-container">

app/views/global_activities/index.html.erb

@@ -7,26 +7,30 @@
   <div class="ga-bottom">
 
 
-    <div class="ga-main perfect-scrollbar">
+    <div class="ga-main">
-      <div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
+      <div class="activities-container perfect-scrollbar">
-        <p><%= t('activities.index.no_activities_message') %></p>
+        <div class="no-activities-message text-center <%= 'hidden' if @grouped_activities.keys.any? %>">
+          <p><%= t('activities.index.no_activities_message') %></p>
+        </div>
+        <div class="ga-activities-list"
+             data-activities-url="<%= global_activities_path %>"
+             data-starting-timestamp="<%= @starting_timestamp %>">
+          <%= render partial: "activity_list.html.erb" %>
+        </div>
+        <div class="text-center">
+          <a class="btn btn-default btn-more-activities <%= 'hidden' unless @next_page %>"
+             data-next-page="<%= @next_page %>">
+            <%= t'activities.index.more_activities' %>
+          </a>
+        </div>
+        <div id="ga-more-activities-placeholder" class="hidden"></div>
       </div>
-      <div class="ga-activities-list"
-           data-activities-url="<%= global_activities_path %>"
-           data-starting-timestamp="<%= @starting_timestamp %>">
-        <%= render partial: "activity_list.html.erb" %>
-      </div>
-      <div class="text-center">
-        <a class="btn btn-default btn-more-activities <%= 'hidden' unless @next_page %>"
-           data-next-page="<%= @next_page %>">
-          <%= t'activities.index.more_activities' %>
-        </a>
-      </div>
-      <div id="ga-more-activities-placeholder" class="hidden"></div>
     </div>
 
-    <div class="ga-side perfect-scrollbar">
+    <div class="ga-side">
-      <%= render partial: "side_filters" %>
+      <div class="filters-container perfect-scrollbar">
+        <%= render partial: "side_filters" %>
+      </div>
     </div>
     
   </div>