feat(pagination): Small UI improvements

This commit is contained in:
Joxit 2019-05-27 22:23:24 +02:00
parent 7356591292
commit 660a938d6e
No known key found for this signature in database
GPG key ID: F526592B8E012263
4 changed files with 19 additions and 13 deletions

View file

@ -56,6 +56,10 @@ material-card {
margin-bottom: 20px;
}
material-card.header {
min-height: auto;
}
@media screen and (max-width: 950px){
material-card {
width: 95%;

View file

@ -16,17 +16,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<catalog>
<!-- Begin of tag -->
<material-card ref="catalog-tag" class="catalog">
<material-card ref="catalog-tag" class="catalog header">
<div class="material-card-title-action">
<h2>
Repositories of { registryUI.name() }
<div class="item-count">{ registryUI.catalog.length } images</div>
</h2>
</div>
<div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
<material-spinner></material-spinner>
</div>
</material-card>
<div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
<material-spinner></material-spinner>
</div>
<catalog-element each="{ item in registryUI.catalog.repositories }" />
<script>
registryUI.catalog.instance = this;

View file

@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<tag-history>
<material-card ref="tag-history-tag" class="tag-history">
<material-card ref="tag-history-tag" class="tag-history header">
<div class="material-card-title-action">
<material-button waves-center="true" rounded="true" waves-color="#ddd">
<i class="material-icons">arrow_back</i>

View file

@ -16,8 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<taglist>
<!-- Begin of tag -->
<material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) }>
<div class="material-card-title-action">
<material-card class="header">
<div class="material-card-title-action ">
<material-button waves-center="true" rounded="true" waves-color="#ddd" onclick="registryUI.home();">
<i class="material-icons">arrow_back</i>
</material-button>
@ -26,9 +26,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="item-count">{ registryUI.taglist.tags.length } tags</div>
</h2>
</div>
<div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
<material-spinner></material-spinner>
</div>
</material-card>
<div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
<material-spinner></material-spinner>
</div>
<material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) } show="{ registryUI.taglist.loadend }" >
<table show="{ registryUI.taglist.loadend }" style="border: none;">
<thead>
<tr>
@ -125,8 +127,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
};
this.on('mount', function() {
var toggle = this.tags['material-card'].refs['remove-tag-checkbox'].toggle;
this.tags['material-card'].refs['remove-tag-checkbox'].toggle = function(e) {
var toggle = this.refs['taglist-tag'].refs['remove-tag-checkbox'].toggle;
this.refs['taglist-tag'].refs['remove-tag-checkbox'].toggle = function(e) {
if (e.altKey) {
self._getRemoveImageTags()
.filter(function(img) { return !img.tags['material-checkbox'].checked; })
@ -136,7 +138,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
};
this.tags['material-card'].refs['remove-tag-checkbox'].on('toggle', function() {
this.refs['taglist-tag'].refs['remove-tag-checkbox'].on('toggle', function() {
registryUI.taglist.instance.multiDelete = this.checked;
registryUI.taglist.instance.update();
});