dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 10 Pull Requests Releases 14 Activity

Amélioration du rendu en mobile

This commit is contained in:
Damien Broqua 2023-10-27 21:22:23 +02:00
parent 00bb8647e1
commit 77de7d54ca
2 changed files with 49 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
views/pages/ajouter-un-album.ejs
View File

@ -79,7 +79,7 @@
<button aria-label="Fermer" class="close" @click="toggleModal"></button> <button aria-label="Fermer" class="close" @click="toggleModal"></button>
</header> </header>
<section> <section>
<div class="grid grid-cols-2 gap-16"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-16">
<div> <div>
<div class="text-center"> <div class="text-center">
<img :src="details.thumb %>" :alt="`Miniature pour l'album ${details.title}`" /> <img :src="details.thumb %>" :alt="`Miniature pour l'album ${details.title}`" />
@ -87,56 +87,57 @@
<img v-for="image in details.images" :src="image.uri150" :alt="`Miniature de type ${image.type}`" style="max-width: 60px;" /> <img v-for="image in details.images" :src="image.uri150" :alt="`Miniature de type ${image.type}`" style="max-width: 60px;" />
<hr /> <hr />
</div> </div>
<ol class="ml-4"> <ul class="is-unstyled">
<li v-for="track in details.tracklist"> <li v-for="track in details.tracklist" :class="{'ml-4': track.type_ === 'track'}">
{{ track.title }} ({{track.duration}}) <strong v-if="track.type_ === 'heading'">
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden"> {{track.title}}
<li v-for="extra in track.artists" class=" ml-4"> </strong>
<small>{{extra.role}} : {{extra.name}}</small> <template v-else>
</li> {{ track.position }}
</ul> {{ track.title }} <span v-if="track.duration">({{track.duration}})</span>
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
<li v-for="extra in track.artists" class=" ml-4">
<small>{{extra.role}} : {{extra.name}}</small>
</li>
</ul>
</template>
</li> </li>
</ol> </ul>
</div> </div>
<div> <div>
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div> <div class="grid grid-cols-1">
<strong>Genres</strong> <strong>Genres</strong>
<br />
<template v-for="(genre, index) in details.genres"> <template v-for="(genre, index) in details.genres">
{{genre}}<template v-if="index < details.genres.length - 1">, </template> {{genre}}<template v-if="index < details.genres.length - 1">, </template>
</template> </template>
</div> </div>
<div> <div class="grid grid-cols-1">
<strong>Styles</strong> <strong>Styles</strong>
<br />
<span v-for="(style, index) in details.styles"> <span v-for="(style, index) in details.styles">
{{style}}<template v-if="index < details.styles.length - 1">, </template> {{style}}<template v-if="index < details.styles.length - 1">, </template>
</span> </span>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid grid-cols-3 gap-10"> <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div> <div class="grid grid-cols-2 md:grid-cols-1">
<strong>Pays</strong> <strong>Pays</strong>
<br />
<span>{{details.country}}</span> <span>{{details.country}}</span>
</div> </div>
<div> <div class="grid grid-cols-2 md:grid-cols-1">
<strong>Année</strong> <strong>Année</strong>
<br />
<span>{{details.year}}</span> <span>{{details.year}}</span>
</div> </div>
<div> <div class="grid grid-cols-2 md:grid-cols-1">
<strong>Date de sortie</strong> <strong>Date de sortie</strong>
<br />
<span>{{details.released}}</span> <span>{{details.released}}</span>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-1 gap-10">
<div> <div>
<strong>Format</strong> <strong>Format<template v-if="details?.formats?.length > 1">s</template></strong>
<ul class="ml-4"> <ul class="ml-4">
<li v-for="(format) in details.formats"> <li v-for="(format) in details.formats">
{{format.name}} {{format.name}}
@ -153,25 +154,26 @@
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div> <div>
<strong>Codes barres</strong> <strong>Code<template v-if="details?.identifiers?.length > 1">s</template> barre<template v-if="details?.identifiers?.length > 1">s</template></strong>
<ol> <ol class="ml-4">
<li v-for="identifier in details.identifiers"> <li v-for="identifier in details.identifiers">
{{identifier.value}} ({{identifier.type}}) {{identifier.value}} ({{identifier.type}})
</li> </li>
</ol> </ol>
</div> </div>
<div> <div>
<strong>Label</strong> <strong>Label<template v-if="details?.labels?.length > 1">s</template></strong>
<ol> <ol class="ml-4">
<li v-for="label in details.labels"> <li v-for="label in details.labels">
{{label.name}} {{label.name}}
</li> </li>
</ol> </ol>
<strong>Société</strong> <strong>Société<template v-if="details?.companies?.length > 1">s</template></strong>
<ol> <ol class="ml-4">
<li v-for="company in details.companie"> <li v-for="company in details.companies">
<strong>{{company.entity_type_name}}</strong>
{{company.name}} {{company.name}}
</li> </li>
</ol> </ol>

31
views/pages/mon-compte/ma-collection/details.ejs
View File

@ -80,7 +80,7 @@
<hr /> <hr />
<div class="grid gap-10"> <div class="grid gap-10">
<div> <div>
<strong>Format</strong> <strong>Format<template v-if="item.formats.length > 1">s</template></strong>
<ul class="ml-4"> <ul class="ml-4">
<li v-for="(format) in item.formats"> <li v-for="(format) in item.formats">
{{format.name}} {{format.name}}
@ -97,9 +97,9 @@
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div> <div>
<strong id="identifiers">Codes barres</strong> <strong id="identifiers">Code<template v-if="item.identifiers.length > 1">s</template> barre<template v-if="item.identifiers.length > 1">s</template></strong>
<ol class="ml-4"> <ol class="ml-4">
<li v-for="identifier in identifiers"> <li v-for="identifier in identifiers">
{{identifier.value}} ({{identifier.type}}) {{identifier.value}} ({{identifier.type}})
@ -115,19 +115,18 @@
</template> </template>
</div> </div>
<div> <div>
<strong>Label</strong> <strong>Label<template v-if="item.labels.length > 1">s</template></strong>
<br /> <ol class="ml-4">
<template v-for="label in item.labels"> <li v-for="label in item.labels">
{{label.name}} {{label.catno}} {{label.name}} {{label.catno}}
<br /> </li>
</template> </ol>
<hr /> <strong>Société<template v-if="item.companies.length > 1">s</template></strong>
<strong>Sociétés</strong> <ol class="ml-4">
<br /> <li v-for="company in item.companies">
<template v-for="company in item.companies"> <strong>{{company.entity_type_name}}</strong> {{company.name}}
<strong>{{company.entity_type_name}}</strong> : {{company.name}} </li>
<br /> </ol>
</template>
</div> </div>
</div> </div>
<hr /> <hr />