Adds first version of new Records View Mode, using Masonry.
This commit is contained in:
Mateus Machado Luna
parent
5d5ceb9eb6
commit
4b2379d8a7
|
|
@ -271,7 +271,9 @@
|
|||
</div>
|
||||
|
||||
<!-- 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"
|
||||
v-if="viewMode == 'records'">
|
||||
<div
|
||||
|
|
@ -284,9 +286,15 @@
|
|||
<div
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="record-checkbox">
|
||||
<b-checkbox
|
||||
size="is-small"
|
||||
v-model="selectedItems[index]"/>
|
||||
<label
|
||||
tabindex="0"
|
||||
class="b-checkbox checkbox is-small">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="selectedItems[index]">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
|
|
@ -343,12 +351,12 @@
|
|||
<div
|
||||
class="media"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<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 class="list-metadata media-body">
|
||||
</div>
|
||||
<span
|
||||
v-for="(column, index) in tableMetadata"
|
||||
:key="index"
|
||||
|
|
@ -397,7 +405,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</masonry>
|
||||
|
||||
<!-- TABLE VIEW MODE -->
|
||||
<table
|
||||
|
|
|
|||
|
|
@ -19,11 +19,12 @@
|
|||
.tainacan-record {
|
||||
padding: 0px;
|
||||
flex-basis: 0;
|
||||
margin: 0.75rem;
|
||||
max-width: 410px;
|
||||
min-width: 410px;
|
||||
min-height: 218px;
|
||||
margin-bottom: 42px;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
|
|
@ -64,8 +65,12 @@
|
|||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.thumbnail {
|
||||
float: right;
|
||||
margin: 0 0 1.5rem 1.5rem;
|
||||
}
|
||||
img {
|
||||
width: 172px;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -81,6 +86,8 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: black;
|
||||
|
||||
p {
|
||||
font-size: 0.875rem !important;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -106,18 +113,13 @@
|
|||
.metadata-label {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.2rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
color: $gray4;
|
||||
font-weight: 700;
|
||||
color: #454647;
|
||||
}
|
||||
|
||||
.metadata-value {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
color: $gray4;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,12 @@
|
|||
</div>
|
||||
</section>
|
||||
<!-- RECORDS VIEW MODE -->
|
||||
<div class="tainacan-records-container">
|
||||
<div
|
||||
<masonry
|
||||
: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"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-record">
|
||||
|
|
@ -52,32 +56,20 @@
|
|||
<div
|
||||
class="media"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<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>
|
||||
|
||||
<div class="list-metadata media-body">
|
||||
<span
|
||||
v-for="(column, index) in tableMetadata"
|
||||
:key="index"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
|
||||
<h3
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_description'),
|
||||
html: false,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: item.description != undefined ? item.description : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-html="item.description != undefined ? item.description : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
|
|
@ -85,29 +77,16 @@
|
|||
v-for="(column, index) in displayedMetadata"
|
||||
:key="index"
|
||||
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3
|
||||
v-tooltip="{
|
||||
content: column.name,
|
||||
html: false,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
class="metadata-label">{{ column.name }}</h3>
|
||||
<h3 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) : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- </div> -->
|
||||
</masonry>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue