Alt text for thumbnail input from modal. Several css updates to item edition form.
This commit is contained in:
mateuswetah
parent
864258d94c
commit
c468bc345d
|
|
@ -492,38 +492,40 @@
|
|||
<i class="tainacan-icon tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
|
||||
id="button-alt-text-thumbnail"
|
||||
class="button is-rounded is-secondary"
|
||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||
@click="isThumbnailAltTextModalActive = true">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_thumbnail_alt'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-text"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
|
||||
id="button-delete-thumbnail"
|
||||
class="button is-rounded is-secondary"
|
||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||
@click="deleteThumbnail()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-delete"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="form.thumbnail_id"
|
||||
class="thumbnail-alt-input">
|
||||
<label class="label">{{ $i18n.get('label_thumbnail_alt') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.get('label_thumbnail_alt')"
|
||||
:message="$i18n.get('info_thumbnail_alt')"/>
|
||||
<b-input
|
||||
type="textarea"
|
||||
lazy
|
||||
:placeholder="$i18n.get('instruction_thumbnail_alt')"
|
||||
:value="form.thumbnail_alt ? form.thumbnail_alt : ''"
|
||||
@input="onUpdateThumbnailAlt" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hook for extra Form options -->
|
||||
|
|
@ -539,6 +541,44 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail Alternative Text Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isThumbnailAltTextModalActive"
|
||||
:width="640"
|
||||
scroll="keep"
|
||||
trap-focus
|
||||
aria-modal
|
||||
aria-role="dialog"
|
||||
custom-class="tainacan-modal">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('label_thumbnail_alt') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input
|
||||
type="textarea"
|
||||
lazy
|
||||
:placeholder="$i18n.get('instruction_thumbnail_alt')"
|
||||
:value="form.thumbnail_alt ? form.thumbnail_alt : ''"
|
||||
@input="onUpdateThumbnailAlt" />
|
||||
<p>{{ $i18n.get('info_thumbnail_alt') }}</p>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div
|
||||
style="margin-left: auto;"
|
||||
class="control">
|
||||
<button
|
||||
id="button-submit-text-content-writing"
|
||||
type="submit"
|
||||
@click.prevent="isThumbnailAltTextModalActive = false"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('finish') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- Text Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
|
|
@ -921,6 +961,7 @@ export default {
|
|||
activeTab: 0,
|
||||
isLoadingAttachments: false,
|
||||
metadataNameFilterString: '',
|
||||
isThumbnailAltTextModalActive: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -1732,56 +1773,94 @@ export default {
|
|||
background-color: var(--tainacan-secondary);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-form > .columns {
|
||||
margin-left: var(--tainacan-one-column);
|
||||
margin-right: var(--tainacan-one-column);
|
||||
}
|
||||
|
||||
.column.is-5 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: var(--tainacan-one-column);
|
||||
.column.is-5 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: var(--tainacan-one-column);
|
||||
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: -25px;
|
||||
margin: 3px 0;
|
||||
max-height: calc(100vh - 202px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: -25px;
|
||||
margin: 3px 0;
|
||||
max-height: calc(100vh - 202px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
.column.is-7 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: 0;
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.column.is-7 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: 0;
|
||||
.columns {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.columns {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.column {
|
||||
padding: 1em 12px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
padding: 1em 12px 0 12px;
|
||||
.field {
|
||||
padding: 12px 0px 12px 60px;
|
||||
}
|
||||
.tab-item>.field:last-child {
|
||||
margin-bottom: 187px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding-right: var(--tainacan-one-column);
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
padding: 12px 0px 12px 60px;
|
||||
}
|
||||
.tab-item>.field:last-child {
|
||||
margin-bottom: 187px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding-right: var(--tainacan-one-column);
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&>.column.is-7 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
max-width: 100%;
|
||||
widows: 100%;
|
||||
|
||||
.field {
|
||||
padding-left: 16px;
|
||||
|
||||
/deep/ .label {
|
||||
margin-left: 0;
|
||||
}
|
||||
/deep/ .collapse-handle {
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
.tab-item>.field:last-child {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
&>.columns {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&>.column.is-5 {
|
||||
max-width: 100%;
|
||||
widows: 100%;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-tabs {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
|
@ -1815,10 +1894,9 @@ export default {
|
|||
}
|
||||
|
||||
.section-box {
|
||||
background-color: var(--tainacan-background-color);
|
||||
padding: 0 var(--tainacan-one-column) 0 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
|
@ -1877,8 +1955,8 @@ export default {
|
|||
#button-edit-thumbnail,
|
||||
#button-edit-document,
|
||||
#button-delete-thumbnail,
|
||||
#button-alt-text-thumbnail,
|
||||
#button-delete-document {
|
||||
|
||||
border-radius: 100px !important;
|
||||
max-height: 2.125em !important;
|
||||
max-width: 2.125em !important;
|
||||
|
|
@ -1886,7 +1964,7 @@ export default {
|
|||
min-width: 2.125em !important;
|
||||
padding: 0 !important;
|
||||
z-index: 99;
|
||||
margin-left: 12px !important;
|
||||
margin-left: 6px !important;
|
||||
|
||||
.icon {
|
||||
display: inherit;
|
||||
|
|
@ -1922,7 +2000,7 @@ export default {
|
|||
|
||||
.thumbnail-buttons-row {
|
||||
position: relative;
|
||||
left: 61px;
|
||||
left: 33px;
|
||||
bottom: 1.25em;
|
||||
}
|
||||
|
||||
|
|
@ -2029,6 +2107,27 @@ export default {
|
|||
color: var(--tainacan-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding: 16px 0.5em;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
|
||||
.update-info-section {
|
||||
margin-left: auto;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.form-submission-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.button {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,34 +68,6 @@
|
|||
@focus="clearErrors('description')"/>
|
||||
</b-field>
|
||||
|
||||
<!-- Display on listing -->
|
||||
<b-field
|
||||
v-if="editForm.parent == 0"
|
||||
:type="formErrors['display'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['display'] != undefined ? formErrors['display'] : ''"
|
||||
:addons="false">
|
||||
<label class="label is-inline-block">
|
||||
{{ $i18n.get('label_display') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('metadata', 'display')"
|
||||
:message="$i18n.getHelperMessage('metadata', 'display')"/>
|
||||
</label>
|
||||
<b-select
|
||||
expanded
|
||||
v-model="editForm.display"
|
||||
@input="clearErrors('display')">
|
||||
<option value="yes">
|
||||
{{ $i18n.get('label_display_default') }}
|
||||
</option>
|
||||
<option value="no">
|
||||
{{ $i18n.get('label_not_display') }}
|
||||
</option>
|
||||
<option value="never">
|
||||
{{ $i18n.get('label_display_never') }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
v-if="editForm.parent == 0"
|
||||
:addons="false"
|
||||
|
|
@ -133,6 +105,34 @@
|
|||
</div>
|
||||
</b-field>
|
||||
|
||||
<!-- Display on listing -->
|
||||
<b-field
|
||||
v-if="editForm.parent == 0"
|
||||
:type="formErrors['display'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['display'] != undefined ? formErrors['display'] : ''"
|
||||
:addons="false">
|
||||
<label class="label is-inline-block">
|
||||
{{ $i18n.get('label_display') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('metadata', 'display')"
|
||||
:message="$i18n.getHelperMessage('metadata', 'display')"/>
|
||||
</label>
|
||||
<b-select
|
||||
expanded
|
||||
v-model="editForm.display"
|
||||
@input="clearErrors('display')">
|
||||
<option value="yes">
|
||||
{{ $i18n.get('label_display_default') }}
|
||||
</option>
|
||||
<option value="no">
|
||||
{{ $i18n.get('label_not_display') }}
|
||||
</option>
|
||||
<option value="never">
|
||||
{{ $i18n.get('label_display_never') }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
:addons="false">
|
||||
<label class="label is-inline-block">{{ $i18n.get('label_insert_options') }}</label>
|
||||
|
|
@ -512,7 +512,7 @@
|
|||
white-space: normal;
|
||||
}
|
||||
.metadata-form-section {
|
||||
margin: 0.5em 0;
|
||||
margin: 0.75em 0 0.5em 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -541,6 +541,14 @@
|
|||
.metadata-form-section+.options-columns {
|
||||
padding-left: 1.75em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.options-columns {
|
||||
-moz-column-count: 1;
|
||||
-webkit-column-count: 1;
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-submit {
|
||||
background-color: var(--tainacan-gray1);
|
||||
|
|
|
|||
|
|
@ -359,5 +359,21 @@
|
|||
font-size: 0.875em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
margin-left: 0px;
|
||||
padding-left: 22px;
|
||||
|
||||
.field {
|
||||
padding-left: 12px;
|
||||
|
||||
/deep/ .label {
|
||||
margin-left: 0;
|
||||
}
|
||||
/deep/ .collapse-handle {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -599,46 +599,56 @@
|
|||
margin-bottom: 70px;
|
||||
margin-left: var(--tainacan-one-column);
|
||||
margin-right: var(--tainacan-one-column);
|
||||
}
|
||||
|
||||
.column.is-5 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: var(--tainacan-one-column);
|
||||
.column.is-5 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: var(--tainacan-one-column);
|
||||
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: -25px;
|
||||
margin: 3px 0;
|
||||
max-height: calc(100vh - 202px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: -25px;
|
||||
margin: 3px 0;
|
||||
max-height: calc(100vh - 202px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.column.is-7 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: 0;
|
||||
|
||||
.columns {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
padding: 1em 12px 0 12px;
|
||||
@media screen and (max-width: 769px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
padding: 10px 0 14px 0px;
|
||||
margin-left: -3px;
|
||||
.column.is-7 {
|
||||
padding-left: var(--tainacan-one-column);
|
||||
padding-right: 0;
|
||||
|
||||
.columns {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
padding: 1em 12px 0 12px;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
padding: 10px 0 14px 0px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding-right: var(--tainacan-one-column);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding-right: var(--tainacan-one-column);
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&>.column {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
.tainacan-modal .modal-close {
|
||||
z-index: 99999;
|
||||
@media only screen and (max-width: 768px) {
|
||||
&:before, &:after { background-color: #298596; }
|
||||
&:before, &:after { background-color: var(--tainacan-white, white); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
|
||||
.form-submit {
|
||||
padding: 40px 0em 0.4em 0em !important;
|
||||
padding: 40px 0em 0em 0em !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
|
@ -223,6 +223,19 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
left: 1.5em;
|
||||
right: 1.5em;
|
||||
top: 1.5em;
|
||||
bottom: 1.5em;
|
||||
|
||||
.media-frame-title h1 {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-modal .tainacan-item-attachments-modal button.check {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -43,4 +43,10 @@
|
|||
.tabs a:hover:not([href]) {
|
||||
text-decoration: none;
|
||||
}
|
||||
@media screen and (max-width: 769px) {
|
||||
.tab-content {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 00.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue