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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -640,6 +640,7 @@
<span <span
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :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')"> 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> <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
<p <p
@ -649,6 +650,7 @@
<span <span
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :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')"> 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> <h3 class="metadata-label">{{ column.name }}</h3>
<p <p
@ -721,7 +723,7 @@
v-if="column.display" v-if="column.display"
:label="column.name" :label="column.name"
class="column-default-width" 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', 'thumbnail-cell': column.metadatum == 'row_thumbnail',
'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false, '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' || 'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||

4
src/admin/pages/singles/item-page.vue
View File

@ -296,7 +296,9 @@
</span> </span>
{{ metadatum.metadatum.name }} {{ metadatum.metadatum.name }}
</label> </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>`"/> <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> </div>
</b-collapse> </b-collapse>

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

@ -125,7 +125,7 @@
.metadata-label { .metadata-label {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
color: #454647; color: $gray4;
} }
.metadata-value { .metadata-value {
@ -133,7 +133,8 @@
margin-bottom: 1rem; margin-bottom: 1rem;
color: $gray4; color: $gray4;
} }
p { margin-bottom: 1rem }
} }
} }

17
src/admin/scss/tainacan-admin.scss
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...) // Buefy notices (toast, snackbar...)
.notices { .notices {
z-index: 99999999999999 !important; z-index: 99999999999999 !important;

18
src/admin/theme-items-list.vue
View File

@ -165,7 +165,6 @@ export default {
margin-right: $page-side-padding !important; margin-right: $page-side-padding !important;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
justify-content: space-between !important; justify-content: space-between !important;
} }
@ -206,6 +205,23 @@ export default {
margin-left: 25% !important; 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;
}
}
} }
} }

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

@ -59,22 +59,7 @@
:key="index" :key="index"
class="metadata-title" class="metadata-title"
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == '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) : ''" /> 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 : ''" />
<!-- Remaining metadata --> <!-- Remaining metadata -->
<div class="media"> <div class="media">
@ -92,18 +77,10 @@
}" }"
class="skeleton"/> class="skeleton"/>
</div> </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 <span
v-for="(column, index) in displayedMetadata" v-for="(column, index) in displayedMetadata"
:key="index" :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')"> 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> <h3 class="metadata-label">{{ column.name }}</h3>
<p <p
@ -120,7 +97,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'ViewModeRecords', name: 'ViewModeRecords',
props: { props: {
@ -167,6 +143,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$turquoise1: #e6f6f8; $turquoise1: #e6f6f8;
$turquoise2: #d1e6e6; $turquoise2: #d1e6e6;
$tainacan-input-color: #1d1d1d; $tainacan-input-color: #1d1d1d;

1
src/theme-helper/view-mode-table.vue
View File

@ -93,6 +93,7 @@
:label="column.name" :label="column.name"
class="column-default-width" class="column-default-width"
:class="{ :class="{
'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea',
'thumbnail-cell': column.metadatum == 'row_thumbnail', 'thumbnail-cell': column.metadatum == 'row_thumbnail',
'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false, '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' || 'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||