DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added additional container to scenes component to prevent gaps between grid tiles.

This commit is contained in:
DebaucheryLibrarian 2024-08-04 23:50:26 +02:00
parent 6cfe5e6dcf
commit 49e528ebf9
2 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/scenes/scenes.vue
View File

@ -114,25 +114,25 @@
/>
</nav>
<ul
class="scenes nolist"
>
<template v-for="item in campaignScenes">
<li
v-if="item === 'campaign' && sceneCampaign"
:key="`campaign-${item.id}`"
>
<Campaign :campaign="sceneCampaign" />
</li>
<div class="scenes-items">
<ul class="scenes nolist">
<template v-for="item in campaignScenes">
<li
v-if="item === 'campaign' && sceneCampaign"
:key="`campaign-${item.id}`"
>
<Campaign :campaign="sceneCampaign" />
</li>
<li
v-else
:key="`scene-${item.id}`"
>
<SceneTile :scene="item" />
</li>
</template>
</ul>
<li
v-else
:key="`scene-${item.id}`"
>
<SceneTile :scene="item" />
</li>
</template>
</ul>
</div>
<Pagination
:total="total"
@ -344,11 +344,15 @@ function updateFilter(prop, value, reload = true) {
margin-bottom: .5rem;
}
.scenes-items {
/* grow additional container to prevent gaps between grid tiles */
flex-grow: 1;
}
.scenes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: .5rem;
flex-grow: 1;
padding: .5rem 1rem 1rem 1rem;
:deep(.campaign) .campaign-banner {

4
components/stashes/stash.vue
View File

@ -60,6 +60,7 @@ const stash = pageContext.pageProps.stash;
.stash {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.header {
@ -115,6 +116,9 @@ const stash = pageContext.pageProps.stash;
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}