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

4
components/stashes/stash.vue
View File

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