More and more work towards new item edition page UI.
This commit is contained in:
mateuswetah
parent
1e7f35b015
commit
9135844c3b
|
|
@ -151,6 +151,9 @@
|
|||
.tainacan-icon-items:before {
|
||||
content: "items";
|
||||
}
|
||||
.tainacan-icon-item:before {
|
||||
content: "item";
|
||||
}
|
||||
.tainacan-icon-menu:before {
|
||||
content: "menu";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@
|
|||
|
||||
<div class="b-tabs">
|
||||
<nav
|
||||
v-if="tabs.length >= 2"
|
||||
role="list"
|
||||
ref="tainacanTabsSwiper"
|
||||
v-swiper:mySwiper="swiperOptions"
|
||||
|
|
@ -175,7 +176,25 @@
|
|||
</button>
|
||||
</nav>
|
||||
|
||||
<section class="tab-content">
|
||||
<section
|
||||
:style="tabs.length < 2 ? 'border-top: none;' : ''"
|
||||
class="tab-content">
|
||||
|
||||
<div
|
||||
v-if="tabs.length < 2"
|
||||
class="section-label">
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-metadata"/>
|
||||
</span>
|
||||
{{ $i18n.get('metadata') }}
|
||||
<span
|
||||
v-if="metadatumList.length"
|
||||
class="has-text-gray has-text-weight-normal">
|
||||
({{ metadatumList.length }})
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Metadata from Collection-------------------------------- -->
|
||||
<div
|
||||
|
|
@ -336,39 +355,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- Attachments ------------------------------------------ -->
|
||||
<div
|
||||
v-if="activeTab === 'attachments' && !$adminOptions.hideItemEditionAttachments"
|
||||
class="tab-item"
|
||||
role="tabpanel"
|
||||
aria-labelledby="attachments-tab-label"
|
||||
tabindex="0">
|
||||
|
||||
<div v-if="item != undefined && item.id != undefined">
|
||||
<div class="attachments-list-heading">
|
||||
<button
|
||||
style="margin-left: calc(var(--tainacan-one-column) + 12px)"
|
||||
type="button"
|
||||
class="button is-secondary"
|
||||
@click.prevent="attachmentMediaFrame.openFrame($event)"
|
||||
:disabled="isLoadingAttachments">
|
||||
{{ $i18n.get("label_edit_attachments") }}
|
||||
</button>
|
||||
<p>
|
||||
{{ $i18n.get("info_edit_attachments") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<attachments-list
|
||||
v-if="item != undefined && item.id != undefined"
|
||||
:item="item"
|
||||
:is-editable="true"
|
||||
:is-loading.sync="isLoadingAttachments"
|
||||
@isLoadingAttachments="(isLoading) => isLoadingAttachments = isLoading"
|
||||
@onDeleteAttachment="deleteAttachment($event)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -391,7 +377,12 @@
|
|||
<div
|
||||
v-if="!$adminOptions.hideItemEditionDocument"
|
||||
class="section-label">
|
||||
<label>{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i :class="'tainacan-icon tainacan-icon-' + ( (!form.document_type || form.document_type == 'empty' ) ? 'item' : (form.document_type == 'attachment' ? 'attachments' : form.document_type))"/>
|
||||
</span>
|
||||
{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}
|
||||
</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
:message="$i18n.getHelperMessage('items', 'document')"/>
|
||||
|
|
@ -483,7 +474,12 @@
|
|||
<div
|
||||
v-if="!$adminOptions.hideItemEditionThumbnail"
|
||||
class="section-label">
|
||||
<label>{{ $i18n.get('label_thumbnail') }}</label>
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-image"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_thumbnail') }}
|
||||
</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
|
|
@ -575,12 +571,25 @@
|
|||
<div
|
||||
v-if="!$adminOptions.hideItemEditionAttachments"
|
||||
class="section-label">
|
||||
<label>{{ $i18n.get('label_attachments') }}</label>
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-attachments"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_attachments') }}
|
||||
<span
|
||||
v-if="totalAttachments"
|
||||
class="has-text-gray has-text-weight-normal">
|
||||
({{ totalAttachments }})
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-if="item != undefined && item.id != undefined && !isLoading && !$adminOptions.hideItemEditionAttachments"
|
||||
class="section-box section-attachments">
|
||||
<div class="attachments-list-heading">
|
||||
<p>
|
||||
{{ $i18n.get("info_edit_attachments") }}
|
||||
</p>
|
||||
<button
|
||||
style="margin-left: calc(var(--tainacan-one-column) + 12px)"
|
||||
type="button"
|
||||
|
|
@ -589,9 +598,6 @@
|
|||
:disabled="isLoadingAttachments">
|
||||
{{ $i18n.get("label_edit_attachments") }}
|
||||
</button>
|
||||
<p>
|
||||
{{ $i18n.get("info_edit_attachments") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<attachments-list
|
||||
|
|
@ -1007,14 +1013,6 @@ export default {
|
|||
total: this.totalRelatedItems
|
||||
});
|
||||
}
|
||||
if (!this.$adminOptions.hideItemEditionAttachments) {
|
||||
pageTabs.push({
|
||||
slug: 'attachments',
|
||||
icon: 'attachments',
|
||||
name: this.$i18n.get('label_attachments'),
|
||||
total: this.totalAttachments
|
||||
});
|
||||
}
|
||||
return pageTabs;
|
||||
},
|
||||
isCurrentlyFocusedOnCompoundMetadatum() {
|
||||
|
|
@ -2003,7 +2001,7 @@ export default {
|
|||
position: sticky;
|
||||
top: -25px;
|
||||
margin: 3px 0;
|
||||
max-height: calc(100vh - 202px);
|
||||
max-height: calc(100vh - 185px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -2036,6 +2034,15 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
&>.column.is-7 {
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
&>.column.is-5 {
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
|
@ -2108,6 +2115,10 @@ export default {
|
|||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
.section-box+.section-label {
|
||||
border-top: 1px dashed var(--tainacan-info-color);
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
display: flex;
|
||||
|
|
@ -2194,12 +2205,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.section-box {
|
||||
padding: 0 var(--tainacan-one-column);
|
||||
margin-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.section-status {
|
||||
padding-bottom: 16px;
|
||||
font-size: 0.875em;
|
||||
|
|
@ -2270,10 +2275,17 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.section-box {
|
||||
padding: 0 1em 0 1.875em;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.document-buttons-row,
|
||||
.thumbnail-buttons-row {
|
||||
bottom: -6px;
|
||||
left: 6px;
|
||||
left: 0.875em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -2303,13 +2315,13 @@ export default {
|
|||
.document-field {
|
||||
|
||||
.document-field-content {
|
||||
max-height: 26vh;
|
||||
max-height: 32vh;
|
||||
|
||||
/deep/ img,
|
||||
/deep/ video,
|
||||
/deep/ figure {
|
||||
max-width: 100%;
|
||||
max-height: 26vh;
|
||||
max-height: 32vh;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -2321,11 +2333,26 @@ export default {
|
|||
/deep/ iframe,
|
||||
/deep/ blockquote {
|
||||
max-width: 100%;
|
||||
max-height: 26vh;
|
||||
max-height: 32vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 770px) {
|
||||
max-height: 25vh;
|
||||
|
||||
/deep/ img,
|
||||
/deep/ video,
|
||||
/deep/ figure {
|
||||
max-height: 25vh;
|
||||
}
|
||||
/deep/ audio,
|
||||
/deep/ iframe,
|
||||
/deep/ blockquote {
|
||||
max-height: 25vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-field-placeholder {
|
||||
|
|
@ -2399,11 +2426,18 @@ export default {
|
|||
.attachments-list-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
justify-content: space-between;
|
||||
margin-left: 1.5em;
|
||||
margin-top: 10px;
|
||||
margin-bottom: var(--tainacan-container-padding);
|
||||
p {
|
||||
color: var(--tainacan-info-color);
|
||||
}
|
||||
button {
|
||||
margin-right: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@
|
|||
|
||||
.file-item-container {
|
||||
display: inline-block;
|
||||
margin: 15px;
|
||||
margin: 10px 12px;
|
||||
position: relative;
|
||||
|
||||
&:hover .file-item-control {
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
.file-item-control {
|
||||
position: absolute;
|
||||
background-color: var(--tainacan-gray1);
|
||||
width: 112px;
|
||||
width: 94px;
|
||||
margin: 6px 0;
|
||||
bottom: 0px;
|
||||
padding: 2px 8px 4px 8px;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
:class="{'shows-modal-on-click' : modalOnClick}"
|
||||
@click="modalOnClick? isPreviewModalActive = true : null">
|
||||
<figcaption
|
||||
:style="{ 'max-width': size != undefined ? size + 'px' : '112px' }"
|
||||
:style="{ 'max-width': size != undefined ? size + 'px' : '94px' }"
|
||||
v-if="showName && file.title != undefined">{{ file.title }}</figcaption>
|
||||
<div
|
||||
:style="{ 'width': size != undefined ? size + 'px' : '112px', 'height': size != undefined ? size + 'px' : '112px' }"
|
||||
:style="{ 'width': size != undefined ? size + 'px' : '94px', 'height': size != undefined ? size + 'px' : '94px' }"
|
||||
class="image-wrapper">
|
||||
<div
|
||||
v-if="file.media_type == 'image'"
|
||||
|
|
@ -76,7 +76,7 @@ export default {
|
|||
name: 'FileItem',
|
||||
props: {
|
||||
file: Object,
|
||||
size: 112,
|
||||
size: 94,
|
||||
showName: false,
|
||||
isSelected: false,
|
||||
modalOnClick: true
|
||||
|
|
|
|||
|
|
@ -79,6 +79,10 @@
|
|||
|
||||
// Not really used in EVERY container, but a rather frequent value
|
||||
--tainacan-container-padding: #{$container-padding};
|
||||
|
||||
@media screen and (max-height: 770px) {
|
||||
--tainacan-container-padding: #{$container-narrow-padding};
|
||||
}
|
||||
}
|
||||
|
||||
#tainacan-admin-app,
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ $page-height: calc(100vh - 5.5em);
|
|||
// Overall Pages padding:
|
||||
$one-column: 4.166666667%;
|
||||
$container-padding: 25px;
|
||||
$container-narrow-padding: 18px;
|
||||
|
||||
// Links
|
||||
$link: $secondary;
|
||||
|
|
|
|||
Loading…
Reference in New Issue