Merge pull request civicrm#125 from compucorp/C51-325-activity-feed-f…

…ixed-layout C51-325: Fix Activity Details Scrolling
swastikpareek · Nov 27, 2018 · b79dd62 · b79dd62
2 parents d73957c + a89f4c4
commit b79dd62
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/ang/civicase/ActivityFeed.js b/ang/civicase/ActivityFeed.js
@@ -435,9 +435,13 @@
         });
 
         $activityDetailsPanel.on('affixed.bs.affix', function () {
-          $activityDetailsPanel.css('top', activityPanelMeasurements.getDistanceFromTop());
+          $activityDetailsPanel
+            .css('top', activityPanelMeasurements.getDistanceFromTop())
+            .width($element.width());
         }).on('affixed-top.bs.affix', function () {
-          $activityDetailsPanel.css('top', 'auto');
+          $activityDetailsPanel
+            .css('top', 'auto')
+            .css('width', 'auto');
         });
       }
 

diff --git a/ang/civicase/ActivityPanelMeasurements.js b/ang/civicase/ActivityPanelMeasurements.js
@@ -9,7 +9,6 @@
       (function init () {
         $filter = $('.civicase__activity-filter');
         $feedListContainer = $('.civicase__activity-feed__list-container');
-        $panelActionBar = $activityPanel.find('.crm-submit-buttons');
         $panelHeader = $activityPanel.find('.panel-heading');
         $panelSubHeader = $activityPanel.find('.panel-subheading');
         $tabs = $('.civicase__dashboard').length > 0 ? $('.civicase__dashboard__tab-container ul.nav') : $('.civicase__case-body_tab');
@@ -48,6 +47,7 @@
        */
       function getPanelBodyTopOffset () {
         var topOffset = getDistanceFromTop();
+        $panelActionBar = $activityPanel.find('.crm-submit-buttons');
 
         return topOffset + $panelHeader.outerHeight() + $panelSubHeader.outerHeight() + $panelActionBar.outerHeight();
       }

diff --git a/css/civicase.min.css b/css/civicase.min.css
diff --git a/scss/components/_activity-panel.scss b/scss/components/_activity-panel.scss
@@ -1,20 +1,26 @@
 .civicase__activity-panel {
   &.affix {
     position: fixed !important;
-    width: calc(30% - 12px);
-
-    @media (max-width: $activity-feed-breakpoint) {
-      width: calc(40% - 12px);
-    }
   }
 
   .panel {
     overflow: auto;
     position: relative;
   }
 
+  .panel-heading,
+  .panel-subheading {
+    position: absolute;
+    width: 100%;
+  }
+
+  .panel-subheading {
+    top: 63px; // height of activity panel header
+  }
+
   .panel-body {
     margin-bottom: 76px; // height of activity panel footer
+    margin-top: 120px; // height of activity panel header + subheader
     overflow: auto;
     padding: 0;
   }