Merge branch 'develop' of https://github.com/tainacan/tainacan into develop

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     },
     globals: {
         'tainacan_plugin': true,
-        '_': true
+        '_': true,
+        'jQuery': true
     }
 }

.travis.yml

@@ -26,7 +26,7 @@ before_install:
 - sudo apt-get update
 - sudo apt-get install  sshpass
 - sudo service mysql restart
-- mysql -e 'CREATE DATABASE IF NOT EXISTS test;'
+- mysql -e 'CREATE DATABASE IF NOT EXISTS test;' 
 install:
 - echo -e "Install" 
 - sudo mv  ./tests/bootstrap-config-sample.php ./tests/bootstrap-config.php

src/admin/components/other/processes-popup.vue

@@ -87,7 +87,7 @@
                     class="icon has-text-tertiary"><i class="mdi mdi-18px mdi-autorenew"/></span>
             <p class="footer-title">    
                 {{ hasAnyProcessExecuting ? 
-                    (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')): 
+                    (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')): 
                     $i18n.get('info_no_process') 
                 }}
             </p>

src/admin/pages/lists/items-page.vue

@@ -14,13 +14,14 @@
         </button>
         <!-- Side bar with search and filters -->
         <aside
+                :style="{ top: searchControlHeight + 'px' }"
                 v-show="!isFiltersMenuCompressed && !openAdvancedSearch"
                 class="filters-menu tainacan-form">
             <b-loading
                     :is-full-page="false"
                     :active.sync="isLoadingFilters"/>
 
-            <div class="search-area">
+            <div class="search-area is-hidden-mobile">
                 <div class="control has-icons-right  is-small is-clearfix">
                     <input
                             class="input is-small"
@@ -39,7 +40,7 @@
             </div>
             <a
                     @click="openAdvancedSearch = !openAdvancedSearch"
-                    class="is-size-7 is-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
+                    class="is-size-7 is-secondary is-pulled-right is-hidden-mobile">{{ $i18n.get('advanced_search') }}</a>
 
             <h3 class="has-text-weight-semibold">{{ $i18n.get('filters') }}</h3>
             <a
@@ -105,6 +106,7 @@
 
             <!-- SEARCH CONTROL ------------------------- -->
             <div
+                    ref="search-control"
                     v-if="!openAdvancedSearch"
                     class="search-control">
                 <b-loading
@@ -251,7 +253,7 @@
                                         class="gray-icon view-mode-icon"
                                         v-if="registeredViewModes[viewMode] != undefined"
                                         v-html="registeredViewModes[viewMode].icon"/>
-                                    &nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}
+                                    <span class="is-hidden-mobile">&nbsp;&nbsp;&nbsp;{{ $i18n.get('label_visualization') }}</span>
                                 <b-icon icon="menu-down" />
                             </button>
                             <b-dropdown-item 
@@ -328,6 +330,28 @@
                         </b-dropdown>
                     </b-field>
                 </div>
+
+                <!-- Text simple search (used on mobile, instead of the one from filter list)-->
+                <div class="is-hidden-tablet search-control-item">
+                    <div class="control has-icons-right  is-small is-clearfix">
+                        <input
+                                class="input is-small"
+                                :placeholder="$i18n.get('instruction_search')"
+                                type="search"
+                                autocomplete="on"
+                                :value="searchQuery"
+                                @input="futureSearchQuery = $event.target.value"
+                                @keyup.enter="updateSearch()">
+                            <span
+                                    @click="updateSearch()"
+                                    class="icon is-right">
+                                <i class="mdi mdi-magnify" />
+                            </span>
+                    </div>
+                    <a
+                            @click="openAdvancedSearch = !openAdvancedSearch"
+                            class="is-size-7 is-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
+                </div>
             </div>
 
             <!-- ADVANCED SEARCH -->
@@ -553,6 +577,7 @@
                 openFormAdvancedSearch: false,
                 advancedSearchResults: false,
                 isDoSearch: false,
+                searchControlHeight: 0
             }
         },
         props: {
@@ -653,9 +678,19 @@
             },
             onChangeViewMode(viewMode) {
                 this.$eventBusSearch.setViewMode(viewMode);
+
+                // Updates searchControlHeight before in case we need to adjust filters position on mobile
+                setTimeout(() => {
+                    this.searchControlHeight = this.$refs['search-control'].clientHeight;
+                }, 500);
             },
             onChangeAdminViewMode(adminViewMode) {
                 this.$eventBusSearch.setAdminViewMode(adminViewMode);
+
+                // Updates searchControlHeight before in case we need to adjust filters position on mobile
+                setTimeout(() => {
+                    this.searchControlHeight = this.$refs['search-control'].clientHeight;
+                }, 500);
             },
             onChangeDisplayedMetadata() {
                 let fetchOnlyMetadatumIds = [];
@@ -838,6 +873,7 @@
 
         },
         mounted() {
+            
             this.prepareMetadataAndFilters();
             this.localTableMetadata = JSON.parse(JSON.stringify(this.tableMetadata));
 
@@ -863,6 +899,16 @@
                     this.$emit('onShrinkHeader', this.isHeaderShrinked); 
                 });
             }
+
+            // Watches window resize to adjust filter's top position and compression on mobile 
+            this.$nextTick(() => {
+                this.searchControlHeight = this.$refs['search-control'].clientHeight;
+                this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
+                window.addEventListener('resize', () => {
+                    this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
+                    this.searchControlHeight = this.$refs['search-control'].clientHeight;
+                });
+            })
         }
     }
 </script>
@@ -921,7 +967,7 @@
 
     .filters-menu {
         position: relative;
-        z-index: 9;
+        z-index: 10;
         background-color: white;
         width: $filter-menu-width;
         min-width: 180px;
@@ -936,6 +982,18 @@
         display: block;
         transition: visibility ease 0.5s, display ease 0.5s;
 
+        @media screen and (max-width: 768px) {
+            width: 100%;
+            padding: $page-small-side-padding !important;
+            
+            h3 {
+                margin-top: 0 !important;
+            }
+        }
+        @media screen and (min-width: 769px) {
+            top: 0px !important;
+        }
+
         h3 {
             font-size: 100%;
             margin-top: 48px;
@@ -998,6 +1056,10 @@
 
     .spaced-to-right {
         margin-left: $filter-menu-width;
+
+        @media screen and (max-width: 768px) {
+            margin-left: 0px !important;
+        }
     }
 
     .search-control {

src/admin/theme-items-list.vue

@@ -291,7 +291,11 @@ export default {
             position: absolute !important;
             min-width: $filter-menu-width-theme;
             border-right: 0;
-            padding: 25px 12px 25px 4.1666667%;
+            padding: 25px 2.0833333% 25px 4.1666667%;
+
+            @media screen and (min-width: 769px) and (max-width: 1023px) {
+                min-width: 25% !important;
+            }
 
             .columns {
                 display: flex;
@@ -318,6 +322,7 @@ export default {
             .view-mode-icon {
                 margin-right: 0px !important;
                 margin-top: 1px;
+                margin-left: 4px;
 
                 &.icon i::before, .gray-icon i::before {
                     font-size: 19px !important;
@@ -331,6 +336,10 @@ export default {
             margin-left: 0;
             &.spaced-to-right {
                 margin-left:  $filter-menu-width-theme;
+
+                @media screen and (min-width: 769px) and (max-width: 1023px) {
+                    margin-left: 25% !important;
+                }
             }
         }