From c09e69df093122442c465e088da2be0bbb5bdb0c Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Mon, 20 Aug 2018 15:36:13 -0300
Subject: [PATCH] Adds multiply blending layer to masonry.

---
 src/admin/components/lists/items-list.vue |  7 +++-
 src/admin/pages/lists/items-page.vue      |  2 +-
 src/admin/pages/lists/term-items-page.vue | 45 +++++++++++++++++------
 src/admin/scss/_view-mode-masonry.scss    | 17 +++++++--
 src/theme-helper/view-mode-masonry.vue    |  9 +++--
 src/theme-helper/view-mode-records.vue    |  6 +--
 6 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index aab07b94d..00bab65ff 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -136,10 +136,13 @@
                     </div>
 
                     <!-- Thumbnail -->  
-                    <img 
+                    <div 
                             @click="goToItemPage(item)"
                             v-if="item.thumbnail != undefined"
-                            :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                            class="thumbnail"
+                            :style="{ backgroundImage: 'url(' + (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath) + ')' }">  
+                        <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                    </div>
                     
                     <!-- Actions -->
                     <div 
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 5feed1c78..3b8911a85 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -1139,8 +1139,8 @@
                     this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
             }
 
-            this.adjustSearchControlHeight();
             // Watches window resize to adjust filter's top position and compression on mobile 
+            this.adjustSearchControlHeight();
             window.addEventListener('resize', this.adjustSearchControlHeight);
         },
         beforeDestroy() {
diff --git a/src/admin/pages/lists/term-items-page.vue b/src/admin/pages/lists/term-items-page.vue
index eacc9c6e8..96894baca 100644
--- a/src/admin/pages/lists/term-items-page.vue
+++ b/src/admin/pages/lists/term-items-page.vue
@@ -9,11 +9,23 @@
                 v-if="!openAdvancedSearch"
                 class="is-hidden-mobile"
                 id="filter-menu-compress-button"
-                :class="{'filter-menu-compress-button-top-repo': isRepositoryLevel}"
-                :style="{ top: !isOnTheme ? '120px' : (searchControlHeight - 15) + 'px' }"
+                :class="{'filter-menu-compress-button-top-repo': isRepositoryLevel && !isOnTheme }"
+                :style="{ top: !isOnTheme ? '120px' : '76px' }"
                 @click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
             <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
         </button>
+        <!-- Filters mobile modal button -->
+        <button 
+                v-if="!openAdvancedSearch"
+                class="is-hidden-tablet"
+                id="filter-menu-compress-button"
+                :class="{'filter-menu-compress-button-top-repo': isRepositoryLevel && !isOnTheme }"
+                :style="{ top: !isOnTheme ? (searchControlHeight + 70) + 'px' : (searchControlHeight - 25) + 'px' }"
+                @click="isFilterModalActive = !isFilterModalActive">
+            <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
+            <span class="text">{{ $i18n.get('filters') }}</span>
+        </button>
+
         <!-- Side bar with search and filters -->
         <aside
                 :style="{ top: searchControlHeight + 'px' }"
@@ -359,13 +371,6 @@
                     </b-field>
                 </div> -->
 
-                <!-- Filters mobile modal button -->
-                <div class="search-control-item is-hidden-tablet">
-                    <button 
-                            @click="isFilterModalActive = !isFilterModalActive"
-                            class="button is-secondary">{{ $i18n.get('filters') }}</button>
-                </div>
-
                 <!-- Text simple search (used on mobile, instead of the one from filter list)-->
                 <div class="is-hidden-tablet search-control-item">
                     <div class="search-area">
@@ -1087,6 +1092,7 @@
             });
 
             this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
+                this.adjustSearchControlHeight();
                 this.hasFiltered = hasFiltered;
             });
 
@@ -1136,11 +1142,12 @@
             }
 
             // Watches window resize to adjust filter's top position and compression on mobile 
-            window.addEventListener('resize', this.adjustSearchControlHeight());
+            this.adjustSearchControlHeight();
+            window.addEventListener('resize', this.adjustSearchControlHeight);
         },
         beforeDestroy() {
             this.$off();
-            window.removeEventListener('resize', this.adjustSearchControlHeight());
+            window.removeEventListener('resize', this.adjustSearchControlHeight);
         }
     }
 </script>
@@ -1292,6 +1299,22 @@
         .icon {
             margin-top: -1px;
         }
+
+        @media screen and (max-width: 768px) {
+            max-width: 100%;
+            width: auto;
+            padding: 3px 6px 3px 0px;
+            height: 24px;
+
+            .icon {
+                position: relative;
+                top: -3px;
+            }
+            .text {
+                position: relative;
+                top: -6px;
+            }
+        }
     }
 
     .spaced-to-right {
diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss
index f436419ee..0c95c02f3 100644
--- a/src/admin/scss/_view-mode-masonry.scss
+++ b/src/admin/scss/_view-mode-masonry.scss
@@ -20,6 +20,7 @@
         margin-bottom: 30px;
         text-align: center;
         text-decoration: none;
+        transition: background-color 0.3s;
 
         &:hover {
             background-color: $gray2;
@@ -59,14 +60,22 @@
             }
         }
 
-        img {
-            width: 100%;
-            height: auto;
+        .thumbnail {
+            background-size: cover;
+            background-color: #f6f6f6;
+            background-blend-mode: multiply;
             border-radius: 2px;
-            margin-bottom: -5px;
+            transition: background-color 0.3s;
 
             &:hover {
                 cursor: pointer;
+                background-color: white;
+            } 
+        
+            img {
+                width: 100%;
+                height: auto;    
+                visibility: hidden;
             }
         }
 
diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue
index a6831063d..0e262efc3 100644
--- a/src/theme-helper/view-mode-masonry.vue
+++ b/src/theme-helper/view-mode-masonry.vue
@@ -30,10 +30,13 @@
                         <p>{{ item.title != undefined ? item.title : '' }}</p>                             
                     </div>
 
-                    <!-- Thumbnail -->  
-                    <img 
+                    <!-- Thumbnail -->
+                    <div 
                             v-if="item.thumbnail != undefined"
-                            :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                            class="thumbnail"
+                            :style="{ backgroundImage: 'url(' + (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath) + ')' }">  
+                        <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                    </div>
                 </a>
             </masonry>
         </div> 
diff --git a/src/theme-helper/view-mode-records.vue b/src/theme-helper/view-mode-records.vue
index e69de2057..d5be5177e 100644
--- a/src/theme-helper/view-mode-records.vue
+++ b/src/theme-helper/view-mode-records.vue
@@ -24,7 +24,7 @@
                         :key="index"
                         v-for="(item, index) of items"
                         class="tainacan-record">
-                    <!-- <a :href="item.url"> -->
+                    <!-- <div :href="item.url"> -->
                         <!-- Title -->           
                         <p 
                                 v-tooltip="{
@@ -58,12 +58,12 @@
                                 @click="goToItemPage(item)">
 
                             <div class="list-metadata media-body">
-                                <a 
+                                <div 
                                         class="thumbnail"
                                         v-if="item.thumbnail != undefined"
                                         @click="goToItemPage(item)">
                                     <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
-                                </a>
+                                </div>
                                 <span 
                                         v-for="(column, index) in tableMetadata"
                                         :key="index"