Adds multiply blending layer to masonry.
This commit is contained in:
parent
9efa3795a8
commit
c09e69df09
|
@ -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
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -31,9 +31,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<img
|
||||
<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>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue