From 77de7d54ca025011772f13399ddb5a20e12bc8bf Mon Sep 17 00:00:00 2001
From: dbroqua <contact@darkou.fr>
Date: Fri, 27 Oct 2023 21:22:23 +0200
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20du=20rendu=20en=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 views/pages/ajouter-un-album.ejs              | 66 ++++++++++---------
 .../mon-compte/ma-collection/details.ejs      | 31 +++++----
 2 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs
index a993af7..1c29db2 100644
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@@ -79,7 +79,7 @@
                 <button aria-label="Fermer" class="close" @click="toggleModal"></button>
             </header>
             <section>
-                <div class="grid grid-cols-2 gap-16">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-16">
                     <div>
                         <div class="text-center">
                             <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;" />
                             <hr />
                         </div>
-                        <ol class="ml-4">
-                            <li v-for="track in details.tracklist">
-                                {{ track.title }} ({{track.duration}})
-                                <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>
+                        <ul class="is-unstyled">
+                            <li v-for="track in details.tracklist" :class="{'ml-4': track.type_ === 'track'}">
+                                <strong v-if="track.type_ === 'heading'">
+                                    {{track.title}}
+                                </strong>
+                                <template v-else>
+                                    {{ track.position }}
+                                    {{ 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>
-                        </ol>
+                        </ul>
                     </div>
                     <div>
-                        <div class="grid grid-cols-2 gap-10">
-                            <div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
+                            <div class="grid grid-cols-1">
                                 <strong>Genres</strong>
-                                <br />
                                 <template v-for="(genre, index) in details.genres">
                                     {{genre}}<template v-if="index < details.genres.length - 1">, </template>
                                 </template>
                             </div>
-                            <div>
+                            <div class="grid grid-cols-1">
                                 <strong>Styles</strong>
-                                <br />
                                 <span v-for="(style, index) in details.styles">
                                     {{style}}<template v-if="index < details.styles.length - 1">, </template>
                                 </span>
                             </div>
                         </div>
                         <hr />
-                        <div class="grid grid-cols-3 gap-10">
-                            <div>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
+                            <div class="grid grid-cols-2 md:grid-cols-1">
                                 <strong>Pays</strong>
-                                <br />
                                 <span>{{details.country}}</span>
                             </div>
-                            <div>
+                            <div class="grid grid-cols-2 md:grid-cols-1">
                                 <strong>Année</strong>
-                                <br />
                                 <span>{{details.year}}</span>
                             </div>
-                            <div>
+                            <div class="grid grid-cols-2 md:grid-cols-1">
                                 <strong>Date de sortie</strong>
-                                <br />
                                 <span>{{details.released}}</span>
                             </div>
                         </div>
                         <hr />
-                        <div class="grid grid-cols-2 gap-10">
+                        <div class="grid grid-cols-1 gap-10">
                             <div>
-                                <strong>Format</strong>
+                                <strong>Format<template v-if="details?.formats?.length > 1">s</template></strong>
                                 <ul class="ml-4">
                                     <li v-for="(format) in details.formats">
                                         {{format.name}}
@@ -153,25 +154,26 @@
                             </div>
                         </div>
                         <hr />
-                        <div class="grid grid-cols-2 gap-10">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                             <div>
-                                <strong>Codes barres</strong>
-                                <ol>
+                                <strong>Code<template v-if="details?.identifiers?.length > 1">s</template> barre<template v-if="details?.identifiers?.length > 1">s</template></strong>
+                                <ol class="ml-4">
                                     <li v-for="identifier in details.identifiers">
                                         {{identifier.value}} ({{identifier.type}})
                                     </li>
                                 </ol>
                             </div>
                             <div>
-                                <strong>Label</strong>
-                                <ol>
+                                <strong>Label<template v-if="details?.labels?.length > 1">s</template></strong>
+                                <ol class="ml-4">
                                     <li v-for="label in details.labels">
                                         {{label.name}}
                                     </li>
                                 </ol>
-                                <strong>Société</strong>
-                                <ol>
-                                    <li v-for="company in details.companie">
+                                <strong>Société<template v-if="details?.companies?.length > 1">s</template></strong>
+                                <ol class="ml-4">
+                                    <li v-for="company in details.companies">
+                                        <strong>{{company.entity_type_name}}</strong>
                                         {{company.name}}
                                     </li>
                                 </ol>
diff --git a/views/pages/mon-compte/ma-collection/details.ejs b/views/pages/mon-compte/ma-collection/details.ejs
index 37b1ef1..0512dac 100644
--- a/views/pages/mon-compte/ma-collection/details.ejs
+++ b/views/pages/mon-compte/ma-collection/details.ejs
@@ -80,7 +80,7 @@
             <hr />
             <div class="grid gap-10">
                 <div>
-                    <strong>Format</strong>
+                    <strong>Format<template v-if="item.formats.length > 1">s</template></strong>
                     <ul class="ml-4">
                         <li v-for="(format) in item.formats">
                             {{format.name}}
@@ -97,9 +97,9 @@
                 </div>
             </div>
             <hr />
-            <div class="grid grid-cols-2 gap-10">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                 <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">
                         <li v-for="identifier in identifiers">
                             {{identifier.value}} ({{identifier.type}})
@@ -115,19 +115,18 @@
                     </template>
                 </div>
                 <div>
-                    <strong>Label</strong>
-                    <br />
-                    <template v-for="label in item.labels">
-                        {{label.name}} {{label.catno}}
-                        <br />
-                    </template>
-                    <hr />
-                    <strong>Sociétés</strong>
-                    <br />
-                    <template v-for="company in item.companies">
-                        <strong>{{company.entity_type_name}}</strong> : {{company.name}}
-                        <br />
-                    </template>
+                    <strong>Label<template v-if="item.labels.length > 1">s</template></strong>
+                    <ol class="ml-4">
+                        <li v-for="label in item.labels">
+                            {{label.name}} {{label.catno}}
+                        </li>
+                    </ol>
+                    <strong>Société<template v-if="item.companies.length > 1">s</template></strong>
+                    <ol class="ml-4">
+                        <li v-for="company in item.companies">
+                            <strong>{{company.entity_type_name}}</strong> {{company.name}}
+                        </li>
+                    </ol>
                 </div>
             </div>
             <hr />