Forum Discussion

iftomkins's avatar
iftomkins
Maven
11 years ago

Custom pagination on Mobile V1

I'd like to replace the pagination dropdown on mobile. I created this pagination style for the board-level view: http://screencast.com/t/uMHJfSX6plQ. I'd like to do something at the bottom-of-the-page pagination, as shown here: https://www.dropbox.com/s/2vlk6gxxqag15fa/Screenshot%202014-02-27%2012.51.31.png

 

I know there will be a different pagination in Mobile V2, but we're currently going with V1 until all features are available on mobile V2, so I'd love anyone's suggestions.

 

There's a good example of a fully custom pagination here: http://lithosphere.lithium.com/t5/developers-discussion/Implement-custom-pagination/m-p/106695#M3927.
But I'd like to still use the default message listing.

 

Thanks!

  • cblown's avatar
    cblown
    11 years ago

    Just checking you've noticed the options in the Admin for different Mobile paginiation styles?

     

    Screen Shot 2014-02-28 at 8.08.49 am.png 

3 Replies

Sort By
  • cblown's avatar
    cblown
    Boss
    11 years ago

    Just checking you've noticed the options in the Admin for different Mobile paginiation styles?

     

    Screen Shot 2014-02-28 at 8.08.49 am.png 

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    UPDATE:

     

    Had to tweak it a little more to make all the pages fit on small screens: http://screencast.com/t/ZHsDHxjpmW1

     

    Here's the CSS (using FontAwesome font icon set):

    #lia-body .lia-content ul.lia-paging-full ul.lia-paging-full-pages li a, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous>a, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next>a {
        font-size: 15px;
        background: #f5f5f5;
        color: #3DA0A0;
        padding: 0 8px 0;
        border: 1px solid #fbfbfb;
    }

    #lia-body .lia-content ul.lia-paging-full ul.lia-paging-full-pages li a:hover, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous>a:hover , #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next>a:hover  {
        font-size: 15px;
        background:#3DA0A0;
        color: #f5f5f5;
    }

    #lia-body .lia-content ul.lia-paging-full .lia-paging-page-active>span.lia-link-disabled, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-first>span.lia-link-disabled, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-last>span.lia-link-disabled, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous .lia-link-disabled a, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next .lia-link-disabled a {
        font-size: 15px;
        background: none;
        color: #999999;
        margin-top: -1px;
    }

    #lia-body .lia-content ul.lia-paging-full li .lia-link-disabled {
        font-size: 15px;
        color: #999999;
    }

    #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous .lia-paging-page-link, #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next .lia-paging-page-link{
        display: none;
    }

    #lia-body .lia-content ul.lia-paging-full .lia-paging-page-arrow {
        display: none;
    }

    #lia-body .lia-content ul.lia-paging-full .lia-paging-page-next .lia-link-navigation:before {
        font-family: FontAwesome;
        content:  "\f105";
        color: inherit;
    }

    #lia-body .lia-content ul.lia-paging-full .lia-paging-page-previous .lia-link-navigation:before {
        font-family: FontAwesome;
        content:   "\f104";
        color: inherit;
    }