Adds different style for metadata separator when in textarea.

This commit is contained in:
Mateus Machado Luna 2019-05-06 11:44:00 -03:00
parent c2870a935b
commit 2cdb534c98
7 changed files with 47 additions and 31 deletions

View File

@ -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' ||

View File

@ -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>

View File

@ -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 }
}
}

View File

@ -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;

View File

@ -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;
}
}
}
}

View File

@ -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;

View File

@ -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' ||