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

Improves mobile layout of item edition page.

This commit is contained in:
mateuswetah 2022-07-15 17:20:18 -03:00
parent 02f333065c
commit 34dadf8c1f
4 changed files with 122 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/admin/components/edition/item-edition-form.vue
View File

@ -293,23 +293,6 @@
<section <section
:style="tabs.length < 2 ? 'border-top: none; padding-top: 0;' : ''" :style="tabs.length < 2 ? 'border-top: none; padding-top: 0;' : ''"
class="tab-content item-edition-tab-content"> class="tab-content item-edition-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') }}&nbsp;
<span
v-if="metadatumList.length"
class="has-text-gray has-text-weight-normal"
style="font-size: 0.875em;">
({{ metadatumList.length }})
</span>
</label>
</div>
<!-- Metadata from Collection-------------------------------- --> <!-- Metadata from Collection-------------------------------- -->
<div <div
@ -333,6 +316,7 @@
class="sequence-progress" /> class="sequence-progress" />
<a <a
v-if="!isMetadataNavigation && !$adminOptions.hideItemEditionCollapses"
class="collapse-all" class="collapse-all"
@click="toggleCollapseAll()"> @click="toggleCollapseAll()">
<span class="icon"> <span class="icon">
@ -344,7 +328,7 @@
</a> </a>
<span <span
v-if="isUpdatingValues && isMetadataNavigation" v-if="isUpdatingValues && isMetadataNavigation && !$adminOptions.mobileAppMode"
class="update-warning"> class="update-warning">
<span class="icon"> <span class="icon">
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-updating"/> <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-updating"/>
@ -353,7 +337,8 @@
<b-field <b-field
v-if="metadatumList && metadatumList.length > 3" v-if="metadatumList && metadatumList.length > 3"
class="header-item metadata-navigation"> class="header-item metadata-navigation"
:style="$adminOptions.hideItemEditionCollapses ? 'padding-left: 0.35em !important;' : ''">
<b-button <b-button
v-if="!isMetadataNavigation" v-if="!isMetadataNavigation"
@click="isMetadataNavigation = true; setMetadatumFocus({ index: 0, scrollIntoView: true });" @click="isMetadataNavigation = true; setMetadatumFocus({ index: 0, scrollIntoView: true });"
@ -425,8 +410,9 @@
<div class="metadata-section-header section-label"> <div class="metadata-section-header section-label">
<span <span
class="collapse-handle" class="collapse-handle"
@click="toggleMetadataSectionCollapse(sectionIndex)"> @click="(isMetadataNavigation || $adminOptions.hideItemEditionCollapses) ? null : toggleMetadataSectionCollapse(sectionIndex)">
<span <span
v-if="!$adminOptions.hideItemEditionCollapses && !isMetadataNavigation"
class="icon" class="icon"
@click="toggleMetadataSectionCollapse(sectionIndex)"> @click="toggleMetadataSectionCollapse(sectionIndex)">
<i <i
@ -436,7 +422,18 @@
}" }"
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/> class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
</span> </span>
<label>{{ metadataSection.name }}</label> <label>
<span class="icon has-text-gray4">
<i class="tainacan-icon tainacan-icon-metadata"/>
</span>
{{ metadataSection.name }}&nbsp;
<span
v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length"
class="has-text-gray has-text-weight-normal"
style="font-size: 0.875em;">
({{ metadataSection.metadata_object_list.length }})
</span>
</label>
<help-button <help-button
v-if="metadataSection.description" v-if="metadataSection.description"
:title="metadataSection.name" :title="metadataSection.name"
@ -461,6 +458,7 @@
:item-metadatum="itemMetadatum" :item-metadatum="itemMetadatum"
:metadata-name-filter-string="metadataNameFilterString" :metadata-name-filter-string="metadataNameFilterString"
:is-collapsed="metadataCollapses[index]" :is-collapsed="metadataCollapses[index]"
:hide-collapses="$adminOptions.hideItemEditionCollapses || isMetadataNavigation"
:is-mobile-screen="isMobileScreen" :is-mobile-screen="isMobileScreen"
:is-last-metadatum="index > 2 && (index == metadatumList.length - 1)" :is-last-metadatum="index > 2 && (index == metadatumList.length - 1)"
:is-focused="focusedMetadatum === index" :is-focused="focusedMetadatum === index"
@ -572,6 +570,7 @@
<!-- Document -------------------------------- --> <!-- Document -------------------------------- -->
<item-document-edition-form <item-document-edition-form
v-if="!$adminOptions.itemEditionDocumentInsideTabs"
:item="item" :item="item"
:form="form" :form="form"
@onSetDocument="setDocument" @onSetDocument="setDocument"
@ -579,9 +578,11 @@
@onSetFileDocument="setFileDocument" @onSetFileDocument="setFileDocument"
@onSetTextDocument="setTextDocument" @onSetTextDocument="setTextDocument"
@onSetURLDocument="setURLDocument" /> @onSetURLDocument="setURLDocument" />
<hr>
<!-- Thumbnail -------------------------------- --> <!-- Thumbnail -------------------------------- -->
<item-thumbnail-edition-form <item-thumbnail-edition-form
v-if="!$adminOptions.itemEditionDocumentInsideTabs"
:item="item" :item="item"
:form="form" :form="form"
:is-loading="isLoading" :is-loading="isLoading"
@ -589,8 +590,11 @@
@onUpdateThumbnailAlt="($event) => form.thumbnail_alt = $event.target.value" @onUpdateThumbnailAlt="($event) => form.thumbnail_alt = $event.target.value"
@openThumbnailMediaFrame="thumbnailMediaFrame.openFrame($event)" /> @openThumbnailMediaFrame="thumbnailMediaFrame.openFrame($event)" />
<hr v-if="!$adminOptions.itemEditionAttachmentsInsideTabs || hasEndLeftForm">
<!-- Attachments --> <!-- Attachments -->
<item-attachments-edition-form <item-attachments-edition-form
v-if="!$adminOptions.itemEditionAttachmentsInsideTabs"
:item="item" :item="item"
:form="form" :form="form"
:is-loading="isLoading" :is-loading="isLoading"
@ -599,6 +603,8 @@
@openAttachmentsMediaFrame="($event) => attachmentsMediaFrame.openFrame($event)" @openAttachmentsMediaFrame="($event) => attachmentsMediaFrame.openFrame($event)"
@onDeleteAttachment="deleteAttachment($event)" /> @onDeleteAttachment="deleteAttachment($event)" />
<hr v-if="hasEndLeftForm">
<!-- Hook for extra Form options --> <!-- Hook for extra Form options -->
<template v-if="hasEndLeftForm"> <template v-if="hasEndLeftForm">
<form <form
@ -672,6 +678,7 @@
</span> </span>
</p> </p>
</div> </div>
<div <div
class="form-submission-footer" class="form-submission-footer"
v-if="isEditingItemMetadataInsideIframe"> v-if="isEditingItemMetadataInsideIframe">
@ -974,7 +981,8 @@ export default {
focusedMetadatum: false, focusedMetadatum: false,
isMetadataNavigation: false, isMetadataNavigation: false,
isOnFirstMetadatumOfCompoundNavigation: false, isOnFirstMetadatumOfCompoundNavigation: false,
isOnLastMetadatumOfCompoundNavigation: false isOnLastMetadatumOfCompoundNavigation: false,
hideMetadataTypes: this.$adminOptions.hideItemEditionMetadataTypes
} }
}, },
computed: { computed: {
@ -1956,11 +1964,13 @@ export default {
<style lang="scss"> <style lang="scss">
.tainacan-admin-collection-mobile-app-mode .page-container.item-edition-container { .tainacan-admin-collection-mobile-app-mode .page-container.item-edition-container,
.tainacan-admin-collection-mobile-app-mode .page-container.item-creation-container {
padding-top: 0px; padding-top: 0px;
} }
.page-container.item-edition-container { .page-container.item-edition-container,
.page-container.item-creation-container {
padding: var(--tainacan-container-padding) 0px 0px 0px; padding: var(--tainacan-container-padding) 0px 0px 0px;
&>.tainacan-form { &>.tainacan-form {
@ -1969,6 +1979,12 @@ export default {
.field:not(:last-child) { .field:not(:last-child) {
margin-bottom: 0em; margin-bottom: 0em;
} }
hr {
height: 1px;
margin: 1.25em 0 0.75em;
background: var(--tainacan-gray0);
}
} }
.tainacan-page-title { .tainacan-page-title {
@ -1990,7 +2006,6 @@ export default {
padding: 0 0.5em; padding: 0 0.5em;
} }
} }
.tainacan-form > .columns { .tainacan-form > .columns {
margin-left: var(--tainacan-one-column); margin-left: var(--tainacan-one-column);
margin-right: var(--tainacan-one-column); margin-right: var(--tainacan-one-column);
@ -2022,14 +2037,14 @@ export default {
justify-content: space-between; justify-content: space-between;
.column { .column {
padding: 1em 12px 0 12px; padding: 0.75em 12px 0 12px;
} }
} }
.metadata-section-metadata-list { .metadata-section-metadata-list {
.field { .field {
padding: 12px 0px 12px 42px; padding: 12px 0px 12px 42px;
margin-left: 8px; margin-left: 12px;
} }
} }
.item-edition-tab-content .tab-item>.field:last-child { .item-edition-tab-content .tab-item>.field:last-child {
@ -2039,6 +2054,15 @@ export default {
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
padding-right: var(--tainacan-one-column); padding-right: var(--tainacan-one-column);
max-width: 100%; max-width: 100%;
.metadata-section-metadata-list {
.field {
margin-left: 0px;
}
}
#tainacanTabsSwiper.tabs a {
padding: 0.75em 1.45em;
}
} }
} }
@ -2067,37 +2091,24 @@ export default {
.sub-header { .sub-header {
padding-right: 0.5em; padding-right: 0.5em;
} }
.field { .field {
padding: 1em 0.75em; padding: 1em 0.75em;
}
/deep/ .collapse-handle { .field.has-collapses-hidden {
font-size: 1em; padding: 1em 0.75em !important;
margin-left: 0; }
margin-right: 22px; }
width: 100%; .metadata-section-header {
display: flex; padding-left: 0.75em;
position: relative; padding-right: 0.75em;
justify-content: space-between;
align-items: center;
.label { .collapse-handle>.icon {
margin-left: 2px; float: right;
margin-right: 0.5em;
}
.icon {
margin-left: auto;
order: 3;
width: 2em;
justify-content: flex-end;
}
}
} }
} }
.item-edition-tab-content { .item-edition-tab-content {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.item-edition-tab-content .tab-item>.field:last-child { .item-edition-tab-content .tab-item>.field:last-child {
margin-bottom: 24px; margin-bottom: 24px;
@ -2105,9 +2116,6 @@ export default {
&>.columns { &>.columns {
display: flex; display: flex;
} }
.section-label {
padding: 0.5em 1em 0.5em 0em;
}
} }
&>.column:not(.main-column) { &>.column:not(.main-column) {
max-width: 100%; max-width: 100%;
@ -2125,6 +2133,7 @@ export default {
.section-label { .section-label {
position: relative; position: relative;
padding: 0.5em 0.75em 0.5em 0em;
label { label {
font-size: 1em !important; font-size: 1em !important;
font-weight: 500 !important; font-weight: 500 !important;
@ -2142,7 +2151,6 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: var(--tainacan-background-color); background-color: var(--tainacan-background-color);
margin-top: 8px;
.field { .field {
padding: 2px 0px 2px 18px !important; padding: 2px 0px 2px 18px !important;
@ -2161,7 +2169,7 @@ export default {
background-color: var(--tainacan-gray1); background-color: var(--tainacan-gray1);
.metadata-name-search { .metadata-name-search {
top: 0.25em; top: 0.5em;
max-width: 220px; max-width: 220px;
} }
@ -2200,7 +2208,6 @@ export default {
.metadata-name-search { .metadata-name-search {
position: absolute; position: absolute;
right: 0.5em; right: 0.5em;
top: 1.125em;
z-index: 9999; z-index: 9999;
padding-left: 0 !important; padding-left: 0 !important;
} }
@ -2237,8 +2244,6 @@ export default {
font-size: 0.875em; font-size: 0.875em;
.field { .field {
padding: 10px 0 0px 0px !important;
.b-radio { .b-radio {
width: auto; width: auto;
margin-right: 24px; margin-right: 24px;
@ -2333,7 +2338,7 @@ export default {
} }
.metadata-section-metadata-list .metadatum-description-help-info { .metadata-section-metadata-list .metadatum-description-help-info {
padding: 0.125rem 1rem 0.5rem 0.125rem; padding: 0rem 1rem 0.5rem 0.125rem;
} }
.related-items-list-heading { .related-items-list-heading {

33
src/views/admin/components/lists/attachments-list.vue
View File

@ -192,22 +192,12 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (max-width: 769px) {
.table-container {
padding-left: 1em;
padding-right: 1em;
}
.pagination-area {
margin-left: 0;
margin-right: 0;
justify-content: center;
}
}
.table-container { .table-container {
width: 100%; width: 100%;
} }
.uploaded-files { .uploaded-files {
display: block; display: flex;
flex-wrap: wrap;
.file-item-container { .file-item-container {
display: inline-block; display: inline-block;
@ -239,4 +229,23 @@
} }
} }
} }
@media screen and (max-width: 769px) {
.table-container {
padding-left: 1em;
padding-right: 1em;
}
.pagination-area {
margin-left: 0;
margin-right: 0;
justify-content: center;
}
.uploaded-files {
justify-content: center;
.file-item-container {
margin: 5px 7px;
}
}
}
</style> </style>

37
src/views/admin/components/metadata-types/tainacan-form-item.vue
View File

@ -374,13 +374,14 @@
border-bottom: none; border-bottom: none;
padding: 10px !important; padding: 10px !important;
.collapse-handle {
margin-left: -15px;
}
.child-metadata-inputs { .child-metadata-inputs {
margin-left: 0.25em; margin-left: 0.25em;
} }
@media screen and (min-width: 770px) {
.collapse-handle {
margin-left: -15px;
}
}
} }
.label { .label {
@ -406,6 +407,10 @@
cursor: pointer; cursor: pointer;
margin-left: -42px; margin-left: -42px;
line-height: 1.5em; line-height: 1.5em;
.tainacan-help-tooltip-trigger {
margin-right: auto;
}
} }
.collapse-handle+div { .collapse-handle+div {
margin-top: 0.5em; margin-top: 0.5em;
@ -413,5 +418,29 @@
.add-link { .add-link {
font-size: 0.75em; font-size: 0.75em;
} }
@media screen and (max-width: 769px) {
.collapse-handle {
font-size: 1em;
margin-left: 0;
margin-right: 22px;
width: 100%;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
.label {
margin-left: 2px;
margin-right: 0.5em;
}
.icon {
margin-left: auto;
order: 3;
width: 2em;
justify-content: flex-end;
}
}
}
} }
</style> </style>

4
src/views/admin/js/admin-utilities.js
View File

@ -531,6 +531,8 @@ AdminOptionsHelperPlugin.install = function (Vue, options = {}) {
hideItemEditionPageTitle: true, hideItemEditionPageTitle: true,
hideBulkEditionPageTitle: true, hideBulkEditionPageTitle: true,
hideItemSingleCollectionName: true, hideItemSingleCollectionName: true,
hideItemEditionCollapses: true,
hideItemEditionMetadataTypes: true,
itemEditionDocumentInsideTabs: true, itemEditionDocumentInsideTabs: true,
itemEditionAttachmentsInsideTabs: true, itemEditionAttachmentsInsideTabs: true,
} }
@ -624,6 +626,8 @@ AdminOptionsHelperPlugin.install = function (Vue, options = {}) {
* hideItemEditionDocumentUrlInput * hideItemEditionDocumentUrlInput
* hideItemEditionThumbnail * hideItemEditionThumbnail
* hideItemEditionAttachments * hideItemEditionAttachments
* hideItemEditionCollapses
* hideItemEditionMetadataTypes
* allowItemEditionModalInsideModal // Not recommended! * allowItemEditionModalInsideModal // Not recommended!
* itemEditionDocumentInsideTabs * itemEditionDocumentInsideTabs
* itemEditionAttachmentInsideTabs * itemEditionAttachmentInsideTabs