Bettter spacing for filter and metadata edition forms.

This commit is contained in:
Mateus Machado Luna 2018-07-31 09:12:32 -03:00
parent 7fd2138485
commit 0b3ca743fc
6 changed files with 56 additions and 16 deletions

View File

@ -7,7 +7,7 @@
:addons="false" :addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''" :type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''"> :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_name') }} {{ $i18n.get('label_name') }}
<span <span
class="required-metadatum-asterisk" class="required-metadatum-asterisk"
@ -26,7 +26,7 @@
:addons="false" :addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''" :type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''"> :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_description') }} {{ $i18n.get('label_description') }}
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'description')" :title="$i18n.getHelperTitle('filters', 'description')"
@ -43,7 +43,7 @@
:addons="false" :addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''" :type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''"> :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_status') }} {{ $i18n.get('label_status') }}
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'status')" :title="$i18n.getHelperTitle('filters', 'status')"
@ -75,7 +75,7 @@
<b-field <b-field
:addons="false" :addons="false"
v-if="editForm.filter_type_object && editForm.filter_type_object.component.includes('checkbox')"> v-if="editForm.filter_type_object && editForm.filter_type_object.component.includes('checkbox')">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_max_options_to_show') }} {{ $i18n.get('label_max_options_to_show') }}
<help-button <help-button
:title="$i18n.getHelperTitle('filters', 'max_options')" :title="$i18n.getHelperTitle('filters', 'max_options')"

View File

@ -9,7 +9,7 @@
:addons="false" :addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''" :type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''"> :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_name') }} {{ $i18n.get('label_name') }}
<span <span
class="required-metadatum-asterisk" class="required-metadatum-asterisk"
@ -28,7 +28,7 @@
:addons="false" :addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''" :type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''"> :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_description') }} {{ $i18n.get('label_description') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'description')" :title="$i18n.getHelperTitle('metadata', 'description')"
@ -43,7 +43,7 @@
<b-field <b-field
:addons="false"> :addons="false">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_semantic_uri') }} {{ $i18n.get('label_semantic_uri') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'semantic_uri')" :title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
@ -60,7 +60,7 @@
:addons="false" :addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''" :type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''"> :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_status') }} {{ $i18n.get('label_status') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'status')" :title="$i18n.getHelperTitle('metadata', 'status')"
@ -95,7 +95,7 @@
:type="formErrors['display'] != undefined ? 'is-danger' : ''" :type="formErrors['display'] != undefined ? 'is-danger' : ''"
:message="formErrors['display'] != undefined ? formErrors['display'] : ''" :message="formErrors['display'] != undefined ? formErrors['display'] : ''"
:addons="false"> :addons="false">
<label class="label is-inline"> <label class="label is-inline-block">
{{ $i18n.get('label_display') }} {{ $i18n.get('label_display') }}
<help-button <help-button
:title="$i18n.getHelperTitle('metadata', 'display')" :title="$i18n.getHelperTitle('metadata', 'display')"
@ -139,7 +139,7 @@
</b-field> </b-field>
<b-field :addons="false"> <b-field :addons="false">
<label class="label is-inline">{{ $i18n.get('label_options') }}</label> <label class="label is-inline-block">{{ $i18n.get('label_options') }}</label>
<b-field <b-field
:type="formErrors['required'] != undefined ? 'is-danger' : ''" :type="formErrors['required'] != undefined ? 'is-danger' : ''"
:message="formErrors['required'] != undefined ? formErrors['required'] : ''"> :message="formErrors['required'] != undefined ? formErrors['required'] : ''">
@ -149,7 +149,7 @@
v-model="editForm.required" v-model="editForm.required"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline" class="is-inline-block"
name="required"> name="required">
{{ $i18n.get('label_required') }} {{ $i18n.get('label_required') }}
<help-button <help-button
@ -168,7 +168,7 @@
v-model="editForm.multiple" v-model="editForm.multiple"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline" class="is-inline-block"
name="multiple"> name="multiple">
{{ $i18n.get('label_allow_multiple') }} {{ $i18n.get('label_allow_multiple') }}
<help-button <help-button
@ -186,7 +186,7 @@
v-model="editForm.unique" v-model="editForm.unique"
true-value="yes" true-value="yes"
false-value="no" false-value="no"
class="is-inline" class="is-inline-block"
name="collecion_key"> name="collecion_key">
{{ $i18n.get('label_unique_value') }} {{ $i18n.get('label_unique_value') }}
<help-button <help-button

View File

@ -16,6 +16,12 @@
justify-content: end !important; justify-content: end !important;
} }
} }
.field:not(:last-child) {
margin-bottom: 1.125rem;
}
.field>.field:not(:last-child) {
margin-bottom: 0.5rem;
}
.label { .label {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;

View File

@ -303,6 +303,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'instruction_configure_new_metadatum' => __( 'Configure new metadatum.', 'tainacan' ), 'instruction_configure_new_metadatum' => __( 'Configure new metadatum.', 'tainacan' ),
'instruction_insert_mapper_metadatum_info' => __( 'Insert the new mapper\'s metadatum info', 'tainacan' ), 'instruction_insert_mapper_metadatum_info' => __( 'Insert the new mapper\'s metadatum info', 'tainacan' ),
'instruction_select_max_options_to_show' => __( 'Select max options to show', 'tainacan' ), 'instruction_select_max_options_to_show' => __( 'Select max options to show', 'tainacan' ),
'instruction_select_collection_fetch_items' => __( 'Select a collection to fecth items', 'tainacan' ),
// Info. Other feedback to user. // Info. Other feedback to user.
'info_search_results' => __( 'Search Results', 'tainacan' ), 'info_search_results' => __( 'Search Results', 'tainacan' ),

View File

@ -42,6 +42,7 @@ export default {
@import "../admin/scss/_tooltips.scss"; @import "../admin/scss/_tooltips.scss";
@import "../admin/scss/_tainacan-form.scss"; @import "../admin/scss/_tainacan-form.scss";
.theme-items-list { .theme-items-list {
position: relative; position: relative;
display: flex; display: flex;
@ -272,6 +273,39 @@ export default {
.filters-mobile-modal { .filters-mobile-modal {
// top: 95px; // top: 95px;
@keyframes slide-menu {
from {
-ms-transform: translate(-100%, 0); /* IE 9 */
-webkit-transform: translate(-100%, 0); /* Safari */
transform: translate(-100%, 0);
}
to {
-ms-transform: translate(0, 0); /* IE 9 */
-webkit-transform: translate(0, 0); /* Safari */
transform: translate(0, 0);
}
}
animation-name: slide-menu;
animation-duration: 0.3s;
animation-timing-function: ease-out;
@keyframes appear {
from {
opacity: 0.0;
visibility: hidden;
}
to {
opacity: 1.0;
visibility: visible;
}
}
.modal-background {
animation-name: appear;
animation-duration: 0.6s;
animation-timing-function: ease-in;
}
.modal-close { .modal-close {
right: calc(8.3333333% + 20px); right: calc(8.3333333% + 20px);

View File

@ -6,19 +6,18 @@
:type="collectionType" :type="collectionType"
:message="collectionMessage"> :message="collectionMessage">
<label class="label is-inline"> <label class="label is-inline">
{{ $i18n.get('label_related_collection') }}<span :class="collectionType" >&nbsp;*&nbsp;</span> {{ $i18n.get('label_collection_related') }}<span :class="collectionType" >&nbsp;*&nbsp;</span>
<help-button <help-button
:title="$i18n.getHelperTitle('tainacan-relationship', 'collection_id')" :title="$i18n.getHelperTitle('tainacan-relationship', 'collection_id')"
:message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')"/> :message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')"/>
</label> </label>
<b-select <b-select
name="metadata_type_relationship[collection_id]" name="metadata_type_relationship[collection_id]"
placeholder="Select the collection to fetch items" :placeholder="$i18n.get('instruction_select_collection_fetch_items' )"
v-model="collection" v-model="collection"
@change.native="emitValues()" @change.native="emitValues()"
@focus="clear()" @focus="clear()"
:loading="loading"> :loading="loading">
<option value="">Select...</option>
<option <option
v-for="option in collections" v-for="option in collections"
:value="option.id" :value="option.id"