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

Adds first version of new Records View Mode, using Masonry.

This commit is contained in:
Mateus Machado Luna 2018-08-20 14:15:42 -03:00
parent 5d5ceb9eb6
commit 4b2379d8a7
3 changed files with 51 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/admin/components/lists/items-list.vue
View File

@ -271,7 +271,9 @@
</div> </div>
<!-- RECORDS VIEW MODE --> <!-- RECORDS VIEW MODE -->
<div <masonry
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
:gutter="42"
class="tainacan-records-container" class="tainacan-records-container"
v-if="viewMode == 'records'"> v-if="viewMode == 'records'">
<div <div
@ -284,9 +286,15 @@
<div <div
:class="{ 'is-selecting': isSelectingItems }" :class="{ 'is-selecting': isSelectingItems }"
class="record-checkbox"> class="record-checkbox">
<b-checkbox <label
size="is-small" tabindex="0"
v-model="selectedItems[index]"/> class="b-checkbox checkbox is-small">
<input
type="checkbox"
v-model="selectedItems[index]">
<span class="check" />
<span class="control-label" />
</label>
</div> </div>
<!-- Title --> <!-- Title -->
@ -343,12 +351,12 @@
<div <div
class="media" class="media"
@click="goToItemPage(item)"> @click="goToItemPage(item)">
<img
v-if="item.thumbnail != undefined"
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<div class="thumbnail">
<img
v-if="item.thumbnail != undefined"
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</div>
<span <span
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :key="index"
@ -397,7 +405,7 @@
</div> </div>
</div> </div>
</div> </masonry>
<!-- TABLE VIEW MODE --> <!-- TABLE VIEW MODE -->
<table <table

28
src/admin/scss/_view-mode-records.scss
View File

@ -19,11 +19,12 @@
.tainacan-record { .tainacan-record {
padding: 0px; padding: 0px;
flex-basis: 0; flex-basis: 0;
margin: 0.75rem; margin-bottom: 42px;
max-width: 410px; width: 100%;
min-width: 410px; min-height: 200px;
min-height: 218px;
cursor: pointer; cursor: pointer;
text-decoration: none;
display: block;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
max-width: 100%; max-width: 100%;
@ -64,8 +65,12 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
.thumbnail {
float: right;
margin: 0 0 1.5rem 1.5rem;
}
img { img {
width: 172px; width: 120px;
height: auto; height: auto;
border-radius: 2px; border-radius: 2px;
} }
@ -81,6 +86,8 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: black;
p { p {
font-size: 0.875rem !important; font-size: 0.875rem !important;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -106,18 +113,13 @@
.metadata-label { .metadata-label {
font-size: 0.75rem; font-size: 0.75rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
text-overflow: ellipsis; font-weight: 700;
white-space: nowrap; color: #454647;
overflow: hidden;
font-weight: 500;
color: $gray4;
} }
.metadata-value { .metadata-value {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 1rem; margin-bottom: 1rem;
color: $gray4;
} }
} }

57
src/theme-helper/view-mode-records.vue
View File

@ -15,8 +15,12 @@
</div> </div>
</section> </section>
<!-- RECORDS VIEW MODE --> <!-- RECORDS VIEW MODE -->
<div class="tainacan-records-container"> <masonry
<div :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
:gutter="42"
class="tainacan-records-container">
<a
href="www.google.com"
:key="index" :key="index"
v-for="(item, index) of items" v-for="(item, index) of items"
class="tainacan-record"> class="tainacan-record">
@ -52,32 +56,20 @@
<div <div
class="media" class="media"
@click="goToItemPage(item)"> @click="goToItemPage(item)">
<a
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a>
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<a
class="thumbnail"
v-if="item.thumbnail != undefined"
@click="goToItemPage(item)">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a>
<span <span
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :key="index"
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')"> v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
<h3 <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
v-tooltip="{
content: $i18n.get('label_description'),
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-label">{{ $i18n.get('label_description') }}</h3>
<p <p
v-tooltip="{
content: item.description != undefined ? item.description : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-html="item.description != undefined ? item.description : ''" v-html="item.description != undefined ? item.description : ''"
class="metadata-value"/> class="metadata-value"/>
</span> </span>
@ -85,29 +77,16 @@
v-for="(column, index) in displayedMetadata" v-for="(column, index) in displayedMetadata"
:key="index" :key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')"> v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
<h3 <h3 class="metadata-label">{{ column.name }}</h3>
v-tooltip="{ <p
content: column.name,
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-label">{{ column.name }}</h3>
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/> class="metadata-value"/>
</span> </span>
</div> </div>
</div> </div>
<!-- </a> --> </a>
</div> <!-- </div> -->
</div> </masonry>
</div> </div>
</div> </div>
</template> </template>