From 0b3ca743fcd7bfad7091f6d4331a62fdda3fa77e Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 31 Jul 2018 09:12:32 -0300
Subject: [PATCH] Bettter spacing for filter and metadata edition forms.

---
 .../edition/filter-edition-form.vue           |  8 ++---
 .../edition/metadatum-edition-form.vue        | 18 +++++-----
 src/admin/scss/_tainacan-form.scss            |  6 ++++
 src/admin/tainacan-admin-i18n.php             |  1 +
 src/admin/theme-items-list.vue                | 34 +++++++++++++++++++
 .../relationship/FormRelationship.vue         |  5 ++-
 6 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/admin/components/edition/filter-edition-form.vue b/src/admin/components/edition/filter-edition-form.vue
index 8b7da97db..6bde1a048 100644
--- a/src/admin/components/edition/filter-edition-form.vue
+++ b/src/admin/components/edition/filter-edition-form.vue
@@ -7,7 +7,7 @@
                 :addons="false"
                 :type="formErrors['name'] != undefined ? 'is-danger' : ''" 
                 :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_name') }} 
                 <span 
                         class="required-metadatum-asterisk"
@@ -26,7 +26,7 @@
                 :addons="false" 
                 :type="formErrors['description'] != undefined ? 'is-danger' : ''" 
                 :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_description') }} 
                 <help-button 
                         :title="$i18n.getHelperTitle('filters', 'description')" 
@@ -43,7 +43,7 @@
                 :addons="false"
                 :type="formErrors['status'] != undefined ? 'is-danger' : ''" 
                 :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_status') }} 
                 <help-button 
                         :title="$i18n.getHelperTitle('filters', 'status')" 
@@ -75,7 +75,7 @@
         <b-field
                 :addons="false"
                 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') }}
                 <help-button
                         :title="$i18n.getHelperTitle('filters', 'max_options')"
diff --git a/src/admin/components/edition/metadatum-edition-form.vue b/src/admin/components/edition/metadatum-edition-form.vue
index 13af50a97..4c988066a 100644
--- a/src/admin/components/edition/metadatum-edition-form.vue
+++ b/src/admin/components/edition/metadatum-edition-form.vue
@@ -9,7 +9,7 @@
                 :addons="false"
                 :type="formErrors['name'] != undefined ? 'is-danger' : ''"
                 :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_name') }}
                 <span
                         class="required-metadatum-asterisk"
@@ -28,7 +28,7 @@
                 :addons="false"
                 :type="formErrors['description'] != undefined ? 'is-danger' : ''"
                 :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_description') }}
                 <help-button
                         :title="$i18n.getHelperTitle('metadata', 'description')"
@@ -43,7 +43,7 @@
             
         <b-field
                 :addons="false">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_semantic_uri') }}
                 <help-button
                         :title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
@@ -60,7 +60,7 @@
                 :addons="false"
                 :type="formErrors['status'] != undefined ? 'is-danger' : ''"
                 :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_status') }}
                 <help-button
                         :title="$i18n.getHelperTitle('metadata', 'status')"
@@ -95,7 +95,7 @@
                 :type="formErrors['display'] != undefined ? 'is-danger' : ''"
                 :message="formErrors['display'] != undefined ? formErrors['display'] : ''" 
                 :addons="false">
-            <label class="label is-inline">
+            <label class="label is-inline-block">
                 {{ $i18n.get('label_display') }}
                 <help-button
                         :title="$i18n.getHelperTitle('metadata', 'display')"
@@ -139,7 +139,7 @@
         </b-field>
 
         <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
                     :type="formErrors['required'] != undefined ? 'is-danger' : ''"
                     :message="formErrors['required'] != undefined ? formErrors['required'] : ''">
@@ -149,7 +149,7 @@
                         v-model="editForm.required"
                         true-value="yes"
                         false-value="no"
-                        class="is-inline"
+                        class="is-inline-block"
                         name="required">
                     {{ $i18n.get('label_required') }}
                     <help-button
@@ -168,7 +168,7 @@
                         v-model="editForm.multiple"
                         true-value="yes"
                         false-value="no"
-                        class="is-inline"
+                        class="is-inline-block"
                         name="multiple">
                     {{ $i18n.get('label_allow_multiple') }}
                     <help-button
@@ -186,7 +186,7 @@
                         v-model="editForm.unique"
                         true-value="yes"
                         false-value="no"
-                        class="is-inline"
+                        class="is-inline-block"
                         name="collecion_key">
                     {{ $i18n.get('label_unique_value') }}
                     <help-button
diff --git a/src/admin/scss/_tainacan-form.scss b/src/admin/scss/_tainacan-form.scss
index 53bc5d4bb..5a3e21936 100644
--- a/src/admin/scss/_tainacan-form.scss
+++ b/src/admin/scss/_tainacan-form.scss
@@ -16,6 +16,12 @@
             justify-content: end !important;
         }
     }
+    .field:not(:last-child) {
+        margin-bottom: 1.125rem;
+    }
+    .field>.field:not(:last-child) {
+        margin-bottom: 0.5rem;
+    }
     .label { 
         font-weight: bold;
         font-size: 14px; 
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index 4dd246e2b..2fae20596 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -303,6 +303,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'instruction_configure_new_metadatum'            => __( 'Configure new metadatum.', '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_collection_fetch_items'      => __( 'Select a collection to fecth items', 'tainacan' ),
 
 	// Info. Other feedback to user.
 	'info_search_results'                            => __( 'Search Results', 'tainacan' ),
diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue
index ec967a562..8607277b9 100644
--- a/src/admin/theme-items-list.vue
+++ b/src/admin/theme-items-list.vue
@@ -42,6 +42,7 @@ export default {
     @import "../admin/scss/_tooltips.scss";
     @import "../admin/scss/_tainacan-form.scss";
     
+
     .theme-items-list {
         position: relative;
         display: flex;
@@ -272,6 +273,39 @@ export default {
 
         .filters-mobile-modal {
             // 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 {
                 right: calc(8.3333333% + 20px);
diff --git a/src/classes/metadata-types/relationship/FormRelationship.vue b/src/classes/metadata-types/relationship/FormRelationship.vue
index 33341eea2..9523685e8 100644
--- a/src/classes/metadata-types/relationship/FormRelationship.vue
+++ b/src/classes/metadata-types/relationship/FormRelationship.vue
@@ -6,19 +6,18 @@
                 :type="collectionType"
                 :message="collectionMessage">
             <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
                         :title="$i18n.getHelperTitle('tainacan-relationship', 'collection_id')"
                         :message="$i18n.getHelperMessage('tainacan-relationship', 'collection_id')"/>
             </label>
             <b-select
                     name="metadata_type_relationship[collection_id]"
-                    placeholder="Select the collection to fetch items"
+                    :placeholder="$i18n.get('instruction_select_collection_fetch_items' )"
                     v-model="collection"
                     @change.native="emitValues()"
                     @focus="clear()"
                     :loading="loading">
-                <option value="">Select...</option>
                 <option
                         v-for="option in collections"
                         :value="option.id"