Updating stash page when stashing scene. Improved layout.

This commit is contained in:
DebaucheryLibrarian 2021-03-19 04:18:56 +01:00
parent fe2004b3da
commit 626cbc4fc5
1 changed files with 19 additions and 25 deletions

View File

@ -14,15 +14,13 @@
</div> </div>
<div class="content-inner"> <div class="content-inner">
<ul <Releases
v-if="stash.scenes?.length > 0" v-if="stash.scenes?.length > 0"
class="stash-section stash-scenes nolist" :releases="stash.scenes.map(item => item.scene)"
> class="stash-section stash-scenes"
<li @stash="fetchStash"
v-for="item in stash.scenes" @unstash="fetchStash"
:key="item.id" />
><Scene :release="item.scene" /></li>
</ul>
<ul <ul
v-if="stash.actors?.length > 0" v-if="stash.actors?.length > 0"
@ -39,7 +37,7 @@
<script> <script>
import Actor from '../actors/tile.vue'; import Actor from '../actors/tile.vue';
import Scene from '../releases/scene-tile.vue'; import Releases from '../releases/releases.vue';
async function fetchStash() { async function fetchStash() {
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId); this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
@ -52,7 +50,7 @@ async function mounted() {
export default { export default {
components: { components: {
Actor, Actor,
Scene, Releases,
}, },
data() { data() {
return { return {
@ -89,27 +87,23 @@ export default {
} }
} }
.stash-section { .stash-section:not(:last-child) {
padding: 1rem;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint); border-bottom: solid 1px var(--shadow-hint);
}
}
.stash-actors,
.stash-scenes {
display: grid;
flex-grow: 1;
grid-gap: .5rem;
box-sizing: border-box;
} }
.stash-actors { .stash-actors {
display: grid;
grid-gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
flex-grow: 1;
padding: 1rem;
} }
.stash-scenes { .stash-scenes {
flex-grow: 0;
.tiles {
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
} }
</style> </style>