From db065a58e7b6e945117232e92f0bfd10d0f0760f Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Fri, 19 Jun 2020 19:42:09 +0200
Subject: [PATCH] Added scrolling to members import preview table

no issues.
- adds scrolling to import table
- adds shadow to top and bottom if the table is taller than the viewport
---
 .../components/gh-members-import-table.hbs    | 12 +--
 .../app/components/modal-import-members.hbs   |  4 +-
 ghost/admin/app/styles/layouts/members.css    | 73 +++++++++++++++++--
 3 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-import-table.hbs b/ghost/admin/app/components/gh-members-import-table.hbs
index 0f1ac4028e..8a8bbd0748 100644
--- a/ghost/admin/app/components/gh-members-import-table.hbs
+++ b/ghost/admin/app/components/gh-members-import-table.hbs
@@ -1,9 +1,9 @@
-<table class="ba b--whitegrey br3 f8 gh-members-import-table mt1">
+<table class="f8 gh-members-import-table ma0">
     <thead>
-        <th class="bb br b--whitegrey bg-whitegrey-l2"><span class="f-small midgrey ttu fw5">Header</span></th>
-        <th class="bb b--whitegrey bg-whitegrey-l2">
+        <th class="bb br b--whitegrey"><span class="f-small midgrey ttu fw5">Header</span></th>
+        <th class="bb b--whitegrey">
             <div class="flex items-center justify-between">
-                <span class="f-small midgrey ttu fw5">Data</span>
+                <span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
                 <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
                     <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a> 
                     <a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
@@ -14,8 +14,8 @@
     <tbody>
         {{#each-in currentlyDisplayedData as |key value|}}
             <tr>
-                <td class="br b--whitegrey middarkgrey"><span>{{key}}</span></td>
-                <td class="br b--whitegrey middarkgrey {{unless value "bg-whitegrey-l2"}}"><span>{{value}}</span></td>
+                <td class="middarkgrey"><span>{{key}}</span></td>
+                <td class="middarkgrey {{unless value "empty-cell"}}"><span>{{value}}</span></td>
             </tr>
         {{else}}
             <tr>
diff --git a/ghost/admin/app/components/modal-import-members.hbs b/ghost/admin/app/components/modal-import-members.hbs
index 807e9935b7..fdf6db896f 100644
--- a/ghost/admin/app/components/modal-import-members.hbs
+++ b/ghost/admin/app/components/modal-import-members.hbs
@@ -45,7 +45,9 @@
             <GhFormGroup>
                 {{#if this.config.enableDeveloperExperiments}}
                     <h4 class="fw6 f8 dib mb1">Preview</h4>
-                    <GhMembersImportTable @importData={{this.fileData}}/>
+                    <div class="gh-members-import-scrollarea">
+                        <GhMembersImportTable @importData={{this.fileData}}/>
+                    </div>
                 {{else}}
                     <div class="bg-whitegrey-l2 ba b--whitegrey br3">
                         <div class="flex flex-column items-center justify-center gh-members-import-file">
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index ef3174fdb4..4d3445a2f4 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -465,6 +465,32 @@ textarea.gh-member-details-textarea {
     border-left: 4px solid var(--red);
 }
 
+.gh-members-import-scrollarea {
+    position: relative;
+    max-height: calc(100vh - 350px - 12vw);
+    min-height: 175px;
+    overflow-y: scroll;
+    margin: 0 -32px;
+    padding: 0 32px;
+    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,.12), rgba(0,0,0,0)) -64px 0,
+        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.12), rgba(0,0,0,0)) -64px 100%; */
+        linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0)),
+        linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.08)) 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;
+    margin-top: 4px;
+}
+
 .gh-members-import-errorheading {
     font-size: 1.4rem;
     line-height: 1.55em;
@@ -488,12 +514,42 @@ p.gh-members-import-errordetailtext {
     margin-bottom: 6px;
 }
 
-.gh-members-import-table th {
-    padding: 3px 8px;
+.gh-members-import-table {
+    position: relative;
+    border: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
 }
 
-.gh-members-import-datanav {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05);
+.gh-members-import-table::before {
+    position: absolute;
+    display: block;
+    content: "";
+    top: 0;
+    left: -33px;
+    bottom: 0;
+    height: 100%;
+    width: 32px;
+    background: var(--white);
+}
+
+.gh-members-import-table::after {
+    position: absolute;
+    display: block;
+    content: "";
+    top: 0;
+    right: -33px;
+    bottom: 0;
+    height: 100%;
+    width: 32px;
+    background: var(--white);
+}
+
+.gh-members-import-table th {
+    padding: 3px 8px;
+    background: color-mod(var(--darkgrey) a(5%) s(+50%));
+}
+
+.gh-members-import-table td.empty-cell {
+    background: color-mod(var(--darkgrey) a(3%) s(+50%));
 }
 
 .gh-members-import-table td {
@@ -502,11 +558,16 @@ p.gh-members-import-errordetailtext {
 
 .gh-members-import-table tr td:first-of-type,
 .gh-members-import-table tr th:first-of-type {
-    max-width: 112px;
+    width: 170px;
+    border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
 }
 
 .gh-members-import-table tr:not(:last-of-type) td {
-    border-bottom: 1px solid var(--whitegrey);
+    border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+}
+
+.gh-members-import-datanav {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 p.gh-members-import-errordetail {