Commit c19c19d0 authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells

Style pagination (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework
Add template closing if to fix the broken layout

Change-Id: Ie63d26fc281a7f5d2b23216d5ffe0cdb9472b2b3
parent d678d1eb
......@@ -72,10 +72,10 @@ var Paginator = function(id, datatable, heading, script, extradata) {
};
this.rewritePaginatorSelectFormWithoutJSON = function() {
var setlimitform = getFirstElementByTagAndClassName('form', 'pagination', self.id);
var setlimitform = getFirstElementByTagAndClassName('form', 'js-pagination', self.id);
// If there is a form for choosing page size(page limit)
if (setlimitform) {
var setlimitselect = getFirstElementByTagAndClassName('select', 'pagination', setlimitform);
var setlimitselect = getFirstElementByTagAndClassName('select', 'js-pagination', setlimitform);
var currentoffset = getFirstElementByTagAndClassName('input', 'currentoffset', setlimitform);
connect (setlimitselect, 'onchange', function(e) {
e.stop();
......@@ -99,10 +99,10 @@ var Paginator = function(id, datatable, heading, script, extradata) {
};
this.rewritePaginatorSelectForm = function() {
var setlimitform = getFirstElementByTagAndClassName('form', 'pagination', self.id);
var setlimitform = getFirstElementByTagAndClassName('form', 'js-pagination', self.id);
// If there is a form for choosing page size(page limit)
if (setlimitform) {
var setlimitselect = getFirstElementByTagAndClassName('select', 'pagination', setlimitform);
var setlimitselect = getFirstElementByTagAndClassName('select', 'js-pagination', setlimitform);
var currentoffset = getFirstElementByTagAndClassName('input', 'currentoffset', setlimitform);
connect (setlimitselect, 'onchange', function(e) {
e.stop();
......
......@@ -3783,11 +3783,16 @@ function build_pagination($params) {
}
// Begin building the output
$output = '<div id="' . $params['id'] . '" class="pagination';
$output = '<div id="' . $params['id'] . '" class="pagination-wrapper';
if (isset($params['class'])) {
$output .= ' ' . hsc($params['class']);
}
$output .= '">';
// Output the count of results
$resultsstr = ($params['count'] == 1) ? $params['resultcounttextsingular'] : $params['resultcounttextplural'];
$output .= '<div class="results pull-right">' . $params['count'] . ' ' . $resultsstr . '</div>';
$output .= '<nav><ul class="pagination pagination-sm">';
if ($params['limit'] && ($params['limit'] < $params['count'])) {
$pages = ceil($params['count'] / $params['limit']);
......@@ -3871,30 +3876,65 @@ function build_pagination($params) {
// Build the first/previous links
$isfirst = $page == 0;
$output .= build_pagination_pagelink('first', $params['url'], $params['setlimit'], $params['limit'], 0, '&laquo; ' . $params['firsttext'], get_string('firstpage'), $isfirst, $params['offsetname']);
$output .= build_pagination_pagelink('prev', $params['url'], $params['setlimit'], $params['limit'], $params['limit'] * $prev, '&larr; ' . $params['previoustext'], get_string('prevpage'), $isfirst, $params['offsetname']);
$output .= build_pagination_pagelink(
'',
'&laquo;',
get_string('prevpage'),
$isfirst,
$params['url'],
$params['setlimit'],
$params['limit'],
$params['limit'] * $prev,
$params['offsetname']
);
// Build the pagenumbers in the middle
foreach ($pagenumbers as $k => $i) {
// add ellipsis if pages skipped
$text = $i + 1;
if ($k != 0 && $prevpagenum < $i - 1) {
$output .= '…';
$text = $i + 1 . '<span class="pls metadata hidden-xs">...</span>';
}
if ($i == $page) {
$output .= '<span class="selected">' . ($i + 1) . '</span>';
$output .= build_pagination_pagelink('active', $text, ($i + 1), true);
}
else {
$output .= build_pagination_pagelink('', $params['url'], $params['setlimit'], $params['limit'],
$params['limit'] * $i, $i + 1, '', false, $params['offsetname']);
$output .= build_pagination_pagelink(
'',
$text,
$i + 1,
false,
$params['url'],
$params['setlimit'],
$params['limit'],
$params['limit'] * $i,
$params['offsetname']
);
}
$prevpagenum = $i;
}
// Build the next/last links
$islast = $page == $last;
$output .= build_pagination_pagelink('next', $params['url'], $params['setlimit'], $params['limit'], $params['limit'] * $next,
$params['nexttext'] . ' &rarr;', get_string('nextpage'), $islast, $params['offsetname']);
$output .= build_pagination_pagelink('last', $params['url'], $params['setlimit'], $params['limit'], $params['limit'] * $last,
$params['lasttext'] . ' &raquo;', get_string('lastpage'), $islast, $params['offsetname']);
$output .= build_pagination_pagelink(
'',
' &raquo;',
get_string('nextpage'),
$islast,
$params['url'],
$params['setlimit'],
$params['limit'],
$params['limit'] * $next,
$params['offsetname']
);
}
// Build limitoptions dropbox if results are more than 10 (minimum dropbox pagination)
......@@ -3909,9 +3949,10 @@ function build_pagination($params) {
$strlimitoptions[] = "<option value = '$limitoptions[$i]'> $limitoptions[$i] </option>";
}
}
$output .= '<form class="pagination" action="' . hsc($params['url']) . '" method="POST">
<label for="setlimitselect" class="pagination"> ' . $params['limittext'] . ' </label>' .
'<select id="setlimitselect" class="pagination" name="limit"> '.
$output .= '</ul></nav>';
$output .= '<form class="form-pagination js-pagination form-inline" action="' . hsc($params['url']) . '" method="POST">
<label for="setlimitselect" class="set-limit"> ' . $params['limittext'] . ' </label>' .
'<select id="setlimitselect" class="js-pagination input-xs" name="limit"> '.
join(' ', $strlimitoptions) .
'</select>
<input class="currentoffset" type="hidden" name="' . $params['offsetname'] . '" value="' . $params['offset'] . '"/>
......@@ -3943,10 +3984,6 @@ function build_pagination($params) {
$js .= "new Paginator($id, null, null, null, null);";
}
// Output the count of results
$resultsstr = ($params['count'] == 1) ? $params['resultcounttextsingular'] : $params['resultcounttextplural'];
$output .= '<div class="results">' . $params['count'] . ' ' . $resultsstr . '</div>';
// Close the container div
$output .= '</div>';
......@@ -3957,28 +3994,45 @@ function build_pagination($params) {
/**
* Used by build_pagination to build individual links. Shouldn't be used
* elsewhere.
*
* @param $class String
* @param $text String
* @param $title String
* @param $disabled Boolean (optional)
* @param $url String
* @param $setlimit Int
* @param $limit Int
* @param $offset Int
* @param $offsetname String (optional)
*/
function build_pagination_pagelink($class, $url, $setlimit, $limit, $offset, $text, $title, $disabled=false, $offsetname='offset') {
$return = '<span class="pagination';
$return .= ($class) ? " $class" : '';
function build_pagination_pagelink($class, $text, $title, $disabled=false, $url=false, $setlimit=false, $limit=false, $offset=false, $offsetname='offset') {
if ($url) {
$url = (false === strpos($url, '?')) ? $url . '?' : $url . '&';
$url .= "$offsetname=$offset";
$url = (false === strpos($url, '?')) ? $url . '?' : $url . '&';
$url .= "$offsetname=$offset";
if ($setlimit) {
$url .= '&' . "setlimit=$setlimit";
$url .= '&' . "limit=$limit";
if ($setlimit) {
$url .= '&' . "setlimit=$setlimit";
$url .= '&' . "limit=$limit";
}
}
$result = "<li class='$class'>";
if ($disabled) {
$return .= ' disabled">' . $text . '</span>';
}
else {
$return .= '">'
. '<a href="' . hsc($url) . '" title="' . $title
. '">' . $text . '</a></span>';
$result .= '<span><span aria-hidden="true">';
$result .= $text;
$result .= '</span></span>';
} else {
$result .= '<a href="' . hsc($url) . '" title="' . $title . '">';
$result .= $text;
$result .= '<span class="sr-only">' .$title. '</span></a>';
}
return $return;
$result .= '</li>';
return $result;
}
function mahara_http_request($config, $quiet=false) {
......
......@@ -9,54 +9,55 @@
<div id="skillslist{$suffix}" class="panel-items js-masonry" data-masonry-options='{ "itemSelector": ".panel" }'>
{foreach from=$skills item=n}
<div class="panel panel-default">
<h3 class="panel-heading has-link">
{if $n->exists}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
{str tag=$n->artefacttype section='artefact.resume'}
<span class="fa fa-pencil pull-right pls"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{else}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
{str tag=$n->artefacttype section='artefact.resume'}
<span class="fa fa-pencil pull-right pls"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{/if}
</h3>
{if $n->exists}
<div id="n{$n->id}_desc" class="panel-body">
{if $n->description != ''}
{$n->description|clean_html|safe}
{else}
{str tag=nodescription section=artefact.resume}
{/if}
</div>
{if $n->files}
<div id="resume_{$n->id}" class="panel-footer has-attachment">
<div class="attachment-heading in-panel">
<a class="attach-files collapsed" aria-expanded="false" href="#attach_skill_{$n->id}" data-toggle="collapse">
<span class="badge">{$n->count}</span>
{str tag=attachedfiles section=artefact.blog}
<span class="fa fa-chevron-down pull-right"></span>
<h3 class="panel-heading has-link">
{if $n->exists}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
{str tag=$n->artefacttype section='artefact.resume'}
<span class="fa fa-pencil pull-right pls"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{else}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}">
{str tag=$n->artefacttype section='artefact.resume'}
<span class="fa fa-pencil pull-right pls"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{/if}
</h3>
{if $n->exists}
<div id="n{$n->id}_desc" class="panel-body">
{if $n->description != ''}
{$n->description|clean_html|safe}
{else}
{str tag=nodescription section=artefact.resume}
{/if}
</div>
<div id="attach_skill_{$n->id}" class="collapse">
<ul class="list-group-item-text list-unstyled list-group-item-link has-icon">
{foreach from=$n->files item=file}
<li>
<a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}" '{if $file->description}' title="{$file->description}" data-toggle="tooltip" '{/if}'>
<div class="file-icon mrs">
<img src="{$file->icon}" alt="" class="mrs">
</div>
{$file->title|truncate:40}
</a>
</li>
{/foreach}
</ul>
{/if}
{if $n->files}
<div id="resume_{$n->id}" class="panel-footer has-attachment">
<div class="attachment-heading in-panel">
<a class="attach-files collapsed" aria-expanded="false" href="#attach_skill_{$n->id}" data-toggle="collapse">
<span class="badge">{$n->count}</span>
{str tag=attachedfiles section=artefact.blog}
<span class="fa fa-chevron-down pull-right"></span>
</a>
</div>
<div id="attach_skill_{$n->id}" class="collapse">
<ul class="list-group-item-text list-unstyled list-group-item-link has-icon">
{foreach from=$n->files item=file}
<li>
<a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}" '{if $file->description}' title="{$file->description}" data-toggle="tooltip" '{/if}'>
<div class="file-icon mrs">
<img src="{$file->icon}" alt="" class="mrs">
</div>
{$file->title|truncate:40}
</a>
</li>
{/foreach}
</ul>
</div>
</div>
</div>
{/if}
{/if}
</div>
{/foreach}
</div>
......
......@@ -354,7 +354,7 @@ select {
&.form-select-filter {
label {
min-width: auto !important;
width: auto !important;
width: auto !important;
}
select {
width: 250px;
......@@ -369,6 +369,11 @@ select {
}
}
.input-xs {
height: auto;
padding: 0 6px;
}
.inline {
label {
line-height: 33px;
......
.pagination-wrapper {
.results {
font-weight: 300;
}
.pagination {
margin: 0 0 10px 0;
padding-left: 0;
@media (max-width: $screen-sm-min) {
padding-top: 10px;
.hidden-xs {
display: none;
}
}
@media (max-width: $screen-md-min) {
max-width: 500px;
}
}
.form-pagination {
font-size: $font-size-small;
label {
min-width: auto;
}
}
}
......@@ -92,6 +92,9 @@ a.panel-footer {
//Display ul's in panels differentyly
.panel-body {
&.listing {
padding: 0;
}
ul {
padding-left: 20px;
margin: 0 0 20px;
......
......@@ -117,6 +117,7 @@
@import "components/link-thumb";
@import "components/select2";
@import "components/loading-box";
@import "components/pagination";
// Keep these files last to override all other style sheets
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -26,7 +26,7 @@
<div class="panel panel-default">
<h2 id="searchresultsheading" class="panel-heading">{str tag=Results}</h2>
{if $views}
<div id="myviews" class="listing">
<div id="myviews" class="listing panel-body">
{foreach from=$views item=view}
<div class="listrow {cycle values='r0,r1'}">
<h3 class="title pull-left">
......@@ -64,9 +64,6 @@
</div>
{/foreach}
</div>
<div class="panel-body">
{$pagination|safe}
</div>
{else}
<div class="alert alert-warning">
{if $GROUP}
......@@ -77,4 +74,7 @@
{/if}
</div>
</div>
<div class="">
{$pagination|safe}
</div>
{include file="footer.tpl"}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment