News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

How to add left and right arrows to the beginning and then end of pagination?

Started by Wellwisher, May 01, 2016, 06:24:32 AM

Previous topic - Next topic

Wellwisher

Hello,

I am trying to add this type of SMF pagination. I would like the "left" arrow to be placed at the beginning and the "right" arrow at the end (as shown in this picture):



I have no idea how to implement them.  ::)

I took out the number brackets, the css is done but it's such a tricky and messy job requires edits on multiple lines in subs.php

qc

Hi Wellwisher,

as far as I know, you would need to modify the page indices in all your template files.

That's what I did and it looks like this:


Unfolded:


You could try this code (which also includes a previous page button as you requested):
// Show the page index:
echo '<div class="pagesection">';
echo '<a class="btn btn-default" href="'.$scripturl.'" title="Back to the homepage"><span class="glyphicon glyphicon-home"></span></a>';
 
if (!empty($context['links']['prev'])) {
  echo ' <a class="btn btn-default" href="'.$context['links']['prev'].'" title="Previous page"><span class="glyphicon glyphicon-triangle-left"></span> Previous page</a>';
}
 
echo ' <div class="pagelinks">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . ' <a class="up_down" href="#top" title="'.$txt['go_up'].'"><span class="glyphicon glyphicon-chevron-up"></span></a>' : '', '</div>';
 
if (!empty($context['links']['next'])) {
  echo ' <a class="btn btn-default" href="'.$context['links']['next'].'" title="Next page">Next page <span class="glyphicon glyphicon-triangle-right"></span></a>';
}
 
echo template_button_strip($normal_buttons, 'right');
echo '</div>';


Of course, styling via CSS is up to you, as you already seem to have your own design ideas.
Playing quizduell? Having quizduell questions? Our german quizduell forum quizcommunity.de is looking for quiz freaks to come and play quizduell with us :)

Arantor

Just need to change up constructPageIndex in Subs.php, compare it to the same function in 2.1 where this was added.

Wellwisher

Quote from: qc on May 01, 2016, 11:52:07 AM

You could try this code (which also includes a previous page button as you requested):
// Show the page index:
echo '<div class="pagesection">';
echo '<a class="btn btn-default" href="'.$scripturl.'" title="Back to the homepage"><span class="glyphicon glyphicon-home"></span></a>';
 
if (!empty($context['links']['prev'])) {
  echo ' <a class="btn btn-default" href="'.$context['links']['prev'].'" title="Previous page"><span class="glyphicon glyphicon-triangle-left"></span> Previous page</a>';
}
 
echo ' <div class="pagelinks">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . ' <a class="up_down" href="#top" title="'.$txt['go_up'].'"><span class="glyphicon glyphicon-chevron-up"></span></a>' : '', '</div>';
 
if (!empty($context['links']['next'])) {
  echo ' <a class="btn btn-default" href="'.$context['links']['next'].'" title="Next page">Next page <span class="glyphicon glyphicon-triangle-right"></span></a>';
}
 
echo template_button_strip($normal_buttons, 'right');
echo '</div>';


Of course, styling via CSS is up to you, as you already seem to have your own design ideas.

@qc Thank you mate. Implemented this on my test bench a few mins ago. This code is sexy alright. FINALLY, SMF pagination that makes some pecking sense. :P There are some issues which I am running into which I believe I can solve myself.  ;D

One additional issue that eludes me @qc is the "before" and "after" arrows disappear when user is on the "first" page and the "last" page. I rather not have this happen. I want these arrows to be present (even if they are no before or after pages).

At the moment this is what's happening with that code:



Is it possible to keep these arrows alive but to turn them into an "inactive" grey color like this example:



Wellwisher

Figured it out!  ;) So here's the updated code folks! I also removed the "home" button, as I didn't find it useful (we've got breadcrumbs/ main navigation for this so don't need to add it on pagination). I will make a new "tips and ticks" on this later when I am completely 100% satisifed. I also added font-awesome buttons.

Temporary CSS:



/*ENTER PAGINATION*/

