rekahsoft/blog-rekahsoft-ca
1
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Began theming pagination first/last/next/previous

Browse Source 
Added spans that will show "First Page", "Previous Page", "Next Page",
"Last Page" when its unavailable. Eg. the user is on the last page so
there should be no link to click and instead just place holder text.

The css uses flexbox display and thus only works in modern
browsers (see: http://caniuse.com/#feat=flexbox). This may be changed in
the future as to support more browsers (IE9+ specifically).

Images/Icons for "First Page", "Previous Page", "Next Page", "Last Page"
have yet to be set (though would preferably be done in pure CSS).

Signed-off-by: Collin J. Doering <collin.doering@rekahsoft.ca>
This commit is contained in:
Collin J. Doering 2015-01-24 18:36:55 -05:00
parent 5b42ae5e2c
commit 485bab9b98
2 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
clay/PageComponents.hs
View File

@ -105,7 +105,15 @@ aPost = do
textIndent $ indent (em 1.5)
textAlign justify
"#pagination" ? makeBorderBox Nothing Nothing
"#pagination" ? do
display flex
-- Unable to specify without falling back to plain css
-- justifyContent spaceBetween
"justify-content" -: "space-between"
makeBorderBox Nothing Nothing
"#pagination" # ":after" ? do
content none
businessCard :: Css
businessCard = do

45
templates/partials/pagination.html
View File

@ -1,34 +1,39 @@
<div class='container' id='pagination'>
<div class='eight columns alpha'>
$if(firstPageUrl)$
$if(firstPageUrl)$
$if(firstPageUrlVirtualPath)$
<a class='firstPage' href='$firstPageUrlVirtualPath$' rel='address:$firstPageUrlVirtualPath$'>First Page</a>
<a class='firstPage' href='$firstPageUrlVirtualPath$'>First Page</a>
$else$
<a class='firstPage' href='$firstPageUrl$'>First Page</a>
<a class='firstPage' href='$firstPageUrl$'>First Page</a>
$endif$
$endif$
$if(previousPageUrl)$
$else$
<span class="on-first-page">First Page</span>
$endif$
$if(previousPageUrl)$
$if(previousPageUrlVirtualPath)$
<a class='previousPage' href='$previousPageUrlVirtualPath$' rel='address:$previousPageUrlVirtualPath$'>Previous Page</a>
<a class='previousPage' href='$previousPageUrlVirtualPath$'>Previous Page</a>
$else$
<a class='previousPage' href='$previousPageUrl$'>Previous Page</a>
<a class='previousPage' href='$previousPageUrl$'>Previous Page</a>
$endif$
$endif$
</div>
<div class='eight columns'>
$if(nextPageUrl)$
$else$
<span class="no-previous-page">Previous Page</span>
$endif$
$if(nextPageUrl)$
$if(nextPageUrlVirtualPath)$
<a class='nextPage' href='$nextPageUrlVirtualPath$' rel='address:$nextPageUrlVirtualPath$'>Next Page</a>
<a class='nextPage' href='$nextPageUrlVirtualPath$'>Next Page</a>
$else$
<a class='nextPage' href='$nextPageUrl$'>Next Page</a>
<a class='nextPage' href='$nextPageUrl$'>Next Page</a>
$endif$
$endif$
$if(lastPageUrl)$
$else$
<span class="no-next-page">Next Page</span>
$endif$
$if(lastPageUrl)$
$if(lastPageUrlVirtualPath)$
<a class='lastPage' href='$lastPageUrlVirtualPath$' rel='address:$lastPageUrlVirtualPath$'>Last Page</a>
<a class='lastPage' href='$lastPageUrlVirtualPath$'>Last Page</a>
$else$
<a class='lastPage' href='$lastPageUrl$'>Last Page</a>
<a class='lastPage' href='$lastPageUrl$'>Last Page</a>
$endif$
$endif$
</div>
$else$
<span class="on-last-page">Last Page</span>
$endif$
</div>