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

Merge branch 'develop' of https://github.com/tainacan/tainacan into develop

This commit is contained in:
weryques 2018-12-06 14:32:43 -02:00
parent 47172fe2a2 37935484ba
commit 1251e1871e
4 changed files with 68 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/admin/scss/_tables.scss
View File

@ -13,6 +13,17 @@
overflow-y: hidden;
margin-bottom: 0px !important;
table.tainacan-table-skeleton {
tbody {
td.skeleton {
height: 52px;
border-radius: 0;
background-color: #eee !important;
border-top: 5px solid white !important;
}
}
}
table.tainacan-table {
animation-name: appear;
animation-duration: 0.5s;
@ -151,6 +162,17 @@
vertical-align: middle;
line-height: 0.75rem;
border: none !important;
&.thumbnail-cell .skeleton {
height: 38px;
width: 38px;
margin-top: -38px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: -1;
}
p {
font-size: 0.875rem;
margin: 0px;
@ -159,9 +181,13 @@
white-space: nowrap;
max-height: 1.25rem;
}
a:hover {
text-decoration: none !important;
}
}
img.table-thumb {
max-height: 38px !important;
max-width: 38px;
border-radius: 0px;
}
td.actions-cell {

1
src/theme-helper/class-tainacan-theme-helper.php
View File

@ -62,6 +62,7 @@ class Theme_Helper {
'dynamic_metadata' => true,
'icon' => '<span class="icon"><i class="tainacan-icon tainacan-icon-viewtable tainacan-icon-20px"></i></span>',
'type' => 'component',
'implements_skeleton' => true
]);
$this->register_view_mode('cards', [
'label' => __('Cards', 'tainacan'),

2
src/theme-helper/view-mode-cards.vue
View File

@ -55,7 +55,7 @@
v-if="item.thumbnail != undefined"
:src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
<div class="skeleton"/>
<div class="list-metadata media-body">
<!-- Description -->
<p

47
src/theme-helper/view-mode-table.vue
View File

@ -14,6 +14,45 @@
<p>{{ $i18n.get('info_no_item_found') }}</p>
</div>
</section>
<!-- SKELETON LOADING -->
<table
v-if="isLoading"
class="tainacan-table tainacan-table-skeleton">
<thead>
<th
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display"
class="column-default-width"
:class="{
'thumbnail-cell': column.metadatum == 'row_thumbnail',
'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' ||
column.metadata_type_object.primitive_type == 'float' ||
column.metadata_type_object.primitive_type == 'int') : false,
'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' ||
column.metadata_type_object.primitive_type == 'item' ||
column.metadata_type_object.primitive_type == 'compound') : false,
'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' || column.metadata_type_object.related_mapped_prop == 'description') : false,
}"
:custom-key="column.slug">
<div class="th-wrap">{{ column.name }}</div>
</th>
</thead>
<tbody>
<tr
:key="item"
v-for="item in 12">
<td
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display"
class="column-default-width skeleton"/>
</tr>
</tbody>
</table>
<!-- TABLE VIEW MODE -->
<table
v-if="!isLoading && items.length > 0"
class="tainacan-table">
@ -106,6 +145,7 @@
<img
class="table-thumb"
:src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small[0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">
<div class="skeleton"/>
</span>
</a>
</td>
@ -151,10 +191,3 @@ export default {
}
</script>
<style>
td>a:hover {
text-decoration: none !important;
}
</style>