tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds multiply blending layer to masonry.

This commit is contained in:
Mateus Machado Luna 2018-08-20 15:36:13 -03:00
parent 9efa3795a8
commit c09e69df09
6 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/admin/components/lists/items-list.vue
View File

@ -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

2
src/admin/pages/lists/items-page.vue
View File

@ -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() {

45
src/admin/pages/lists/term-items-page.vue
View File

@ -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 {

17
src/admin/scss/_view-mode-masonry.scss
View File

@ -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;
}
}

9
src/theme-helper/view-mode-masonry.vue
View File

@ -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>

6
src/theme-helper/view-mode-records.vue
View File

@ -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"