Several improvements to checkbox and modal inputs on mobile. #646.
This commit is contained in:
mateuswetah
parent
00be61f425
commit
1dad492810
|
|
@ -193,6 +193,7 @@
|
|||
:item-metadatum="itemMetadatum"
|
||||
:metadata-name-filter-string="metadataNameFilterString"
|
||||
:is-collapsed="metadataCollapses[index]"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
:is-last-metadatum="index > 2 && (index == metadatumList.length - 1)"
|
||||
@changeCollapse="onChangeCollapse($event, index)"/>
|
||||
|
||||
|
|
@ -230,6 +231,7 @@
|
|||
</div>
|
||||
|
||||
<related-items-list
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
:item-id="itemId"
|
||||
:collection-id="collectionId"
|
||||
:related-items="item.related_items"
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
:close-button-aria-label="$i18n.get('close')">
|
||||
<iframe
|
||||
width="100%"
|
||||
style="height: 85vh"
|
||||
:style="{ height: (isMobileScreen ? '100vh' : '85vh') }"
|
||||
:src="adminFullURL + $routerHelper.getItemEditPath(collectionId, editItemId) + '?iframemode=true&editingmetadata=' + editMetadataId + (isMobileMode ? '&mobilemode=true' : '')" />
|
||||
</b-modal>
|
||||
</div>
|
||||
|
|
@ -153,7 +153,8 @@
|
|||
isLoading: Boolean,
|
||||
isEditable: Boolean,
|
||||
itemId: String,
|
||||
collectionId: String
|
||||
collectionId: String,
|
||||
isMobileScreen: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
:item-metadatum="childItemMetadatum"
|
||||
:hide-collapses="hideCollapses"
|
||||
:is-collapsed="childItemMetadatum.collapse"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
@changeCollapse="onChangeCollapse($event, groupIndex, childIndex)"
|
||||
:class="{ 'is-last-input': childIndex == childItemMetadata.length - 1}"
|
||||
/>
|
||||
|
|
@ -109,7 +110,8 @@
|
|||
value: [String, Number, Array],
|
||||
disabled: false,
|
||||
hideCollapses: false,
|
||||
metadataNameFilterString: ''
|
||||
metadataNameFilterString: '',
|
||||
isMobileScreen: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
<iframe
|
||||
:id="relationshipInputId + '_item-edition-modal'"
|
||||
width="100%"
|
||||
style="height: 85vh"
|
||||
:style="{ height: (isMobileScreen ? '100vh' : '85vh') }"
|
||||
:src="itemModalSrc" />
|
||||
</b-modal>
|
||||
</div>
|
||||
|
|
@ -144,7 +144,8 @@
|
|||
maxtags: undefined,
|
||||
disabled: false,
|
||||
allowNew: true,
|
||||
isLastMetadatum: false
|
||||
isLastMetadatum: false,
|
||||
isMobileScreen: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@
|
|||
@input="changeValue"
|
||||
@blur="performValueChange"
|
||||
:metadata-name-filter-string="metadataNameFilterString"
|
||||
:hide-collapses="hideCollapses" />
|
||||
:hide-collapses="hideCollapses"
|
||||
:is-mobile-screen="isMobileScreen" />
|
||||
<template v-if="isMultiple && values.length > 1">
|
||||
<transition-group
|
||||
name="filter-item"
|
||||
|
|
@ -68,7 +69,8 @@
|
|||
@input="changeValue"
|
||||
@blur="performValueChange"
|
||||
:metadata-name-filter-string="metadataNameFilterString"
|
||||
:hide-collapses="hideCollapses" />
|
||||
:hide-collapses="hideCollapses"
|
||||
:is-mobile-screen="isMobileScreen" />
|
||||
<a
|
||||
v-if="index > 0"
|
||||
@click="removeValue(index)"
|
||||
|
|
@ -112,6 +114,7 @@
|
|||
@blur="performValueChange"
|
||||
:is-last-metadatum="isLastMetadatum"
|
||||
:hide-collapses="hideCollapses"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
:metadata-name-filter-string="metadataNameFilterString" />
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -128,7 +131,8 @@
|
|||
isCollapsed: true,
|
||||
hideCollapses: false,
|
||||
isLastMetadatum: false,
|
||||
metadataNameFilterString: ''
|
||||
metadataNameFilterString: '',
|
||||
isMobileScreen: false
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
<!-- Term creation modal, used on admin for a complete term creation -->
|
||||
<b-modal
|
||||
v-model="isTermCreationModalOpen"
|
||||
:width="768"
|
||||
trap-focus
|
||||
aria-role="dialog"
|
||||
aria-modal
|
||||
|
|
|
|||
|
|
@ -522,6 +522,11 @@ export default {
|
|||
font-size: 1em;
|
||||
transition: border 0.3s ease;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--tainacan-heading-color);
|
||||
font-size: 1em !important;
|
||||
|
|
|
|||
|
|
@ -1222,6 +1222,22 @@
|
|||
column-count: auto !important;
|
||||
}
|
||||
|
||||
.tainacan-modal-checkbox-search-results-body,
|
||||
.tainacan-finder-columns-container {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
|
||||
.tainacan-finder-columns-container {
|
||||
max-height: 48vh;
|
||||
.tainacan-finder-column,
|
||||
.tainacan-finder-column ul {
|
||||
max-height: 100%;
|
||||
}
|
||||
.tainacan-finder-column .column-label+ul {
|
||||
max-height: calc(100% - 0.75em - 0.45em - 0.45em);
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-li-checkbox-list {
|
||||
max-width: calc(100% - (2 * var(--tainacan-one-column))) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1175,7 +1175,20 @@
|
|||
-webkit-column-count: auto;
|
||||
column-count: auto;
|
||||
}
|
||||
|
||||
.tainacan-modal-checkbox-search-results-body,
|
||||
.tainacan-finder-columns-container {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
.tainacan-finder-columns-container {
|
||||
max-height: calc(100vh - 140px - 56px);
|
||||
.tainacan-finder-column,
|
||||
.tainacan-finder-column ul {
|
||||
max-height: 100%;
|
||||
}
|
||||
.tainacan-finder-column .column-label+ul {
|
||||
max-height: calc(100% - 0.75em - 0.45em - 0.45em);
|
||||
}
|
||||
}
|
||||
.tainacan-li-checkbox-list {
|
||||
max-width: calc(100% - 20px) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@
|
|||
&.is-mobile-modal {
|
||||
@media screen and (max-width: 768px) {
|
||||
.dropdown-content {
|
||||
font-size: 1.125em;
|
||||
max-height: 100vh;
|
||||
}
|
||||
.dropdown-menu {
|
||||
|
|
|
|||
|
|
@ -12,12 +12,19 @@
|
|||
max-height: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
@media only screen and (max-width: 498px) {
|
||||
max-height: 100%;
|
||||
max-height: 100vh;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-modal .modal-close {
|
||||
z-index: 99999;
|
||||
background-color: var(--tainacan-background-color, #ffffff);
|
||||
@media only screen and (max-width: 768px) {
|
||||
&:before, &:after { background-color: var(--tainacan-white, white); }
|
||||
&:before, &:after { background-color: var(--tainacan-secondary, #298596); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,13 +70,9 @@
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
padding: 40px calc(2 * var(--tainacan-one-column));
|
||||
padding: 40px 8.333333vw;
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
background-color: var(--tainacan-background-color);
|
||||
padding: 22px 20px 12px 20px;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -88,11 +91,20 @@
|
|||
.form-submit {
|
||||
padding: 40px 0em 0em 0em !important;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
padding: 40px calc(2 * var(--tainacan-one-column));
|
||||
padding: 40px 8.333333vw;
|
||||
}
|
||||
@media only screen and (max-width: 498px) {
|
||||
padding: 20px;
|
||||
max-height: 100%;
|
||||
max-height: 100vh;
|
||||
display: block;
|
||||
|
||||
.modal-card-body {
|
||||
padding: 18px 16px 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -235,6 +247,16 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.media-frame-title {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 498px) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.media-modal .tainacan-item-attachments-modal button.check {
|
||||
|
|
|
|||
Loading…
Reference in New Issue