From 52999058516d4f7faa9e986028eb063b7a401bfe Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 28 Sep 2022 18:18:45 +0100
Subject: [PATCH] Added in the static front-end of the pagination

refs https://github.com/TryGhost/Team/issues/1984
---
 ghost/admin/app/styles/layouts/content.css    | 95 +++++++++++++++++--
 ghost/admin/app/templates/posts/analytics.hbs | 17 ++++
 .../assets/icons/arrow-left-pagination.svg    | 10 ++
 .../assets/icons/arrow-right-pagination.svg   | 10 ++
 4 files changed, 123 insertions(+), 9 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/arrow-left-pagination.svg
 create mode 100644 ghost/admin/public/assets/icons/arrow-right-pagination.svg

diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 502410dbd1..51200188b0 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -936,15 +936,6 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     border-radius: var(--border-radius);
 }
 
-.gh-links-list-item:first-child {
-    padding-top: 0;
-}
-
-.gh-links-list-item:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-}
-
 .gh-links-list-item {
     display: flex;
     justify-content: space-between;
@@ -956,6 +947,19 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     text-decoration: none;
 }
 
+.gh-links-list-item:first-child {
+    padding-top: 0;
+}
+
+.gh-links-list-item:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.gh-links-list > .gh-links-list-item:last-child {
+    border-bottom: 0 none;
+}
+
 .gh-links-list-item a {
     margin: 0;
     padding: 0 32px 0 0;
@@ -975,6 +979,79 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     color: var(--darkgrey);
 }
 
+.gh-links-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: calc(100% + 40px);
+    background: linear-gradient(180deg, #FBFBFB 0%, #FFFFFF 50%);
+    padding: 20px;
+    margin: -1px -20px -20px -20px;
+    border-top: 1px solid var(--lightgrey-l1);
+    border-radius: 0 0 3px 3px;
+}
+
+.gh-links-pagination-progress {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0.01em;
+    color: var(--midlightgrey);
+}
+
+.gh-links-pagination-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.gh-links-pagination-action {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    color: var(--green);
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: 0.01em;
+    transition: color .2s linear;
+}
+
+.gh-links-pagination-action.gh-links-pagination-prev {
+    position: relative;
+    padding-right: 20px;
+}
+
+.gh-links-pagination-action.gh-links-pagination-prev:after {
+    content: "";
+    position: absolute;
+    top: 20%;
+    bottom: 20%;
+    right: 0;
+    background: var(--lightgrey);
+    border-radius: 2px;
+    width: 1.5px;
+    height: 60%;
+}
+
+.gh-links-pagination-action svg {
+    width: 6px;
+    fill: var(--green);
+    stroke: var(--green);
+    transition: all .2s linear;
+}
+
+.gh-links-pagination-action:hover {
+    color: var(--green-d2);
+}
+
+.gh-links-pagination-action:hover svg {
+    fill: var(--green-d2);
+    stroke: var(--green-d2);
+}
+
 /* Post list – LABS
 /* ---------------------------------------------------------- */
 
diff --git a/ghost/admin/app/templates/posts/analytics.hbs b/ghost/admin/app/templates/posts/analytics.hbs
index d1f1644e37..f0c7451546 100644
--- a/ghost/admin/app/templates/posts/analytics.hbs
+++ b/ghost/admin/app/templates/posts/analytics.hbs
@@ -106,6 +106,23 @@
                                 <p class="gh-links-list-clicks">{{link.count.clicks}}</p>
                             </div>
                         {{/each}}
+                        {{!-- TODO: Wire this pagination up
+                        <div class="gh-links-pagination">
+                            <div class="gh-links-pagination-progress">
+                                Showing 10-20 of 24
+                            </div>
+                            <div class="gh-links-pagination-actions">
+                                <button type="button" class="gh-links-pagination-action gh-links-pagination-prev">
+                                    {{svg-jar "arrow-left-pagination"}}
+                                    Previous
+                                </button>
+                                <button type="button" class="gh-links-pagination-action gh-links-pagination-next">
+                                    Next
+                                    {{svg-jar "arrow-right-pagination"}}
+                                </button>
+                            </div>
+                        </div>
+                        --}}
                     </div>
                 </div>
             {{/if}}
diff --git a/ghost/admin/public/assets/icons/arrow-left-pagination.svg b/ghost/admin/public/assets/icons/arrow-left-pagination.svg
new file mode 100644
index 0000000000..a73a55f77a
--- /dev/null
+++ b/ghost/admin/public/assets/icons/arrow-left-pagination.svg
@@ -0,0 +1,10 @@
+<svg width="14" height="23" viewBox="0 0 14 23" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_173_12420)">
+<path d="M12.5756 1.45462C12.8529 1.74002 13.0055 2.12392 12.9999 2.52188C12.9942 2.91984 12.8308 3.29927 12.5456 3.5767L4.39603 11.5052L12.5456 19.4338C12.8262 19.7122 12.9856 20.0902 12.9892 20.4856C12.9928 20.881 12.8403 21.2618 12.5648 21.5453C12.2893 21.8288 11.9132 21.9921 11.518 21.9997C11.1229 22.0073 10.7407 21.8586 10.4546 21.5858L1.63451 13.006C1.43419 12.8107 1.27487 12.5774 1.16591 12.3197C1.05696 12.0619 1.00055 11.7851 1 11.5052C0.9997 11.2253 1.05572 10.9481 1.16473 10.6903C1.27374 10.4325 1.4335 10.1992 1.63451 10.0045L10.4546 1.42461C10.7398 1.1472 11.1235 0.994521 11.5213 1.00015C11.9191 1.00578 12.2983 1.16926 12.5756 1.45462V1.45462Z" stroke-width="0.25"/>
+</g>
+<defs>
+<clipPath id="clip0_173_12420">
+<rect width="14" height="23" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ghost/admin/public/assets/icons/arrow-right-pagination.svg b/ghost/admin/public/assets/icons/arrow-right-pagination.svg
new file mode 100644
index 0000000000..2c52643dd0
--- /dev/null
+++ b/ghost/admin/public/assets/icons/arrow-right-pagination.svg
@@ -0,0 +1,10 @@
+<svg width="14" height="23" viewBox="0 0 14 23" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_173_12425)">
+<path d="M1.42439 1.45462C1.14713 1.74002 0.994524 2.12392 1.00015 2.52188C1.00578 2.91984 1.16917 3.29927 1.4544 3.5767L9.60397 11.5052L1.4544 19.4338C1.17382 19.7122 1.01441 20.0902 1.01082 20.4856C1.00722 20.881 1.15973 21.2618 1.4352 21.5453C1.71067 21.8288 2.08685 21.9921 2.48198 21.9997C2.87711 22.0073 3.25927 21.8586 3.54541 21.5858L12.3655 13.006C12.5658 12.8107 12.7251 12.5774 12.8341 12.3197C12.943 12.0619 12.9995 11.7851 13 11.5052C13.0003 11.2253 12.9443 10.9481 12.8353 10.6903C12.7263 10.4325 12.5665 10.1992 12.3655 10.0045L3.54541 1.42461C3.26016 1.1472 2.87645 0.994521 2.47869 1.00015C2.08093 1.00578 1.70169 1.16926 1.42439 1.45462V1.45462Z" stroke-width="0.25"/>
+</g>
+<defs>
+<clipPath id="clip0_173_12425">
+<rect width="14" height="23" fill="white"/>
+</clipPath>
+</defs>
+</svg>