From 7fdc9c80170f4189b984f9fe422eb311667cad20 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 18 Jul 2018 15:13:09 -0300
Subject: [PATCH 1/4] Begins improvements in filter list responsiviness and
 fixes Processes Popup not showing value.

---
 .../components/other/processes-popup.vue      |  2 +-
 src/admin/pages/lists/items-page.vue          | 39 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/admin/components/other/processes-popup.vue b/src/admin/components/other/processes-popup.vue
index b15cd5c31..b2abd036d 100644
--- a/src/admin/components/other/processes-popup.vue
+++ b/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>
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 83cccc823..ea41a0e72 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -20,7 +20,7 @@
                     :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 +39,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
@@ -328,6 +328,28 @@
                         </b-dropdown>
                     </b-field>
                 </div>
+                <div class="is-hidden-tablet">
+                    <div class="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>
+                    </div>
+                    <a
+                            @click="openAdvancedSearch = !openAdvancedSearch"
+                            class="is-size-7 is-secondary is-pulled-right is-hidden-mobile">{{ $i18n.get('advanced_search') }}</a>
+                </div>
             </div>
 
             <!-- ADVANCED SEARCH -->
@@ -936,6 +958,15 @@
         display: block;
         transition: visibility ease 0.5s, display ease 0.5s;
 
+        @media screen and (max-width: 769px) {
+            width: 100%;
+            top: 92px;
+            
+            h3 {
+                margin-top: 0 !important;
+            }
+        }
+
         h3 {
             font-size: 100%;
             margin-top: 48px;
@@ -998,6 +1029,10 @@
 
     .spaced-to-right {
         margin-left: $filter-menu-width;
+
+        @media screen and (max-width: 769px) {
+            margin-left: 0px !important;
+        }
     }
 
     .search-control {

From 62cecea5510244f39fb249d7f211211ecf370bb9 Mon Sep 17 00:00:00 2001
From: walisonjose <walison.josededeus@gmail.com>
Date: Wed, 18 Jul 2018 15:53:03 -0300
Subject: [PATCH 2/4] Update .travis.yml

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index cdc9b3aa6..dface8cb6 100644
--- a/.travis.yml
+++ b/.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

From 86767bbf70c1b35d5a6fcc739ef8aac684cc6476 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 18 Jul 2018 16:14:23 -0300
Subject: [PATCH 3/4] Better responsiviness to Items Listing and Filters on
 Theme.

---
 src/admin/pages/lists/items-page.vue | 61 +++++++++++++++++-----------
 src/admin/theme-items-list.vue       | 11 ++++-
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index ea41a0e72..9c7ac7c26 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -14,6 +14,7 @@
         </button>
         <!-- Side bar with search and filters -->
         <aside
+                :style="{ top: searchControlHeight + 'px' }"
                 v-show="!isFiltersMenuCompressed && !openAdvancedSearch"
                 class="filters-menu tainacan-form">
             <b-loading
@@ -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,27 +330,27 @@
                         </b-dropdown>
                     </b-field>
                 </div>
-                <div class="is-hidden-tablet">
-                    <div class="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>
+
+                <!-- 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 is-hidden-mobile">{{ $i18n.get('advanced_search') }}</a>
+                            class="is-size-7 is-secondary is-pulled-right">{{ $i18n.get('advanced_search') }}</a>
                 </div>
             </div>
 
@@ -575,6 +577,7 @@
                 openFormAdvancedSearch: false,
                 advancedSearchResults: false,
                 isDoSearch: false,
+                searchControlHeight: 0
             }
         },
         props: {
@@ -860,6 +863,7 @@
 
         },
         mounted() {
+            
             this.prepareMetadataAndFilters();
             this.localTableMetadata = JSON.parse(JSON.stringify(this.tableMetadata));
 
@@ -885,6 +889,14 @@
                     this.$emit('onShrinkHeader', this.isHeaderShrinked); 
                 });
             }
+
+            // Watches window resize to adjust filter's height on mobile 
+            this.$nextTick(() => {
+                this.searchControlHeight = this.$refs['search-control'].clientHeight;
+                window.addEventListener('resize', () => {
+                    this.searchControlHeight = this.$refs['search-control'].clientHeight;
+                });
+            })
         }
     }
 </script>
@@ -943,7 +955,7 @@
 
     .filters-menu {
         position: relative;
-        z-index: 9;
+        z-index: 10;
         background-color: white;
         width: $filter-menu-width;
         min-width: 180px;
@@ -958,14 +970,17 @@
         display: block;
         transition: visibility ease 0.5s, display ease 0.5s;
 
-        @media screen and (max-width: 769px) {
+        @media screen and (max-width: 768px) {
             width: 100%;
-            top: 92px;
+            padding: $page-small-side-padding !important;
             
             h3 {
                 margin-top: 0 !important;
             }
         }
+        @media screen and (min-width: 769px) {
+            top: 0px !important;
+        }
 
         h3 {
             font-size: 100%;
@@ -1030,7 +1045,7 @@
     .spaced-to-right {
         margin-left: $filter-menu-width;
 
-        @media screen and (max-width: 769px) {
+        @media screen and (max-width: 768px) {
             margin-left: 0px !important;
         }
     }
diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue
index a080be51c..ac9cafd9b 100644
--- a/src/admin/theme-items-list.vue
+++ b/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;
+                }
             }
         }
 

From 59260473f84b896dc98cfcfa33e365c110f3fff9 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 18 Jul 2018 16:38:17 -0300
Subject: [PATCH 4/4] Hides filter by default on mobile in Item Listing Page.

---
 .eslintrc.js                         |  3 ++-
 src/admin/pages/lists/items-page.vue | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 543fc7413..34a0cad16 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,6 +19,7 @@ module.exports = {
     },
     globals: {
         'tainacan_plugin': true,
-        '_': true
+        '_': true,
+        'jQuery': true
     }
 }
\ No newline at end of file
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 9c7ac7c26..afc90d579 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -678,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 = [];
@@ -890,10 +900,12 @@
                 });
             }
 
-            // Watches window resize to adjust filter's height on mobile 
+            // 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;
                 });
             })