tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjustments to loading and skeletons on item page.

This commit is contained in:
Mateus Machado Luna 2019-10-15 14:04:16 -03:00
parent a13f68d233
commit 93c05326c8
5 changed files with 33 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/admin/components/search/filters-tags-list.vue
View File

@ -1,22 +1,24 @@
<template>
<div
class="is-inline-flex"
v-if="filterTags != undefined && filterTags.length > 0">
<b-tag
v-for="(filterTag, index) of filterTags"
:key="index"
attached
closable
@close="removeMetaQuery(filterTag)">
{{ filterTag.singleLabel != undefined ? filterTag.singleLabel : filterTag.label }}
</b-tag>
<button
@click="clearAllFilters()"
id="button-clear-all"
class="button is-outlined">
{{ $i18n.get('label_clear_filters') }}
</button>
</div>
<transition name="filter-item">
<div
class="is-inline-flex"
v-if="filterTags != undefined && filterTags.length > 0">
<b-tag
v-for="(filterTag, index) of filterTags"
:key="index"
attached
closable
@close="removeMetaQuery(filterTag)">
{{ filterTag.singleLabel != undefined ? filterTag.singleLabel : filterTag.label }}
</b-tag>
<button
@click="clearAllFilters()"
id="button-clear-all"
class="button is-outlined">
{{ $i18n.get('label_clear_filters') }}
</button>
</div>
</transition>
</template>
<script>
import { mapGetters } from 'vuex';

255
src/admin/components/search/skeleton-items-list.vue
View File

@ -1,255 +0,0 @@
<template>
<div class="table-container">
<div class="selection-control">
<div class="field select-all is-pulled-left">
<span>
<b-checkbox disabled>{{ $i18n.get('label_select_all_items_page') }}</b-checkbox>
</span>
</div>
<div class="field is-pulled-right">
<b-dropdown
position="is-bottom-left"
disabled
trap-focus>
<button
class="button is-white"
slot="trigger">
<span>{{ $i18n.get('label_bulk_actions') }}</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"/>
</span>
</button>
</b-dropdown>
</div>
</div>
<div class="table-wrapper">
<table
v-if="viewMode == 'table'"
class="tainacan-table">
<thead>
<th class="skeleton column-default-width" />
</thead>
<tbody>
<tr
class="skeleton"
:key="item"
v-for="item in itemsPerPage">
<td class="column-default-width"/>
</tr>
</tbody>
</table>
<div
v-if="viewMode == 'cards' || viewMode == 'grid'"
:class="{
'tainacan-cards-container': viewMode == 'cards',
'tainacan-grid-container': viewMode == 'grid'
}">
<div
:key="item"
v-for="item in itemsPerPage"
class="skeleton"
:class="{
'tainacan-card': viewMode == 'cards',
'tainacan-grid-item': viewMode == 'grid'
}"/>
</div>
<masonry
:cols="getMasonryColsSettings()"
:gutter="viewMode == 'masonry' ? 25 : 30"
v-if="viewMode == 'masonry' || viewMode == 'records'"
:class="{
'tainacan-masonry-container': viewMode == 'masonry',
'tainacan-records-container': viewMode == 'records'
}">
<div
:key="item"
v-for="item in itemsPerPage"
:style="{'min-height': randomHeightForMasonryItem() + 'px' }"
class="skeleton"
:class="{
'tainacan-masonry-item': viewMode == 'masonry',
'tainacan-record': viewMode == 'records'
}"/>
</masonry>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'SkeletonItemsList',
computed: {
itemsPerPage(){
return this.getItemsPerPage();
},
viewMode() {
return this.getAdminViewMode();
},
},
methods: {
...mapGetters('search', [
'getItemsPerPage',
'getAdminViewMode',
]),
getMasonryColsSettings() {
if (this.viewMode == 'masonry')
return { default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1 }
else
return { default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1 }
},
randomHeightForMasonryItem() {
let min = 255;
let max = 255;
if (this.viewMode == 'masonry') {
min = 140;
max = 420;
} else if (this.viewMode == 'records') {
min = 380;
max = 480;
}
return Math.floor(Math.random()*(max-min+1)+min);
}
}
}
</script>
<style lang="scss" scoped>
@import '../../scss/_variables.scss';
// Selection Area
.selection-control {
padding: 6px 0px 0px 12px;
background: white;
height: 40px;
.select-all {
color: $gray4;
font-size: 0.875rem;
&:hover {
color: $gray4;
}
}
}
// Cards View Mode
.tainacan-cards-container {
min-height: 50vh;
padding: 0;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fill, 455px);
grid-gap: 0px;
justify-content: space-evenly;
animation-name: item-appear;
animation-duration: 0.5s;
@media screen and (max-width: 480px) {
width: 91.666666667%;
grid-template-columns: repeat(auto-fill, 100%);
}
.tainacan-card {
padding: 0px;
flex-basis: 0;
margin: 15px;
max-width: 425px;
min-width: 425px;
min-height: 210px;
max-height: 210px;
@media screen and (max-width: 480px) {
max-width: 100%;
min-width: 100%;
min-height: 171px;
max-height: 171px;
img {
width: 130px !important;
height: 130px !important;
}
}
}
}
// Thumbnails (Grid) View Mode
.tainacan-grid-container {
min-height: 50vh;
padding: 0;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fill, 285px);
grid-gap: 0px;
justify-content: space-evenly;
animation-name: appear;
animation-duration: 0.5s;
.tainacan-grid-item {
max-width: 255px;
min-height: 300px;
flex-basis: 0;
margin: 15px;
text-align: center;
}
}
// Masonry View Mode
.tainacan-masonry-container {
min-height: 50vh;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: space-evenly;
animation-name: item-appear;
animation-duration: 0.5s;
.tainacan-masonry-item {
display: block;
width: 100%;
flex-basis: 0;
margin-bottom: 25px;
}
}
// Records View Mode
.tainacan-records-container {
min-height: 50vh;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: space-evenly;
animation-name: item-appear;
animation-duration: 0.5s;
.tainacan-record {
background-color: #f6f6f6;
padding: 0px;
flex-basis: 0;
margin: 0 auto 30px auto;
width: 100%;
max-width: 425px;
min-height: 100px;
display: block;
}
}
// Table View Mode
table.tainacan-table {
border-spacing: 6px !important;
th { height: 38px; }
td { height: 52px; }
}
</style>

