DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

Improved campaign component, added various banners.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-06-28 05:13:41 +02:00
parent 729ca0f968
commit 0a343dfa98
34 changed files with 308 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
assets/components/album/album.vue
View File

@@ -11,43 +11,56 @@
/>
</div>
<div
class="album-items"
:class="{ portrait }"
>
<div class="album-body">
<div
v-for="item in albumItems"
:key="item.id"
class="item-container"
v-if="entity || tag"
class="campaign-container"
>
<a
:href="getPath(item, null, { local })"
class="item-link"
target="_blank"
<Campaign
:entity="entity"
:tag="tag"
:min-ratio="3"
/>
</div>
<div
class="album-items"
:class="{ portrait }"
>
<div
v-for="item in albumItems"
:key="item.id"
class="item-container"
>
<img
:src="getPath(item, 'thumbnail', { local })"
:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
:width="item.thumbnailWidth"
:height="item.thumbnailHeight"
:title="item.title"
loading="lazy"
class="item image"
<a
:href="getPath(item, null, { local })"
class="item-link"
target="_blank"
>
<img
:src="getPath(item, 'thumbnail', { local })"
:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
:width="item.thumbnailWidth"
:height="item.thumbnailHeight"
:title="item.title"
loading="lazy"
class="item image"
>
<Logo :photo="item" />
<Logo :photo="item" />
<router-link
v-if="comments && item.title && item.entity"
:to="`/${item.entity.type}/${item.entity.slug}`"
class="item-comment"
>{{ item.title }} for {{ item.entity.name }}</router-link>
<router-link
v-if="comments && item.title && item.entity"
:to="`/${item.entity.type}/${item.entity.slug}`"
class="item-comment"
>{{ item.title }} for {{ item.entity.name }}</router-link>
<span
v-else-if="comments && item.title"
class="item-comment"
>{{ item.title }}</span>
</a>
<span
v-else-if="comments && item.title"
class="item-comment"
>{{ item.title }}</span>
</a>
</div>
</div>
</div>
</div>
@@ -56,6 +69,7 @@
<script>
import Logo from './logo.vue';
import Campaign from '../campaigns/campaign.vue';
function albumItems() {
return this.items
@@ -69,6 +83,7 @@ function albumItems() {
export default {
components: {
Logo,
Campaign,
},
props: {
items: {
@@ -91,6 +106,14 @@ export default {
type: Boolean,
default: true,
},
entity: {
type: Object,
default: null,
},
tag: {
type: Object,
default: null,
},
},
computed: {
albumItems,
@@ -146,15 +169,30 @@ export default {
}
}
.album-body {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
overflow-y: auto;
}
.campaign-container {
flex-shrink: 0;
text-align: center;
}
.album-items {
height: 0;
display: grid;
flex-grow: 1;
flex-shrink: 0;
align-items: center;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 0 1rem;
padding: 1rem;
margin: auto 0;
overflow-y: auto;
&.portrait {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));