mirrors/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2025-04-27 15:39:54 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(pagination): Improve spacing for page next and first page buttons

Browse source
This commit is contained in:
Joxit 2019-06-15 22:37:24 +02:00
parent 92fc37adb4
commit dbb746981a
No known key found for this signature in database
GPG key ID: F526592B8E012263
3 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/scripts/utils.js
View file

@ -84,11 +84,17 @@ registryUI.getPageLabels = function(page, nPages) {
var maxItems = 10;
if (nPages === 1) { return pageLabels; }
if (page !== 1 && nPages >= maxItems) {
pageLabels.push({'icon': 'first_page', page: 0});
pageLabels.push({'icon': 'first_page', page: 1});
pageLabels.push({'icon': 'chevron_left', page: page - 1});
}
for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
pageLabels.push({page: i, current: i === page});
var start = Math.round(Math.max(1, Math.min(page - maxItems / 2, nPages - maxItems + 1)));
for (var i = start; i < Math.min(nPages + 1, start + maxItems); i++) {
pageLabels.push({
page: i,
current: i === page,
'space-left': page === 1 && nPages > maxItems,
'space-right': page === nPages && nPages > maxItems
});
}
if (page !== nPages && nPages >= maxItems) {
pageLabels.push({'icon': 'chevron_right', page: page + 1});

18
src/style.css
View file

@ -527,6 +527,24 @@ pagination material-button {
padding: 0.2em 0.75em;
}
pagination material-button .content {
display: flex;
align-content: center;
line-height: 1.9em;
}
pagination material-button.current {
border: 1px solid rgba(0, 0, 0, .12);
}
pagination material-button.current.space-left {
margin-left: 85px;
}
pagination material-button.current.space-right {
margin-right: 85px;
}
pagination material-button .content i.material-icons {
color: #000;
}

2
src/tags/pagination.tag
View file

@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Begin of tag -->
<div class="conatianer">
<div class="pagination-centered">
<material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current }">
<material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current, space-left: p['space-left'], space-right: p['space-right']}">
<i show="{ p.icon }" class="material-icons">{ p.icon }</i>
<div hide="{ p.icon }">{ p.page }</div>
</material-button>