From 9ddb515ceff5bf838e32f822246868ff3a20a21e Mon Sep 17 00:00:00 2001
From: Arif <arifkhalid99@gmail.com>
Date: Thu, 4 Apr 2024 22:29:28 +0800
Subject: [PATCH 1/4] Refactor bottom shadow into class on paginator

---
 src/app/issues-viewer/card-view/card-view.component.css  | 8 ++++++--
 src/app/issues-viewer/card-view/card-view.component.html | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
index b1c656be..79908753 100644
--- a/src/app/issues-viewer/card-view/card-view.component.css
+++ b/src/app/issues-viewer/card-view/card-view.component.css
@@ -99,12 +99,16 @@ div.column-header .mat-card-header {
   background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), transparent);
 }
 
-.scrollable-container-wrapper::after {
+.mat-paginator {
+  position: relative;
+}
+
+.column-footer::before {
   pointer-events: none;
   content: '';
   position: absolute;
   z-index: 1;
-  bottom: 0;
+  top: -5px;
   left: 0;
   right: 0;
   height: 5px;
diff --git a/src/app/issues-viewer/card-view/card-view.component.html b/src/app/issues-viewer/card-view/card-view.component.html
index 37b3e98e..07334cf8 100644
--- a/src/app/issues-viewer/card-view/card-view.component.html
+++ b/src/app/issues-viewer/card-view/card-view.component.html
@@ -14,9 +14,10 @@
     </div>
   </div>
   <mat-paginator
+    class="column-footer"
     [pageSize]="pageSize"
     [pageSizeOptions]="[10, 20, 50]"
-    [class]="pageSize >= issueLength ? 'pagination-hide-arrow' : ''"
+    [class.pagination-hide-arrow]="pageSize >= issueLength"
     (page)="updatePageSize($event.pageSize)"
   ></mat-paginator>
 </div>

From 1a4fe2ff870ff5530b7f0745f829617267ce95b4 Mon Sep 17 00:00:00 2001
From: Arif <arifkhalid99@gmail.com>
Date: Mon, 8 Apr 2024 13:39:05 +0800
Subject: [PATCH 2/4] Fix shadow behaviour

---
 .../card-view/card-view.component.css         | 45 +++++++++----------
 .../card-view/card-view.component.html        |  3 +-
 .../issue-pr-card/issue-pr-card.component.css |  1 +
 3 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
index 79908753..9a4c9c40 100644
--- a/src/app/issues-viewer/card-view/card-view.component.css
+++ b/src/app/issues-viewer/card-view/card-view.component.css
@@ -52,7 +52,26 @@ div.column-header .mat-card-header {
   position: relative;
 }
 
-/* Ref: https://css-scroll-shadows.vercel.app */
+/* Ref: https://lea.verou.me/blog/2012/04/background-attachment-local/ */
+.scroll-shadow {
+  background:
+    /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+    /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+    radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background:
+    /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+    /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+  /* Opera doesn't support this in the shorthand */
+  background-attachment: local, local, scroll, scroll;
+}
+
 .scrollable-container::before {
   pointer-events: none;
   content: '';
@@ -87,34 +106,10 @@ div.column-header .mat-card-header {
   display: none;
 }
 
-.scrollable-container-wrapper::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 5px;
-  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), transparent);
-}
-
 .mat-paginator {
   position: relative;
 }
 
-.column-footer::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: -5px;
-  left: 0;
-  right: 0;
-  height: 5px;
-  background-image: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), transparent);
-}
-
 .loading-spinner {
   display: flex;
   justify-content: center;
diff --git a/src/app/issues-viewer/card-view/card-view.component.html b/src/app/issues-viewer/card-view/card-view.component.html
index 07334cf8..80ee0f83 100644
--- a/src/app/issues-viewer/card-view/card-view.component.html
+++ b/src/app/issues-viewer/card-view/card-view.component.html
@@ -3,7 +3,7 @@
     [ngTemplateOutlet]="getHeaderTemplate() || defaultHeader"
     [ngTemplateOutletContext]="{ $implicit: this.group }"
   ></ng-container>
-  <div class="scrollable-container-wrapper">
+  <div class="scrollable-container-wrapper scroll-shadow">
     <div class="scrollable-container">
       <div class="issue-pr-cards" *ngFor="let issue of this.issues$ | async; index as i">
         <app-issue-pr-card [issue]="issue" [filter]="issues.filter" [milestoneService]="milestoneService"></app-issue-pr-card>
@@ -14,7 +14,6 @@
     </div>
   </div>
   <mat-paginator
-    class="column-footer"
     [pageSize]="pageSize"
     [pageSizeOptions]="[10, 20, 50]"
     [class.pagination-hide-arrow]="pageSize >= issueLength"
diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.css b/src/app/shared/issue-pr-card/issue-pr-card.component.css
index 373546ae..76f2ced3 100644
--- a/src/app/shared/issue-pr-card/issue-pr-card.component.css
+++ b/src/app/shared/issue-pr-card/issue-pr-card.component.css
@@ -1,5 +1,6 @@
 .card {
   margin: 8px 0px 8px 0px;
+  background-color: transparent;
 }
 
 .mat-card {

From a997f4ade769dc74f5d27adfb93a43f0237cdafd Mon Sep 17 00:00:00 2001
From: Arif <arifkhalid99@gmail.com>
Date: Mon, 8 Apr 2024 13:41:37 +0800
Subject: [PATCH 3/4] Remove unnecessary changes

---
 src/app/issues-viewer/card-view/card-view.component.css  | 4 ----
 src/app/issues-viewer/card-view/card-view.component.html | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
index 9a4c9c40..3f55caf3 100644
--- a/src/app/issues-viewer/card-view/card-view.component.css
+++ b/src/app/issues-viewer/card-view/card-view.component.css
@@ -106,10 +106,6 @@ div.column-header .mat-card-header {
   display: none;
 }
 
-.mat-paginator {
-  position: relative;
-}
-
 .loading-spinner {
   display: flex;
   justify-content: center;
diff --git a/src/app/issues-viewer/card-view/card-view.component.html b/src/app/issues-viewer/card-view/card-view.component.html
index 80ee0f83..3e876acf 100644
--- a/src/app/issues-viewer/card-view/card-view.component.html
+++ b/src/app/issues-viewer/card-view/card-view.component.html
@@ -16,7 +16,7 @@
   <mat-paginator
     [pageSize]="pageSize"
     [pageSizeOptions]="[10, 20, 50]"
-    [class.pagination-hide-arrow]="pageSize >= issueLength"
+    [class]="pageSize >= issueLength ? 'pagination-hide-arrow' : ''"
     (page)="updatePageSize($event.pageSize)"
   ></mat-paginator>
 </div>

From 9aa8ce2908492bb33928e8e3b99aa10412312a57 Mon Sep 17 00:00:00 2001
From: Arif <arifkhalid99@gmail.com>
Date: Mon, 8 Apr 2024 13:51:20 +0800
Subject: [PATCH 4/4] Adjust darkness of shadow

---
 src/app/issues-viewer/card-view/card-view.component.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
index 3f55caf3..10fdf38e 100644
--- a/src/app/issues-viewer/card-view/card-view.component.css
+++ b/src/app/issues-viewer/card-view/card-view.component.css
@@ -62,8 +62,8 @@ div.column-header .mat-card-header {
   background:
     /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
     linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
-    /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
-    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+    /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
   background-repeat: no-repeat;
   background-color: white;
   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;