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> </div>
<!-- Thumbnail --> <!-- Thumbnail -->
<img <div
@click="goToItemPage(item)" @click="goToItemPage(item)"
v-if="item.thumbnail != undefined" 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 --> <!-- Actions -->
<div <div

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

@ -1139,8 +1139,8 @@
this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode)); this.$eventBusSearch.setInitialAdminViewMode(this.$userPrefs.get(prefsAdminViewMode));
} }
this.adjustSearchControlHeight();
// Watches window resize to adjust filter's top position and compression on mobile // Watches window resize to adjust filter's top position and compression on mobile
this.adjustSearchControlHeight();
window.addEventListener('resize', this.adjustSearchControlHeight); window.addEventListener('resize', this.adjustSearchControlHeight);
}, },
beforeDestroy() { beforeDestroy() {

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

@ -9,11 +9,23 @@
v-if="!openAdvancedSearch" v-if="!openAdvancedSearch"
class="is-hidden-mobile" class="is-hidden-mobile"
id="filter-menu-compress-button" id="filter-menu-compress-button"
:class="{'filter-menu-compress-button-top-repo': isRepositoryLevel}" :class="{'filter-menu-compress-button-top-repo': isRepositoryLevel && !isOnTheme }"
:style="{ top: !isOnTheme ? '120px' : (searchControlHeight - 15) + 'px' }" :style="{ top: !isOnTheme ? '120px' : '76px' }"
@click="isFiltersMenuCompressed = !isFiltersMenuCompressed"> @click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
<b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" /> <b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
</button> </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 --> <!-- Side bar with search and filters -->
<aside <aside
:style="{ top: searchControlHeight + 'px' }" :style="{ top: searchControlHeight + 'px' }"
@ -359,13 +371,6 @@
</b-field> </b-field>
</div> --> </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)--> <!-- Text simple search (used on mobile, instead of the one from filter list)-->
<div class="is-hidden-tablet search-control-item"> <div class="is-hidden-tablet search-control-item">
<div class="search-area"> <div class="search-area">
@ -1087,6 +1092,7 @@
}); });
this.$eventBusSearch.$on('hasFiltered', hasFiltered => { this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
this.adjustSearchControlHeight();
this.hasFiltered = hasFiltered; this.hasFiltered = hasFiltered;
}); });
@ -1136,11 +1142,12 @@
} }
// Watches window resize to adjust filter's top position and compression on mobile // 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() { beforeDestroy() {
this.$off(); this.$off();
window.removeEventListener('resize', this.adjustSearchControlHeight()); window.removeEventListener('resize', this.adjustSearchControlHeight);
} }
} }
</script> </script>
@ -1292,6 +1299,22 @@
.icon { .icon {
margin-top: -1px; 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 { .spaced-to-right {

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

@ -20,6 +20,7 @@
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
transition: background-color 0.3s;
&:hover { &:hover {
background-color: $gray2; background-color: $gray2;
@ -59,14 +60,22 @@
} }
} }
img { .thumbnail {
width: 100%; background-size: cover;
height: auto; background-color: #f6f6f6;
background-blend-mode: multiply;
border-radius: 2px; border-radius: 2px;
margin-bottom: -5px; transition: background-color 0.3s;
&:hover { &:hover {
cursor: pointer; 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> <p>{{ item.title != undefined ? item.title : '' }}</p>
</div> </div>
<!-- Thumbnail --> <!-- Thumbnail -->
<img <div
v-if="item.thumbnail != undefined" 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> </a>
</masonry> </masonry>
</div> </div>

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

@ -24,7 +24,7 @@
:key="index" :key="index"
v-for="(item, index) of items" v-for="(item, index) of items"
class="tainacan-record"> class="tainacan-record">
<!-- <a :href="item.url"> --> <!-- <div :href="item.url"> -->
<!-- Title --> <!-- Title -->
<p <p
v-tooltip="{ v-tooltip="{
@ -58,12 +58,12 @@
@click="goToItemPage(item)"> @click="goToItemPage(item)">
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<a <div
class="thumbnail" class="thumbnail"
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
@click="goToItemPage(item)"> @click="goToItemPage(item)">
<img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath"> <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
</a> </div>
<span <span
v-for="(column, index) in tableMetadata" v-for="(column, index) in tableMetadata"
:key="index" :key="index"