boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Added pagination to actor overview. Lazy loading actor avatars. Reduced hash digest length.

Browse Source
This commit is contained in:
ThePendulum
2020-05-23 04:32:50 +02:00
parent 2fcd426b49
commit 75d49517b7
30 changed files with 35442 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
assets/components/pagination/pagination.vue
View File

@@ -1,46 +1,60 @@
<template>
<div class="pagination">
<template v-if="pageNumber > 1">
<span
v-show="pageNumber > 1"
class="cursors"
>
<router-link
class="pagination-page"
class="pagination-button cursor"
:to="{ params: { pageNumber: 1 } }"
>&lt;&lt;</router-link>
><Icon icon="first2" /></router-link>
<router-link
class="pagination-page"
class="pagination-button cursor"
:to="{ params: { pageNumber: pageNumber - 1 } }"
>&lt;</router-link>
</template>
><Icon icon="arrow-left" /></router-link>
</span>
<template v-else>
<span class="pagination-page disabled">&lt;&lt;</span>
<span class="pagination-page disabled">&lt;</span>
</template>
<span
v-show="pageNumber === 1"
class="cursors"
>
<span class="pagination-button cursor disabled"><Icon icon="first2" /></span>
<span class="pagination-button cursor disabled"><Icon icon="arrow-left" /></span>
</span>
<router-link
v-for="pageX in pageCount"
:key="`page-${pageX}`"
:to="{ params: { pageNumber: pageX } }"
:class="{ active: pageX === pageNumber }"
class="pagination-page"
> {{ pageX }} </router-link>
<template v-if="pageNumber < pageCount">
<span class="pages">
<router-link
class="pagination-page"
v-for="pageX in pageCount"
:key="`page-${pageX}`"
:to="{ params: { pageNumber: pageX } }"
:class="{ active: pageX === pageNumber }"
class="pagination-button page"
> {{ pageX }} </router-link>
</span>
<span
v-show="pageNumber < pageCount"
class="cursors"
>
<router-link
class="pagination-button cursor"
:to="{ params: { pageNumber: pageNumber + 1 } }"
>&gt;</router-link>
><Icon icon="arrow-right" /></router-link>
<router-link
class="pagination-page"
class="pagination-button cursor"
:to="{ params: { pageNumber: pageCount } }"
>&gt;&gt;</router-link>
</template>
><Icon icon="last2" /></router-link>
</span>
<template v-else>
<span class="pagination-page disabled">&gt;</span>
<span class="pagination-page disabled">&gt;&gt;</span>
</template>
<span
v-show="pageNumber === pageCount"
class="cursors"
>
<span class="pagination-button cursor disabled"><Icon icon="arrow-right" /></span>
<span class="pagination-button cursor disabled"><Icon icon="last2" /></span>
</span>
</div>
</template>
@@ -50,7 +64,9 @@ function pageNumber() {
}
function pageCount() {
return Math.ceil(this.itemsTotal / this.itemsPerPage);
const count = Math.max(Math.ceil(this.itemsTotal / this.itemsPerPage), 1);
return count;
}
export default {
@@ -78,19 +94,38 @@ export default {
justify-content: center;
}
.pagination-page {
width: 2rem;
.pagination-top {
margin: 0 0 1rem 0;
}
.pagination-bottom {
margin: 1rem 0 0 0;
}
.pagination-button {
width: 2.5rem;
height: 2rem;
display: inline-flex;
flex-shrink: 0;
align-items: center;
margin: 0 .5rem 0 0;
justify-content: center;
color: var(--shadow);
font-weight: bold;
text-decoration: none;
&:hover:not(.active, .disabled) {
.icon {
width: .8rem;
height: .8rem;
margin: 0 0 .125rem 0;
fill: var(--shadow);
}
&:hover:not(.active):not(.disabled) {
color: var(--text);
.icon {
fill: var(--text);
}
}
&.active {
@@ -99,14 +134,20 @@ export default {
&.disabled {
color: var(--shadow-weak);
.icon {
fill: var(--shadow-weak);
}
}
}
.pagination-top {
margin: 0 0 1rem 0;
.pages,
.cursors {
flex-shrink: 0;
}
.pagination-bottom{
margin: 1rem 0 0 0;
.cursors {
margin: 0 .5rem;
font-size: 0;
}
</style>