Added format description in my-collection view & fixed bug in list

This commit is contained in:
Damien Broqua 2022-02-22 08:15:07 +01:00
parent 2ada3c39d0
commit 7cc43dba43
4 changed files with 38 additions and 31 deletions

View file

@ -34,7 +34,6 @@
@import './toast'; @import './toast';
@import './flash'; @import './flash';
@import './pagination'; @import './pagination';
@import './list';
@import './home'; @import './home';
@import './connexion'; @import './connexion';

View file

@ -1,16 +0,0 @@
.items {
span {
margin-right: 0.6rem;
&::after {
content: ",";
}
&:last-child {
&::after {
margin-right: 0;
content: "";
}
}
}
}

View file

@ -25,16 +25,25 @@
<br /> <br />
<span><strong>Pays :</strong> {{ item.country }}</span> <span><strong>Pays :</strong> {{ item.country }}</span>
<br /> <br />
<span class="items"> <span>
<strong>Format :</strong> <span v-for="format in item.format">{{ format }}</span> <strong>Format : </strong>
<template v-for="(format, index) in item.format">
{{ format }}<template v-if="index < item.format.length - 1">, </template>
</template>
</span> </span>
<br /> <br />
<span class="items"> <span>
<strong>Genre :</strong> <span v-for="genre in item.genre">{{ genre }}</span> <strong>Genre : </strong>
<template v-for="(genre, index) in item.genre">
{{ genre }}<template v-if="index < item.genre.length - 1">, </template>
</template>
</span> </span>
<br /> <br />
<span class="items"> <span>
<strong>Style :</strong> <span v-for="style in item.style">{{ style }}</span> <strong>Style : </strong>
<template v-for="(style, index) in item.style">
{{ style }}<template v-if="index < item.style.length - 1">, </template>
</template>
</span> </span>
</div> </div>
</div> </div>
@ -63,15 +72,19 @@
</div> </div>
<div> <div>
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-2 gap-10">
<div class="items"> <div>
<strong>Genres</strong> <strong>Genres</strong>
<br /> <br />
<span v-for="genre in details.genres">{{genre}}</span> <template v-for="(genre, index) in details.genres">
{{genre}}<template v-if="index < details.genres.length - 1">, </template>
</template>
</div> </div>
<div class="items"> <div>
<strong>Styles</strong> <strong>Styles</strong>
<br /> <br />
<span v-for="style in details.styles">{{style}}</span> <span v-for="(style, index) in details.styles">
{{style}}<template v-if="index < details.styles.length - 1">, </template>
</span>
</div> </div>
</div> </div>
<hr /> <hr />
@ -97,7 +110,9 @@
<div> <div>
<strong>Format</strong> <strong>Format</strong>
<br /> <br />
<span v-for="format in details.formats">{{format.name}}</span> <span v-for="(format, index) in details.formats">
{{format.name}}<template v-if="index < details.formats.length - 1">, </template>
</span>
</div> </div>
</div> </div>
<hr /> <hr />

View file

@ -52,11 +52,20 @@
<br /> <br />
<span><strong>Pays :</strong> {{ item.country }}</span> <span><strong>Pays :</strong> {{ item.country }}</span>
<br /> <br />
<span class="items"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</span></span> <span>
<strong>Format : </strong>
<span v-for="(format, index) in item.formats">
{{ format.name }}
(<template v-for="(description, j) in format.descriptions">
{{description}}<template v-if="j < format.descriptions.length - 1">, </template>
</template>)
<template v-if="index < item.formats.length - 1">,</template>
</span>
</span>
<br /> <br />
<span class="items"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span> <span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
<br /> <br />
<span class="items"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span> <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
</div> </div>
</div> </div>
</div> </div>