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

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