12
src/admin/pages/lists/items-page.vue
View File

@ -705,9 +705,6 @@
<div
v-if="(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].skeleton_template != undefined)"
v-html="registeredViewModes[viewMode].skeleton_template"/>
<!-- Admin view modes skeleton -->
<!-- <skeleton-items-list v-if="!isOnTheme"/> -->
</div>
<!-- Alert if custom metada is being used for sorting -->
@ -893,7 +890,6 @@
import FiltersTagsList from '../../components/search/filters-tags-list.vue';
import FiltersItemsList from '../../components/search/filters-items-list.vue';
import Pagination from '../../components/search/pagination.vue'
import SkeletonItemsList from '../../components/search/skeleton-items-list.vue'
import AdvancedSearch from '../../components/advanced-search/advanced-search.vue';
import AvailableImportersModal from '../../components/other/available-importers-modal.vue';
import ExposersModal from '../../components/other/exposers-modal.vue';
@ -1027,7 +1023,6 @@
ItemsList,
FiltersTagsList,
FiltersItemsList,
SkeletonItemsList,
Pagination,
AdvancedSearch,
ExposersModal
@ -1998,7 +1993,7 @@
.loading-container {
position: relative;
min-height: 200px;
min-height: 50vh;
height: auto;
}
}
@ -2058,10 +2053,9 @@
}
.table-container {
padding-left: 4.166666667%;
padding-right: 4.166666667%;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
min-height: 50vh;
//height: calc(100% - 82px);
}
.pagination-area {

10
src/admin/pages/lists/term-items-page.vue
View File

@ -681,9 +681,7 @@
<div
v-if="(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].skeleton_template != undefined)"
v-html="registeredViewModes[viewMode].skeleton_template"/>
<!-- Admin view modes skeleton -->
<!-- <skeleton-items-list v-if="!isOnTheme"/> -->
</div>
<!-- Alert if custom metada is being used for sorting -->
@ -1918,7 +1916,7 @@
.loading-container {
position: relative;
min-height: 200px;
min-height: 50vh;
height: auto;
}
}
@ -1938,8 +1936,8 @@
}
.table-container {
padding-left: 4.166666667%;
padding-right: 4.166666667%;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
min-height: 50vh;
//height: calc(100% - 82px);
}

10
src/admin/scss/tainacan-admin.scss
View File

@ -78,12 +78,14 @@ body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, bod
border: none;
border-radius: 0;
animation: none;
height: 50px;
width: 50px;
height: 46px;
width: 46px;
background-size: initial;
}
.loading-overlay.is-full-page .loading-icon::after {
height: 50px;
width: 50px;
height: 46px;
width: 46px;
background-size: initial;
top: calc(50% - 25px);
left: calc(50% - 25px);
}