Makes table and cards right-clickable on theme (admin is more complicated to solve so far).

This commit is contained in:
mateuswetah 2018-09-13 22:53:56 -03:00
parent e77176268b
commit 93ba7d7c20
3 changed files with 21 additions and 22 deletions

View File

@ -25,12 +25,13 @@
min-height: 210px;
max-height: 210px;
cursor: pointer;
text-decoration: none !important;
@media screen and (max-width: 480px) {
max-width: 100%;
min-width: 100%;
min-height: 176px;
max-height: 176px;
min-height: 171px;
max-height: 171px;
img {
width: 130px !important;
@ -86,7 +87,9 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: black !important;
p {
color: black !important;
font-size: 0.875rem !important;
text-overflow: ellipsis;
white-space: nowrap;
@ -96,6 +99,7 @@
}
&:hover .metadata-title {
background-color: $gray2 !important;
p { text-decoration: none !important; }
}
.media {

View File

@ -16,11 +16,12 @@
</section>
<!-- CARDS VIEW MODE -->
<div class="tainacan-cards-container">
<div
<!-- <div> -->
<a
:key="index"
v-for="(item, index) of items"
class="tainacan-card">
class="tainacan-card"
:href="item.url">
<!-- Title -->
<div class="metadata-title">
<p
@ -29,15 +30,12 @@
html: true,
autoHide: false,
placement: 'auto-start'
}"
@click="goToItemPage(item)">
}">
{{ item.title != undefined ? item.title : '' }}
</p>
</div>
<!-- Remaining metadata -->
<div
class="media"
@click="goToItemPage(item)">
<div class="media">
<img
v-if="item.thumbnail != undefined"
@ -73,7 +71,8 @@
</div>
</div>
</div>
</a>
<!-- </div> -->
</div>
</div>
</div>
@ -96,9 +95,6 @@ export default {
}
},
methods: {
goToItemPage(item) {
window.location.href = item.url;
},
renderMetadata(itemMetadata, column) {
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;

View File

@ -44,7 +44,7 @@
<tr
:key="index"
v-for="(item, index) of items">
<!-- Item Displayed Metadata -->
<td
:key="index"
@ -64,9 +64,8 @@
column.metadata_type_object.primitive_type == 'term' ||
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,
}"
@click="goToItemPage(item)">
}">
<a :href="item.url">
<p
v-tooltip="{
content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`,
@ -108,6 +107,7 @@
class="table-thumb"
:src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
</span>
</a>
</td>
</tr>
</tbody>
@ -132,9 +132,6 @@ export default {
}
},
methods: {
goToItemPage(item) {
window.location.href = item.url;
},
renderMetadata(itemMetadata, column) {
let metadata = (itemMetadata != undefined && itemMetadata[column.slug] != undefined) ? itemMetadata[column.slug] : false;
@ -152,7 +149,9 @@ export default {
</script>
<style>
td>a:hover {
text-decoration: none !important;
}
</style>