Turn pagination into button group
Change-Id: I73e7b1355baf7e6b7da63e917eceb8346e405b0f
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 0d0fee3..f103cda 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -92,7 +92,7 @@
<main>
<div id="resultinfo" class="found">
- <div id="pagination">
+ <div id="pagination" class="button-group button-panel">
<a rel="prev"><span><span><</span></span></a>
<a rel="self"><span>1</span></a>
<a href="#2" tabindex="4"><span>2</span></a>
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 75e9458..d41fb73 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -20,107 +20,55 @@
* This may need to be overwritten in case multiple
* paginations have to be activated.
*/
- position: fixed;
- font-size: 0;
- right: ($standard-margin / 4);
- bottom: ($standard-margin / 2);
- z-index: 35;
- padding: 0;
- height: auto;
- line-height: 0;
+ position: fixed;
+ font-size: 0;
+ right: ($standard-margin / 4);
+ bottom: ($standard-margin / 2);
+ z-index: 35;
+ padding: 0;
+ height: auto;
+ line-height: 0;
+
+ > * {
+ font-size: 10pt;
+ line-height: 2em;
- > a {
- margin: 0;
- font-size: 10pt;
- padding: 0;
+ &:not(:link):not([rel=self]) {
+ color: $choose-blind-color;
+ }
- > span {
- @include standard-text-padding;
- @include choose-item;
- box-shadow: $choose-box-shadow;
- display: inline-block;
- line-height: 2em;
- text-align: center;
+ &.ellipsis, &[rel=prev], &[rel=next] {
+ > span {
+ @include blind;
+ }
+ }
+
+ &.ellipsis::after {
+ @include icon-font;
+ content: $fa-elipsis;
+ line-height: 1em;
+ }
- border: {
- top-width: $border-size;
- bottom-width: $border-size;
- top-style: solid;
- bottom-style: solid;
- }
+ &[rel=self] {
+ @include choose-active;
+ border: {
+ left-width: $border-size;
+ right-width: $border-size;
+ left-style: solid;
+ right-style: solid;
+ }
+ }
+
+ &[rel=prev]::after {
+ @include icon-font;
+ content: $fa-previous;
+ line-height: 1em;
+ }
+
+ &[rel=next]::after {
+ @include icon-font;
+ content: $fa-next;
+ line-height: 1em;
+ }
}
-
- &:not(:link):not([rel=self]) span {
- color: $choose-blind-color;
- }
-
- &.ellipsis > span {
- > span {
- @include blind;
- }
-
- &::after {
- @include icon-font;
- content: $fa-elipsis;
- line-height: 1em;
- }
- }
-
- &[rel=self] > span {
- @include choose-active;
-
- border: {
- left-width: $border-size;
- right-width: $border-size;
- left-style: solid;
- right-style: solid;
- }
- }
-
- &[rel=prev] > span {
- border: {
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- left-width: $border-size;
- left-style: solid;
- }
-
- > span {
- @include blind;
- }
-
- &::after {
- @include icon-font;
- content: $fa-previous;
- line-height: 1em;
- }
- }
-
- &[rel=next] > span {
- border: {
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- right-width: $border-size;
- right-style: solid;
- }
-
- > span {
- @include blind;
- }
-
- &::after {
- @include icon-font;
- content: $fa-next;
- line-height: 1em;
- }
- }
-
- &:link:hover,
- &:link:focus {
- outline: none;
- span {
- @include choose-hover;
- }
- }
- }
-}
\ No newline at end of file
+}
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 0ad8f2d..f065293 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,7 +1,7 @@
% layout 'main', schematype => 'SearchResultsPage';
<div id="resultinfo" <% if (stash('results')->size) { %> class="found"<%} %>>
- <div id="pagination"><%= pagination(stash('start_page'), stash('total_pages'), url_with->query({'p' => '{page}'})) =%></div>
+ <div id="pagination" class="button-group button-panel"><%= pagination(stash('start_page'), stash('total_pages'), url_with->query({'p' => '{page}'})) =%></div>
% my $found = stash('total_results') // 0;
<p class="found">\
% if ($found != -1) {