University of Derby

Pagination Controls: Section Iterator 

<style>
    .label {
        color: magenta;
        display: block;
        margin: 3em 0 1em;
    }
</style>
<span class="label">Default</span>
<div class="pagination-controls">
    <div class="pagination-controls-inner pagination-controls-section-iterator">
        <a href="#">Introduction</a>
        <span class="spacer"></span>
        <a href="#">Visual illusions</a>
    </div>
</div>
<span class="label">Next section only</span>
<div class="pagination-controls">
    <div class="pagination-controls-inner pagination-controls-section-iterator">
        <span class="spacer"></span>
        <a href="#">Visual illusions</a>
    </div>
</div>
<span class="label">Previous section only</span>
<div class="pagination-controls">
    <div class="pagination-controls-inner pagination-controls-section-iterator">
        <a href="#">Introduction</a>
        <span class="spacer"></span>
    </div>
</div>
 
<style>
    .label {
        color: magenta;
        display: block;
        margin: 3em 0 1em;
    }
</style>
<span class="label">Default</span>
<div class="pagination-controls">
	<div class="pagination-controls-inner pagination-controls-section-iterator">
	    <a href="#">Introduction</a>
	    <span class="spacer"></span>
	    <a href="#">Visual illusions</a>
    </div>
</div>
<span class="label">Next section only</span>
<div class="pagination-controls">
	<div class="pagination-controls-inner pagination-controls-section-iterator">
	    <span class="spacer"></span>
	    <a href="#">Visual illusions</a>
    </div>
</div>
<span class="label">Previous section only</span>
<div class="pagination-controls">
	<div class="pagination-controls-inner pagination-controls-section-iterator">
	    <a href="#">Introduction</a>
	    <span class="spacer"></span>
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    /*
    Bring our T4 out of the box pagination up to scratch pagination
/*/
$('.pagination-controls').each(function () {
	$('a', $(this)).each(function(){
		var text = $(this).html();
		if (text == '&gt;') {
			$(this).html('Next <i class="uod-icons uod-icons-chevron-right"></i>');
		}
		if (text == '&gt;&gt;') {
			$(this).html('Last <i class="uod-icons uod-icons-chevron-right"></i><i class="uod-icons uod-icons-chevron-right"></i>');
		} 
		if (text == '&lt;') {
			$(this).html('<i class="uod-icons uod-icons-chevron-left"></i> Prev');
		}
		if (text == '&lt;&lt;') {
			$(this).html('<i class="uod-icons uod-icons-chevron-left"></i><i class="uod-icons uod-icons-chevron-left"></i> First');
		}
		if ($('.button-overlay', $(this)).length == 0) {
			var text = $(this).html(); //get the text again incase it has changed
	        $(this).html(text + '<span class="button-overlay"><span>' + text + '</span></span>');
	    }
	});
});
  • URL: /components/raw/pagination-controls/pagination-controls.js
  • Filesystem Path: components/atoms/pagination-controls/pagination-controls.js
  • Size: 934 Bytes
  • Content: 
    .pagination-controls {
    @include margin-large;
    
    text-align: right;

    a {
        @extend %button;
        @extend %button-overlay;

        &:last-child {
            margin-right: 10px;
        }

        .button-overlay {
            background: $mid-blue;
            color: $white;
        }

        .uod-icons {
        	margin-right: 0;
    	    vertical-align: sub;
        }
    }

    &-inner {
        margin-right: -10px;

        > span:not(.spacer) {
            @extend .button-blue;
        }
    }

    &-section-iterator {
        
        a {

            &:first-child:before(), 
            &:first-child .button-overlay > span:before() {
                @extend %uod-icons;
                content: $uod-icons-chevron-left;
                vertical-align: sub;
                margin-right: 0.3em;
            }

            &:last-child {
                padding-right: calc(1.3em + 11px);

                .button-overlay > span {
                    padding-right: calc(1.3em + 11px);
                }

                &:before(), 
                .button-overlay > span:before() {
                    @extend %uod-icons;
                    content: $uod-icons-chevron-right;
                    vertical-align: sub;
                    margin-left: 0.3em;
                    position: absolute;
                    right: 1em;
                    top: 50%;
                    margin-top: -9px;
                }
            }
        }
    }
}

/*
    For go live listing pages as per the designs aren't possible
    Using listing pages generated in T4 we want to give pagination controls the same behaviour as a text block
*/
.center-align > .pagination-controls {
    // mixin that sets a consistent columns width
    @include uod-text-column;
}
  • URL: /components/raw/pagination-controls/pagination-controls.scss
  • Filesystem Path: components/atoms/pagination-controls/pagination-controls.scss
  • Size: 1.8 KB

There are no notes for this item.