From 6f0c14cc07ed834a5096c6f3e35036eded46e447 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 14 Apr 2021 09:00:30 -0700
Subject: [PATCH] Make filter editor / bulk editor 'sticky' on scroll

---
 .../document-list/document-list.component.html           | 8 ++++----
 .../document-list/document-list.component.scss           | 9 +++++++++
 src-ui/src/theme.scss                                    | 6 +++++-
 src-ui/src/theme_dark.scss                               | 4 ++++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 45b6fad37..8b91949a8 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -75,7 +75,7 @@
 
 </app-page-header>
 
-<div class="w-100 mb-2 mb-sm-4">
+<div class="w-100 sticky-top py-2 mt-n3 py-sm-4 bg-body">
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>
@@ -99,7 +99,7 @@
     <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickMoreLike)="clickMoreLike(d.id)">
     </app-document-card-large>
   </div>
-  
+
   <table class="table table-sm border shadow-sm" *ngIf="displayMode == 'details'">
     <thead>
       <th></th>
@@ -174,10 +174,10 @@
       </tr>
     </tbody>
   </table>
-  
+
   <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
     <app-document-card-small [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
   </div>
-  
+
 
 </ng-template>
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index 28f765e29..ab67d9572 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -34,3 +34,12 @@ $paperless-card-breakpoints: (
   right: 0 !important;
   left: auto !important;
 }
+
+.sticky-top {
+  z-index: 1000; // below main navbar
+  top: calc(7rem - 2px); // height of navbar (mobile)
+
+  @media (min-width: 768px) {
+    top: 3.5rem; // height of navbar
+  }
+}
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index df2aea003..113968a9f 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -4,4 +4,8 @@ $primaryFaded: #d1ddd2;
 
 $theme-colors: (
   "primary": $primary
-);
\ No newline at end of file
+);
+
+.bg-body {
+  background-color: #fff;
+}
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index 996f9da3d..25abac773 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -37,6 +37,10 @@ $border-color-dark-mode: #47494f;
     }
   }
 
+  .bg-body {
+    background-color: $bg-dark-mode !important;
+  }
+
   .text-light {
     color: $text-color-dark-mode !important;
   }