Adds different style for metadata separator when in textarea.
This commit is contained in:
parent
c2870a935b
commit
2cdb534c98
|
@ -640,6 +640,7 @@
|
|||
<span
|
||||
v-for="(column, index) in tableMetadata"
|
||||
:key="index"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
|
||||
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||
<p
|
||||
|
@ -649,6 +650,7 @@
|
|||
<span
|
||||
v-for="(column, index) in tableMetadata"
|
||||
:key="index"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
|
@ -721,7 +723,7 @@
|
|||
v-if="column.display"
|
||||
:label="column.name"
|
||||
class="column-default-width"
|
||||
:class="{
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea',
|
||||
'thumbnail-cell': column.metadatum == 'row_thumbnail',
|
||||
'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false,
|
||||
'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||
|
||||
|
|
|
@ -296,7 +296,9 @@
|
|||
</span>
|
||||
{{ metadatum.metadatum.name }}
|
||||
</label>
|
||||
<div class="content">
|
||||
<div
|
||||
:class="{ 'metadata-type-textarea': metadatum.metadatum.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
class="content">
|
||||
<p v-html="metadatum.value_as_html != '' ? metadatum.value_as_html : `<span class='has-text-gray is-italic'>` + $i18n.get('label_value_not_informed') + `</span>`"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
|
|
@ -125,7 +125,7 @@
|
|||
.metadata-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: #454647;
|
||||
color: $gray4;
|
||||
}
|
||||
|
||||
.metadata-value {
|
||||
|
@ -133,7 +133,8 @@
|
|||
margin-bottom: 1rem;
|
||||
color: $gray4;
|
||||
}
|
||||
|
||||
|
||||
p { margin-bottom: 1rem }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -113,6 +113,23 @@ a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
// Metadata type textarea has different separators in different spots on interface
|
||||
.multivalue-separator {
|
||||
color: $gray3;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.metadata-type-textarea {
|
||||
.multivalue-separator {
|
||||
display: block;
|
||||
max-height: 1px;
|
||||
width: 35px;
|
||||
background: $gray3;
|
||||
content: none;
|
||||
color: transparent;
|
||||
margin: 0 auto 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Buefy notices (toast, snackbar...)
|
||||
.notices {
|
||||
z-index: 99999999999999 !important;
|
||||
|
|
|
@ -165,7 +165,6 @@ export default {
|
|||
margin-right: $page-side-padding !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
@ -206,6 +205,23 @@ export default {
|
|||
margin-left: 25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Metadata type textarea has different separators in different spots on interface
|
||||
.multivalue-separator {
|
||||
color: $gray3;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.metadata-type-textarea {
|
||||
.multivalue-separator {
|
||||
display: block;
|
||||
max-height: 1px;
|
||||
width: 35px;
|
||||
background: $gray3;
|
||||
content: none;
|
||||
color: transparent;
|
||||
margin: 0 auto 1rem auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -59,22 +59,7 @@
|
|||
:key="index"
|
||||
class="metadata-title"
|
||||
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
show: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.title != undefined ? item.title : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
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 == 'title')"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
|
@ -92,18 +77,10 @@
|
|||
}"
|
||||
class="skeleton"/>
|
||||
</div>
|
||||
<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 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||
<p
|
||||
v-html="item.description != undefined ? item.description : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
<span
|
||||
v-for="(column, index) in displayedMetadata"
|
||||
:key="index"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
|
@ -120,7 +97,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ViewModeRecords',
|
||||
props: {
|
||||
|
@ -167,6 +143,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
$turquoise1: #e6f6f8;
|
||||
$turquoise2: #d1e6e6;
|
||||
$tainacan-input-color: #1d1d1d;
|
||||
|
|
|
@ -93,6 +93,7 @@
|
|||
:label="column.name"
|
||||
class="column-default-width"
|
||||
:class="{
|
||||
'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea',
|
||||
'thumbnail-cell': column.metadatum == 'row_thumbnail',
|
||||
'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false,
|
||||
'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||
|
||||
|
|
Loading…
Reference in New Issue