.fa-chevron-left{padding:0px;}
.pagelinks{display:inline;}
.pagelinks strong,
.pagesection strong,
.mlist_above strong,
#mlist_below strong,
.smalllinks strong
{
background: #337AB7;
border: 1px solid #337ab7;
color: #fff;
padding: 2px 6px;
margin-right: 3px;
}
.navPages, small[id*="pages"] a{
border: 1px solid #DDDDDD;
color: #337ab7!important;
padding: 2px 6px;
text-decoration: none;
}
.navPages:hover, small[id*="pages"] a:hover{
background: #eee;
border: 1px solid #DDDDDD;
color: #337ab7!important;
text-decoration: none;
}
a[href="#top"], a[href="#bot"], a[href="#lastPost"] {
background: none transparent !important;
}
a[href="#top"]:hover, a[href="#bot"]:hover, a[href="#lastPost"]:hover {
text-decoration: none;
}
.pagesection {padding: 0.3em}

/*PAGINATION END */



PHP code:



echo '<div class="pagesection">

<a class="btn btn-default" href="'.$context['links']['prev'].'" title="Previous page"><span class="fa fa-chevron-left" style="color:#337ab7;" aria-hidden="true"></span></a>

<div class="pagelinks">', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . ' <a class="up_down" href="#top" title="'.$txt['go_up'].'"><span class=""fa fa-chevron-up" aria-hidden="true""></span></a>' : '', '</div>

<a class="btn btn-default" href="'.$context['links']['next'].'" title="Next page"><span class="fa fa-chevron-right" style="color:#337ab7;" aria-hidden="true"></span></a>';



END RESULT:



Is this sexy or what?  8) Much respect and thanks to @qc.

qc

Playing quizduell? Having quizduell questions? Our german quizduell forum quizcommunity.de is looking for quiz freaks to come and play quizduell with us :)

Kindred

not bad... :)


I prefer the dropdown page index that Antechinus made...


Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Wellwisher

Quote from: Kindred on May 03, 2016, 08:23:28 AM
not bad... :)


I prefer the dropdown page index that Antechinus made...

This looks pretty interesting @Kindred. Do you have this installed online so I can play around with it?  :P Tbh, I'd like to compare the usability and how it feels. At the moe, I am not sure what to think or is this a mod we can test locally?

Kindred

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

nend

Quote from: Kindred on May 03, 2016, 11:31:38 PM
It is installed on http://www.fx-sabers.com/forum/
Nice, I wonder how it would work on mobile, if the browser would intercept the drop down or would have to scroll.

Kindred

That site is fairly responsive... and the edits to the pagination are fully responsive.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Wellwisher

Quote from: nend on May 03, 2016, 11:41:08 PM

Nice, I wonder how it would work on mobile, if the browser would intercept the drop down or would have to scroll.


This is from my iphone on chrome*, it does what it's suppose to do. On mobile, Antechinus solution is perfect. For me, I believe having a more traditional pagination for desktop feels right and switching to something completely mobile friendly like shown below for smaller devices:


nend


Wellwisher

This is also pretty swagg:

FF desktop:



I digg Antechinus code on board index posts tbh. Great work.  8)

Arantor


Wellwisher

Quote from: Arantor on May 04, 2016, 01:09:29 AM
It looks like a restyled version of http://custom.simplemachines.org/mods/index.php?mod=2025

Looks good thanks for this @Arantor, I manually made the edits and the mod still works and the advise:

Quote from: Arantor on May 01, 2016, 11:53:09 AM
Just need to change up constructPageIndex in Subs.php, compare it to the same function in 2.1 where this was added.

If I edit all files containing pagination manually there's a whole heap of them:

-Display.template.php
-Boardindex.template.php
-Messageindex.template.php
-Recent.template.php
-search

Who knows, probably a dozen more.  ;D

Now I can easily show the drop-down using that mods code and @mediaqueries and make shizzle responsive.  You the man. 8)

Kindred

yeah, I think Antechinus used that as a baseline (with permission)
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

qc

The drop down in combination with next / previous links is a pretty interesting way to handle pagination on mobile / small screen sizes, I think I will give it a try, too  :)
Playing quizduell? Having quizduell questions? Our german quizduell forum quizcommunity.de is looking for quiz freaks to come and play quizduell with us :)

Kindred

hmmm.... from those screen shots, it looks like I have a little bit of CSS correction to do for that "right facing" arrow...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Arantor

Quote from: Kindred on May 04, 2016, 06:37:18 AM
yeah, I think Antechinus used that as a baseline (with permission)

Didn't ask me >:D but it's all good :)

Advertisement: