From 4957003c4d202b35b5b6fe3d490bf6ea4fa9a41d Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 10 Mar 2023 15:32:56 -0300
Subject: [PATCH] Begins new Taxonomy form and Terms list layout on admin side.
 #775.

---
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 .../edition/taxonomy-edition-form.vue         | 504 ++++++++++--------
 .../components/edition/term-edition-form.vue  |   2 +-
 .../admin/components/lists/terms-list.vue     | 147 ++---
 src/views/tainacan-i18n.php                   |   1 +
 6 files changed, 361 insertions(+), 301 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 288a934be..a72cdf5ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2380,9 +2380,9 @@
       }
     },
     "buefy": {
-      "version": "0.9.22",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.22.tgz",
-      "integrity": "sha512-rA9Bf7+2lZupL1PlQU60o7cc0Og4MRz9it5LZlKOIwPENM1uEOjH48EFnNFniLyxIcz6vln0EicS96GsVCFx1Q==",
+      "version": "0.9.23",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.23.tgz",
+      "integrity": "sha512-zkmTOUDlh7xx0ID8cSw3Wtm97nkTGU992TcIBBTC41rjKHjJTyQn9fYr8oqvVaCTLNVJmdPnnjDCuYZtHoDEog==",
       "requires": {
         "bulma": "0.9.4"
       }
diff --git a/package.json b/package.json
index 1f446f74b..da418d77a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "apexcharts": "^3.37.1",
     "axios": "^1.1.3",
     "blurhash": "^2.0.5",
-    "buefy": "^0.9.22",
+    "buefy": "^0.9.23",
     "bulma": "^0.9.4",
     "conditioner-core": "^2.3.3",
     "countup.js": "^2.5.0",
diff --git a/src/views/admin/components/edition/taxonomy-edition-form.vue b/src/views/admin/components/edition/taxonomy-edition-form.vue
index 914e63d13..c2d466aa2 100644
--- a/src/views/admin/components/edition/taxonomy-edition-form.vue
+++ b/src/views/admin/components/edition/taxonomy-edition-form.vue
@@ -6,239 +6,242 @@
                         { path: $routerHelper.getTaxonomiesPath(), label: $i18n.get('taxonomies') },
                         { path: '', label: (taxonomy != null && taxonomy.name != undefined) ? taxonomy.name : $i18n.get('taxonomy') }
                     ]"/>
-            <b-tabs 
-                    @change="onChangeTab($event)"
-                    v-model="tabIndex">    
-                <b-tab-item :label="$i18n.get('taxonomy')">
-                    <form 
-                            v-if="taxonomy != null && taxonomy != undefined && (($route.name == 'TaxonomyCreationForm' && $userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy.current_user_can_edit))"
-                            class="tainacan-form" 
-                            label-width="120px">
-                        <div class="columns">
-                            <div class="column">
-                                <!-- Name -------------------------------- -->
-                                <b-field
-                                        :addons="false"
-                                        :label="$i18n.get('label_name')"
-                                        :type="editFormErrors['name'] != undefined ? 'is-danger' : ''"
-                                        :message="isUpdatingSlug ? $i18n.get('info_validating_slug') : (editFormErrors['name'] != undefined ? editFormErrors['name'] : '')">
-                                    <span class="required-metadatum-asterisk">*</span>
+
+            <form 
+                    v-if="taxonomy != null && taxonomy != undefined && (($route.name == 'TaxonomyCreationForm' && $userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy.current_user_can_edit))"
+                    class="tainacan-form" 
+                    label-width="120px">
+                <div class="columns">
+                    <div class="column">
+                        <!-- Name -------------------------------- -->
+                        <b-field
+                                :addons="false"
+                                :label="$i18n.get('label_name')"
+                                :type="editFormErrors['name'] != undefined ? 'is-danger' : ''"
+                                :message="isUpdatingSlug ? $i18n.get('info_validating_slug') : (editFormErrors['name'] != undefined ? editFormErrors['name'] : '')">
+                            <span class="required-metadatum-asterisk">*</span>
+                            <help-button 
+                                    :title="$i18n.getHelperTitle('taxonomies', 'name')" 
+                                    :message="$i18n.getHelperMessage('taxonomies', 'name')"
+                                    extra-classes="tainacan-repository-tooltip"/>
+                            <b-input
+                                    id="tainacan-text-name"
+                                    v-model="form.name"
+                                    @focus="clearErrors('name')"
+                                    @blur="updateSlug()"
+                                    :disabled="isUpdatingSlug"
+                                    :loading="isUpdatingSlug"/>
+                        </b-field>
+
+                        <!-- Hook for extra Form options -->
+                        <template v-if="hasBeginLeftForm">  
+                            <form 
+                                id="form-taxonomy-begin-left"
+                                class="form-hook-region"
+                                v-html="getBeginLeftForm"/>
+                        </template>
+
+                        <!-- Description -------------------------------- -->
+                        <b-field
+                                :addons="false"
+                                :label="$i18n.get('label_description')"
+                                :type="editFormErrors['description'] != undefined ? 'is-danger' : ''"
+                                :message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
+                            <help-button 
+                                    :title="$i18n.getHelperTitle('taxonomies', 'description')" 
+                                    :message="$i18n.getHelperMessage('taxonomies', 'description')"
+                                    extra-classes="tainacan-repository-tooltip"/>
+                            <b-input
+                                    id="tainacan-text-description"
+                                    type="textarea"
+                                    v-model="form.description"
+                                    @focus="clearErrors('description')"/>
+                        </b-field>
+
+                        <!-- Allow Insert -->
+                        <b-field :addons="false">
+                            <label class="label is-inline">
+                                    {{ $i18n.get('label_taxonomy_allow_new_terms') }}
+                                    <b-switch
+                                            id="tainacan-checkbox-allow-insert" 
+                                            size="is-small"
+                                            v-model="form.allowInsert"
+                                            true-value="yes"
+                                            false-value="no" />
                                     <help-button 
-                                            :title="$i18n.getHelperTitle('taxonomies', 'name')" 
-                                            :message="$i18n.getHelperMessage('taxonomies', 'name')"
-                                            extra-classes="tainacan-repository-tooltip"/>
-                                    <b-input
-                                            id="tainacan-text-name"
-                                            v-model="form.name"
-                                            @focus="clearErrors('name')"
-                                            @blur="updateSlug()"
-                                            :disabled="isUpdatingSlug"
-                                            :loading="isUpdatingSlug"/>
-                                </b-field>
-
-                                <!-- Hook for extra Form options -->
-                                <template v-if="hasBeginLeftForm">  
-                                    <form 
-                                        id="form-taxonomy-begin-left"
-                                        class="form-hook-region"
-                                        v-html="getBeginLeftForm"/>
-                                </template>
-
-                                <!-- Description -------------------------------- -->
-                                <b-field
-                                        :addons="false"
-                                        :label="$i18n.get('label_description')"
-                                        :type="editFormErrors['description'] != undefined ? 'is-danger' : ''"
-                                        :message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
-                                    <help-button 
-                                            :title="$i18n.getHelperTitle('taxonomies', 'description')" 
-                                            :message="$i18n.getHelperMessage('taxonomies', 'description')"
-                                            extra-classes="tainacan-repository-tooltip"/>
-                                    <b-input
-                                            id="tainacan-text-description"
-                                            type="textarea"
-                                            v-model="form.description"
-                                            @focus="clearErrors('description')"/>
-                                </b-field>
-
-                                <!-- Allow Insert -->
-                                <b-field :addons="false">
-                                    <label class="label is-inline">
-                                            {{ $i18n.get('label_taxonomy_allow_new_terms') }}
-                                            <b-switch
-                                                    id="tainacan-checkbox-allow-insert" 
-                                                    size="is-small"
-                                                    v-model="form.allowInsert"
-                                                    true-value="yes"
-                                                    false-value="no" />
-                                            <help-button 
-                                                :title="$i18n.getHelperTitle('taxonomies', 'allow_insert')" 
-                                                :message="$i18n.getHelperMessage('taxonomies', 'allow_insert')"
-                                                extra-classes="tainacan-repository-tooltip"/>
-                                        </label>
-                                </b-field>
-                            </div>
-
-                            <div class="column">
-
-                                <!-- Status -------------------------------- --> 
-                                <b-field
-                                        :addons="false" 
-                                        :label="$i18n.get('label_status')"
-                                        :type="editFormErrors['status'] != undefined ? 'is-danger' : ''" 
-                                        :message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
-                                    <help-button 
-                                            :title="$i18n.getHelperTitle('taxonomies', 'status')" 
-                                            :message="$i18n.getHelperMessage('taxonomies', 'status')"
-                                            extra-classes="tainacan-repository-tooltip"/>
-                                    <div class="status-radios">
-                                        <b-radio
-                                                v-model="form.status"
-                                                v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                                                :key="index"
-                                                :native-value="statusOption.slug">
-                                            <span class="icon has-text-gray">
-                                                <i 
-                                                    class="tainacan-icon tainacan-icon-18px"
-                                                    :class="$statusHelper.getIcon(statusOption.slug)"/>
-                                            </span>
-                                            {{ statusOption.name }}
-                                        </b-radio>
-                                    </div>
-                                </b-field>
-                                
-                                <!-- Slug -------------------------------- -->
-                                <b-field
-                                        :addons="false"
-                                        :label="$i18n.get('label_slug')"
-                                        :type="editFormErrors['slug'] != undefined ? 'is-danger' : ''"
-                                        :message="editFormErrors['slug'] != undefined ? editFormErrors['slug'] : ''">
-                                    <help-button 
-                                            :title="$i18n.getHelperTitle('taxonomies', 'slug')" 
-                                            :message="$i18n.getHelperMessage('taxonomies', 'slug')"
-                                            extra-classes="tainacan-repository-tooltip"/>
-                                    <b-input
-                                            @input="updateSlug()"
-                                            id="tainacan-text-slug"
-                                            v-model="form.slug"
-                                            @focus="clearErrors('slug')"
-                                            :disabled="isUpdatingSlug"/>
-                                </b-field>
-
-                                <!-- Activate for other post types -->
-                                <b-field
-                                        :addons="false"
-                                        :label="$i18n.getHelperTitle('taxonomies', 'enabled_post_types')"
-                                        :type="editFormErrors['enabled_post_types'] != undefined ? 'is-danger' : ''"
-                                        :message="editFormErrors['enabled_post_types'] != undefined ? editFormErrors['enabled_post_types'] : ''">
-                                    <help-button 
-                                        :title="$i18n.getHelperTitle('taxonomies', 'enabled_post_types')" 
-                                        :message="$i18n.getHelperMessage('taxonomies', 'enabled_post_types')"
+                                        :title="$i18n.getHelperTitle('taxonomies', 'allow_insert')" 
+                                        :message="$i18n.getHelperMessage('taxonomies', 'allow_insert')"
                                         extra-classes="tainacan-repository-tooltip"/>
+                                </label>
+                        </b-field>
+                        
+                        <!-- Slug -------------------------------- -->
+                        <b-field
+                                :addons="false"
+                                :label="$i18n.get('label_slug')"
+                                :type="editFormErrors['slug'] != undefined ? 'is-danger' : ''"
+                                :message="editFormErrors['slug'] != undefined ? editFormErrors['slug'] : ''">
+                            <help-button 
+                                    :title="$i18n.getHelperTitle('taxonomies', 'slug')" 
+                                    :message="$i18n.getHelperMessage('taxonomies', 'slug')"
+                                    extra-classes="tainacan-repository-tooltip"/>
+                            <b-input
+                                    @input="updateSlug()"
+                                    id="tainacan-text-slug"
+                                    v-model="form.slug"
+                                    @focus="clearErrors('slug')"
+                                    :disabled="isUpdatingSlug"/>
+                        </b-field>
 
-                                    <div 
-                                            v-for="wpPostType in wpPostTypes"
-                                            :key="wpPostType.slug"
-                                            class="field">
-                                        <b-checkbox
-                                            :native-value="wpPostType.slug"
-                                            :true-value="wpPostType.slug"
-                                            false-value=""
-                                            v-model="form.enabledPostTypes"
-                                            name="enabled_post_types" >
-                                            {{ wpPostType.label }}  
-                                        </b-checkbox>
-                                    </div>    
-                                </b-field>
+                        <!-- Activate for other post types -->
+                        <b-field
+                                :addons="false"
+                                :label="$i18n.getHelperTitle('taxonomies', 'enabled_post_types')"
+                                :type="editFormErrors['enabled_post_types'] != undefined ? 'is-danger' : ''"
+                                :message="editFormErrors['enabled_post_types'] != undefined ? editFormErrors['enabled_post_types'] : ''">
+                            <help-button 
+                                :title="$i18n.getHelperTitle('taxonomies', 'enabled_post_types')" 
+                                :message="$i18n.getHelperMessage('taxonomies', 'enabled_post_types')"
+                                extra-classes="tainacan-repository-tooltip"/>
 
-                                <!-- Hook for extra Form options -->
-                                <template v-if="hasEndLeftForm">  
-                                    <form 
-                                        id="form-taxonomy-end-left"
-                                        class="form-hook-region"
-                                        v-html="getEndLeftForm"/>
-                                </template>
-                            </div>
-                        </div>
+                            <div 
+                                    v-for="wpPostType in wpPostTypes"
+                                    :key="wpPostType.slug"
+                                    class="field">
+                                <b-checkbox
+                                    :native-value="wpPostType.slug"
+                                    :true-value="wpPostType.slug"
+                                    false-value=""
+                                    v-model="form.enabledPostTypes"
+                                    name="enabled_post_types" >
+                                    {{ wpPostType.label }}  
+                                </b-checkbox>
+                            </div>    
+                        </b-field>
 
-                        <!-- Submit -->
-                        <div class="field is-grouped form-submit">
-                            <div
-                                    v-if="$route.query.recent"
-                                    class="control">
-                                <button
-                                        id="button-another-taxonomy-creation"
-                                        @click.prevent="goToCreateAnotherTaxonomy()"
-                                        class="button is-secondary">{{ $i18n.get('label_create_another_taxonomy') }}</button>
-                            </div>
-                            <div    
-                                    v-if="!$route.query.recent"
-                                    style="margin-right: auto;"
-                                    class="control">
-                                <button
-                                        id="button-cancel-taxonomy-creation"
-                                        class="button is-outlined"
-                                        type="button"
-                                        @click="cancelBack">{{ $i18n.get('cancel') }}</button>
-                            </div>
-                            <p 
-                                    style="margin: 0 12px;"
-                                    class="help is-danger">
-                                {{ formErrorMessage }}
-                            </p>
-                            <p 
-                                    v-if="updatedAt != undefined"
-                                    class="updated-at">
-                                {{ ($i18n.get('info_updated_at') + ' ' + updatedAt) }}
-                            </p>
-                            <div class="control">
-                                <a
-                                        target="_blank"
-                                        class="button link-button"
-                                        :href="themeTaxonomiesURL + taxonomy.slug">
-                                    <span class="icon is-large">
-                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
-                                    </span>
-                                    <span>{{ $i18n.get('label_taxonomy_page_on_website') }}</span>
-                                </a>
-                                <button
-                                        :class="{ 'is-loading': isLoadingTaxonomy, 'is-success': !isLoadingTaxonomy }"
-                                        id="button-submit-taxonomy-creation"
-                                        @click.prevent="onSubmit"
-                                        class="button">{{ $i18n.get('save') }}</button>
-                            </div>
-                        </div>
-                    </form>
-
-                    <div v-if="!isLoading && (($route.name == 'TaxonomyCreationForm' && !$userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy && taxonomy.current_user_can_edit != undefined && !taxonomy.current_user_can_edit))">
-                        <section class="section">
-                            <div class="content has-text-grey has-text-centered">
-                                <p>
-                                    <span class="icon">
-                                        <i class="tainacan-icon tainacan-icon-30px tainacan-icon-taxonomies"/>
-                                    </span>
-                                </p>
-                                <p>{{ $i18n.get('info_can_not_edit_taxonomy') }}</p>
-                            </div>
-                        </section>
                     </div>
 
-                </b-tab-item>
-                
-                <b-tab-item :label="$i18n.get('terms')">
-                    <!-- Terms List -->    
-                    <terms-list
-                            :key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'" 
-                            @isEditingTermUpdate="isEditingTermUpdate"
-                            :taxonomy-id="taxonomyId"
-                            :taxonomy-slug="taxonomySlug"
-                            :current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/>
-                </b-tab-item>
+                    <div class="column">
+
+                        <!-- Status -------------------------------- --> 
+                        <b-field
+                                :addons="false" 
+                                :label="$i18n.get('label_status')"
+                                :type="editFormErrors['status'] != undefined ? 'is-danger' : ''" 
+                                :message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
+                            <help-button 
+                                    :title="$i18n.getHelperTitle('taxonomies', 'status')" 
+                                    :message="$i18n.getHelperMessage('taxonomies', 'status')"
+                                    extra-classes="tainacan-repository-tooltip"/>
+                            <div class="status-radios">
+                                <b-radio
+                                        v-model="form.status"
+                                        v-for="(statusOption, index) of $statusHelper.getStatuses()"
+                                        :key="index"
+                                        :native-value="statusOption.slug">
+                                    <span class="icon has-text-gray">
+                                        <i 
+                                            class="tainacan-icon tainacan-icon-18px"
+                                            :class="$statusHelper.getIcon(statusOption.slug)"/>
+                                    </span>
+                                    {{ statusOption.name }}
+                                </b-radio>
+                            </div>
+                        </b-field>
+
+                        <!-- Terms List -->                        
+                        <b-field
+                                :addons="false"
+                                :label="$i18n.get('terms')">
+                            <help-button 
+                                :title="$i18n.get('terms')" 
+                                :message="$i18n.get('info_taxonomy_terms_list')"
+                                extra-classes="tainacan-repository-tooltip"/>
+    
+                            <terms-list
+                                    :key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'" 
+                                    @isEditingTermUpdate="isEditingTermUpdate"
+                                    :taxonomy-id="taxonomyId"
+                                    :taxonomy-slug="taxonomySlug"
+                                    :current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/>
+                        </b-field>
+
+                        <!-- Hook for extra Form options -->
+                        <template v-if="hasEndLeftForm">  
+                            <form 
+                                id="form-taxonomy-end-left"
+                                class="form-hook-region"
+                                v-html="getEndLeftForm"/>
+                        </template>
+                    </div>
+                </div>
+
+                <!-- Submit -->
+                <footer class="footer field is-grouped form-submit">
+                    <div
+                            v-if="$route.query.recent"
+                            class="control">
+                        <button
+                                id="button-another-taxonomy-creation"
+                                @click.prevent="goToCreateAnotherTaxonomy()"
+                                class="button is-secondary">{{ $i18n.get('label_create_another_taxonomy') }}</button>
+                    </div>
+                    <div    
+                            v-if="!$route.query.recent"
+                            style="margin-right: auto;"
+                            class="control">
+                        <button
+                                id="button-cancel-taxonomy-creation"
+                                class="button is-outlined"
+                                type="button"
+                                @click="cancelBack">{{ $i18n.get('cancel') }}</button>
+                    </div>
+                    <p 
+                            style="margin: 0 12px;"
+                            class="help is-danger">
+                        {{ formErrorMessage }}
+                    </p>
+                    <p 
+                            v-if="updatedAt != undefined"
+                            class="updated-at">
+                        {{ ($i18n.get('info_updated_at') + ' ' + updatedAt) }}
+                    </p>
+                    <div class="control">
+                        <a
+                                target="_blank"
+                                class="button link-button"
+                                :href="themeTaxonomiesURL + taxonomy.slug">
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
+                            </span>
+                            <span>{{ $i18n.get('label_taxonomy_page_on_website') }}</span>
+                        </a>
+                        <button
+                                :class="{ 'is-loading': isLoadingTaxonomy, 'is-success': !isLoadingTaxonomy }"
+                                id="button-submit-taxonomy-creation"
+                                @click.prevent="onSubmit"
+                                class="button">{{ $i18n.get('save') }}</button>
+                    </div>
+                </footer>
+            </form>
+
+            <div v-if="!isLoading && (($route.name == 'TaxonomyCreationForm' && !$userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy && taxonomy.current_user_can_edit != undefined && !taxonomy.current_user_can_edit))">
+                <section class="section">
+                    <div class="content has-text-grey has-text-centered">
+                        <p>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-30px tainacan-icon-taxonomies"/>
+                            </span>
+                        </p>
+                        <p>{{ $i18n.get('info_can_not_edit_taxonomy') }}</p>
+                    </div>
+                </section>
+            </div>
+
+            <b-loading 
+                    :active.sync="isLoadingTaxonomy" 
+                    :can-cancel="false"/>
 
-                <b-loading 
-                        :active.sync="isLoadingTaxonomy" 
-                        :can-cancel="false"/>
-            </b-tabs>
         </div>
     </div>
 </template>
@@ -569,5 +572,56 @@
         color: var(--tainacan-info-color);
         font-style: italic;
     }
+
+    .footer {
+        padding: 14px var(--tainacan-one-column);
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        z-index: 9999;
+        background-color: var(--tainacan-gray1);
+        width: calc(100% - var(--tainacan-sidebar-width, 3.25em));
+        height: 60px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        transition: bottom 0.5s ease, width 0.2s linear;
+
+        .footer-message {
+            display: flex;
+            align-items: center;
+        }
+
+        .update-info-section {
+            color: var(--tainacan-info-color);
+            margin-right: auto;
+            display: flex;
+            flex-wrap: nowrap;
+        }
+
+        .help {
+            display: inline-flex;
+            font-size: 1.0em;
+            margin-top: 0;
+            margin-left: 24px;
+
+            .tainacan-help-tooltip-trigger {
+                margin-left: 0.25em;
+            }
+        }
+
+        @media screen and (max-width: 769px) {
+            padding: 13px 0.5em;
+            width: 100%;
+            flex-wrap: wrap;
+            height: auto;
+            position: fixed;
+
+            .update-info-section {
+                margin-left: auto;margin-bottom: 0.75em;
+                margin-top: -0.25em;
+            }
+        }
+    }
 </style>
 
diff --git a/src/views/admin/components/edition/term-edition-form.vue b/src/views/admin/components/edition/term-edition-form.vue
index 739c249cb..ab064811c 100644
--- a/src/views/admin/components/edition/term-edition-form.vue
+++ b/src/views/admin/components/edition/term-edition-form.vue
@@ -12,7 +12,7 @@
                 :is="isModal ? 'header' : 'div'"
                 class="tainacan-page-title"
                 :class="{ 'tainacan-modal-title': isModal }">
-            <h2>{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
+            <h2 style="width: 60%">{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
             <a
                     v-if="form && form.url != undefined && form.url!= ''"
                     target="_blank"
diff --git a/src/views/admin/components/lists/terms-list.vue b/src/views/admin/components/lists/terms-list.vue
index 29f55a91e..bdd6691c7 100644
--- a/src/views/admin/components/lists/terms-list.vue
+++ b/src/views/admin/components/lists/terms-list.vue
@@ -5,11 +5,14 @@
             class="terms-list-header">
         <button
                 v-if="currentUserCanEditTaxonomy"
-                class="button is-secondary"
+                class="is-inline-block add-link link-style"
                 type="button"
                 @click="addNewTerm(0)"
                 :disabled="isEditingTerm && isLoadingTerms">
-            {{ $i18n.get('label_new_term') }}
+            <span class="icon is-small">
+                <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
+            </span>
+            &nbsp;{{ $i18n.get('label_new_term') }}
         </button>
         <b-field class="order-area">
             <label class="label">{{ $i18n.get('label_sort') }}</label>
@@ -21,6 +24,7 @@
                     trap-focus>
                 <button
                             :aria-label="$i18n.get('label_sorting_direction')"
+                            type="button"
                             class="button is-white"
                             slot="trigger">
                     <span 
@@ -76,74 +80,79 @@
                     :disabled="isEditingTerm"/>
         </div>
     </div>
-    <div class="columns">
-        <b-loading 
-                :is-full-page="false"
-                :active.sync="isLoadingTerms" 
-                :can-cancel="false"/>
-        <div 
-                style="font-size: 0.875em;"
-                :class="{ 'is-12': !isEditingTerm, 'is-8-fullhd is-7-fullscreen is-6-desktop is-5-tablet': isEditingTerm }"
-                class="column">
-            <br>
 
-            <!-- Basic list, without hierarchy, used during search -->
-            <template v-if="isSearching">
-                <div 
-                        v-for="(term, index) in localTerms"
-                        :key="term.id">
-                    <basic-term-item
-                            :term="term"
-                            :index="index"
-                            :taxonomy-id="taxonomyId"
-                            :order="order"
-                            :current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
-                            @onUpdateTermOpenedState="(state) => term.opened = state"/>
-                </div>
-            </template>
-            <a 
-                    class="view-more-terms-level-0"
-                    :class="{'is-disabled': isEditingTerm}"
-                    @click="offset = offset + maxTerms; searchTerms(offset)"
-                    v-if="(isSearching) && totalTerms > localTerms.length">
-                {{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
-            </a>
+    <b-loading 
+            :is-full-page="false"
+            :active.sync="isLoadingTerms" 
+            :can-cancel="false"/>
 
-            <!-- Recursive list for hierarchy -->
-            <template v-if="!isSearching">
-                <div    
-                        v-for="(term, index) in localTerms"
-                        :key="term.id"
-                        class="parent-term">
-                    <recursive-term-item 
-                            :term="term"
-                            :index="index"
-                            :taxonomy-id="taxonomyId"
-                            :order="order" 
-                            :current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
-                            @onUpdateTermOpenedState="(state) => term.opened = state"/>
-                </div>
-            </template>
-            <a 
-                    class="view-more-terms-level-0"
-                    :class="{'is-disabled': isEditingTerm}"
-                    @click="offset = offset + maxTerms; loadTerms(0)"
-                    v-if="(!isSearching) && totalTerms > localTerms.length">
-                {{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
-            </a>
-        </div>
-        <div 
-                class="column is-4-fullhd is-5-fullscreen is-6-desktop is-7-tablet edit-forms-list"
-                v-if="isEditingTerm">
-            <term-edition-form 
-                    :style="{ 'top': termEditionFormTop + 'px'}"
-                    :taxonomy-id="taxonomyId"
-                    @onEditionFinished="onTermEditionFinished($event)"
-                    @onEditionCanceled="onTermEditionCanceled($event)"
-                    @onErrorFound="formWithErrors = editTerm.id"
-                    :original-form="editTerm"/>
-        </div>
+    <div style="font-size: 0.875em; padding: 0px;">
+
+        <!-- Basic list, without hierarchy, used during search -->
+        <template v-if="isSearching">
+            <div 
+                    v-for="(term, index) in localTerms"
+                    :key="term.id">
+                <basic-term-item
+                        :term="term"
+                        :index="index"
+                        :taxonomy-id="taxonomyId"
+                        :order="order"
+                        :current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
+                        @onUpdateTermOpenedState="(state) => term.opened = state"/>
+            </div>
+        </template>
+        <a 
+                class="view-more-terms-level-0"
+                :class="{'is-disabled': isEditingTerm}"
+                @click="offset = offset + maxTerms; searchTerms(offset)"
+                v-if="(isSearching) && totalTerms > localTerms.length">
+            {{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
+        </a>
+
+        <!-- Recursive list for hierarchy -->
+        <template v-if="!isSearching">
+            <div    
+                    v-for="(term, index) in localTerms"
+                    :key="term.id"
+                    class="parent-term">
+                <recursive-term-item 
+                        :term="term"
+                        :index="index"
+                        :taxonomy-id="taxonomyId"
+                        :order="order" 
+                        :current-user-can-edit-taxonomy="currentUserCanEditTaxonomy"
+                        @onUpdateTermOpenedState="(state) => term.opened = state"/>
+            </div>
+        </template>
+        <a 
+                class="view-more-terms-level-0"
+                :class="{'is-disabled': isEditingTerm}"
+                @click="offset = offset + maxTerms; loadTerms(0)"
+                v-if="(!isSearching) && totalTerms > localTerms.length">
+            {{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
+        </a>
     </div>
+
+    <b-modal
+            v-model="isEditingTerm"
+            :width="768"
+            trap-focus
+            aria-role="dialog"
+            aria-modal
+            :can-cancel="['outside', 'escape']"
+            custom-class="tainacan-modal"
+            :close-button-aria-label="$i18n.get('close')">
+        <term-edition-form 
+                :style="{ 'top': termEditionFormTop + 'px'}"
+                :taxonomy-id="taxonomyId"
+                :is-modal="true"
+                @onEditionFinished="onTermEditionFinished($event)"
+                @onEditionCanceled="onTermEditionCanceled($event)"
+                @onErrorFound="formWithErrors = editTerm.id"
+                :original-form="editTerm" />
+    </b-modal>
+
     <!-- Empty state image -->
     <div v-if="termsList.length <= 0 && !isLoadingTerms && !isEditingTerm">
         <section class="section">
@@ -585,10 +594,6 @@ export default {
         border-top: 1px solid var(--tainacan-gray1);
     }
 
-    .edit-forms-list {
-        padding-left: 0;
-    }
-
 </style>
 
 
diff --git a/src/views/tainacan-i18n.php b/src/views/tainacan-i18n.php
index 7ec637320..e92b64241 100644
--- a/src/views/tainacan-i18n.php
+++ b/src/views/tainacan-i18n.php
@@ -1007,6 +1007,7 @@ return apply_filters( 'tainacan-i18n', [
 	'info_non_located_item'							 => __( 'This item does not have any location based on this metadata.', 'tainacan' ),
 	'info_metadata_section_hidden_conditional'		 => __( 'Section disabled due to a conditional metadatum value.', 'tainacan' ),
 	'info_create_select_metadatum_for_conditional_section' => __( 'For configuring conditional sections, first create one select type metadatum to use its values as rules for displaing this section. The metadatum should be inside another metadatum section.', 'tainacan' ),
+	'info_taxonomy_terms_list' 						 => __( 'The list of terms that are managed by this taxonomy. They will be used as values for the taxonomy metadata.', 'tainacan' ),
 
 	/* Activity actions */
 	'action_update-metadata-value'	=> __( 'Item Metadata Value Updates', 'tainacan'),