Updated spacing, height, and width of pagination buttons, updated tra…

…nslation strings for proper next and previous button text.
CenterForOpenScience · Aug 25, 2023 · 65b2fb7 · 65b2fb7
1 parent f79aeb9
commit 65b2fb7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss
@@ -74,6 +74,7 @@
 
     .pagination-buttons {
         padding-right: 0;
+        padding-top: 0;
     }
 }
 
@@ -368,8 +369,33 @@
 .pagination-buttons {
     display: flex;
     padding: 2rem;
+    align-items: center;
     justify-content: flex-end;
     height: fit-content;
+
+    button {
+        color: $color-bg-blue-dark;
+        height: 44px;
+        width: 44px;
+        margin-bottom: 0;
+        margin-left: 10px;
+        text-align: center;
+
+        p {
+            margin-bottom: 0;
+        }
+    }
+
+    > div {
+        background-color: $color-bg-white;
+        color: $color-bg-blue-dark;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 44px;
+        width: 44px;
+        text-align: center;
+    }
 }
 
 // for tablet displays

diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs
@@ -241,25 +241,38 @@ as |layout|>
             {{/each}}
         {{/if}}
         <div local-class='pagination-buttons'>
-            {{#if this.firstPageCursor}}
+            {{#if this.prevPageCursor}}
                 <Button
-                    {{on 'click' (fn this.switchPage this.firstPageCursor)}}
+                    {{on 'click' (fn this.switchPage this.prevPageCursor)}}
                 >
-                    {{t 'search.first'}}
+                    <p>
+                        {{t 'search.previous-pagination-button'}}
+                    </p>
                 </Button>
             {{/if}}
-            {{#if this.prevPageCursor}}
+            {{#if this.firstPageCursor}}
                 <Button
-                    {{on 'click' (fn this.switchPage this.prevPageCursor)}}
+                    {{on 'click' (fn this.switchPage this.firstPageCursor)}}
                 >
-                    {{t 'search.prev'}}
+                    <p>
+                        {{t 'search.first-pagination-button'}}
+                    </p>
                 </Button>
             {{/if}}
+            {{#if this.nextPageCursor}}
+                <div>
+                    <p>
+                        {{t 'search.more-pagination-button'}}
+                    </p>
+                </div>
+            {{/if}}
             {{#if this.nextPageCursor}}
                 <Button
                     {{on 'click' (fn this.switchPage this.nextPageCursor)}}
                 >
-                    {{t 'search.next'}}
+                    <p>
+                        {{t 'search.next-pagination-button'}}
+                    </p>
                 </Button>
             {{/if}}
         </div>

diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -246,6 +246,10 @@ search:
     first: First
     prev: Prev
     next: Next
+    previous-pagination-button: '<<'
+    first-pagination-button: '1'
+    more-pagination-button: '...'
+    next-pagination-button: '>>'
     sort:
         sort-by: 'Sort by'
         relevance: 'Relevance'