Compare commits
3 commits
77de7d54ca
...
8e0947ed4b
| Author | SHA1 | Date | |
|---|---|---|---|
|
8e0947ed4b | ||
|
|
736a0afa44 | ||
|
|
209ba0f5f0 |
6 changed files with 219 additions and 212 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
.navbar {
|
.navbar {
|
||||||
min-height: 3.25rem;
|
min-height: 3.5rem;
|
||||||
background-color: var(--navbar-color);
|
background-color: var(--navbar-color);
|
||||||
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
|
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
|
||||||
color: rgba(0,0,0,.7);
|
color: rgba(0,0,0,.7);
|
||||||
|
|
@ -11,11 +11,15 @@
|
||||||
@include transition() {}
|
@include transition() {}
|
||||||
|
|
||||||
@include respond-to("medium-up") {
|
@include respond-to("medium-up") {
|
||||||
min-height: 3.25rem;
|
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.container {
|
||||||
|
max-width: 1330px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ mongoose
|
||||||
|
|
||||||
const sess = {
|
const sess = {
|
||||||
cookie: {
|
cookie: {
|
||||||
maxAge: 86400000,
|
maxAge: 604800000, // INFO: 7 jours
|
||||||
},
|
},
|
||||||
secret,
|
secret,
|
||||||
saveUninitialized: false,
|
saveUninitialized: false,
|
||||||
|
|
|
||||||
133
views/components/album.ejs
Normal file
133
views/components/album.ejs
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
<div class="grid md:grid-cols-3 gap-16">
|
||||||
|
<div>
|
||||||
|
<template v-for="album in tracklist">
|
||||||
|
<strong v-if="album.title">{{album.title}}</strong>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(track, index) in album.tracks" class="ml-4">
|
||||||
|
{{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
|
||||||
|
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
|
||||||
|
<li v-for="extra in track.artists" class=" ml-4">
|
||||||
|
<small>{{extra.name}}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden">
|
||||||
|
<li v-for="extra in track.extraartists" class=" ml-4">
|
||||||
|
<small>{{extra.role}} : {{extra.name}}</small>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<div class="grid grid-cols-2 gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Genres</strong>
|
||||||
|
<br />
|
||||||
|
<template v-for="(genre, index) in item.genres">
|
||||||
|
{{genre}}<template v-if="index < item.genres.length - 1">, </template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Styles</strong>
|
||||||
|
<br />
|
||||||
|
<span v-for="(style, index) in item.styles">
|
||||||
|
{{style}}<template v-if="index < item.styles.length - 1">, </template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid grid-cols-3 gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Pays</strong>
|
||||||
|
<br />
|
||||||
|
<span>{{item.country}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Année</strong>
|
||||||
|
<br />
|
||||||
|
<span>{{item.year}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Date de sortie</strong>
|
||||||
|
<br />
|
||||||
|
<span>{{item.released}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid gap-10">
|
||||||
|
<div>
|
||||||
|
<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}}
|
||||||
|
<template v-if="format.text">
|
||||||
|
- <i>{{format.text}}</i>
|
||||||
|
</template>
|
||||||
|
<template v-if="format.descriptions && format.descriptions.length > 0">
|
||||||
|
(<span v-for="(description, index) in format.descriptions">
|
||||||
|
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
|
||||||
|
</span>)
|
||||||
|
</template>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
|
<div>
|
||||||
|
<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}})
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<template v-if="item.identifiers.length > identifiersPreviewLength">
|
||||||
|
<button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
|
||||||
|
Voir la suite
|
||||||
|
</button>
|
||||||
|
<button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
|
||||||
|
Voir moins
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<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 />
|
||||||
|
<div class="grid gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Note</strong>
|
||||||
|
<div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Vidéos</strong>
|
||||||
|
<dl>
|
||||||
|
<template v-for="video in item.videos">
|
||||||
|
<dt>
|
||||||
|
<a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
{{video.description}}
|
||||||
|
</dd>
|
||||||
|
</template>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
150
views/index.ejs
150
views/index.ejs
|
|
@ -35,89 +35,91 @@
|
||||||
<% } %>
|
<% } %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar" aria-label="Navigation principale">
|
<nav class="navbar">
|
||||||
<div class="navbar-brand">
|
<nav class="navbar container" aria-label="Navigation principale">
|
||||||
<a class="navbar-item" href="/">
|
<div class="navbar-brand">
|
||||||
<img src="/img/logo.png" alt="Logo MusicTopus">
|
<a class="navbar-item" href="/">
|
||||||
<span>MusicTopus</span>
|
<img src="/img/logo.png" alt="Logo MusicTopus">
|
||||||
</a>
|
<span>MusicTopus</span>
|
||||||
|
|
||||||
<a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
<span aria-hidden="true"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="navbar" class="navbar-menu">
|
|
||||||
<% if ( user ) { %>
|
|
||||||
<div class="navbar-start">
|
|
||||||
<div class="navbar-item">
|
|
||||||
<div class="buttons">
|
|
||||||
<a class="button is-primary" href="/ajouter-un-album">
|
|
||||||
<i class="icon-plus"></i>
|
|
||||||
<span>
|
|
||||||
Ajouter un album
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% } %>
|
|
||||||
|
|
||||||
<div class="navbar-end">
|
|
||||||
<a class="navbar-item" href="/nous-contacter">
|
|
||||||
Nous contacter
|
|
||||||
</a>
|
</a>
|
||||||
<% if ( user ) { %>
|
|
||||||
<div class="navbar-item has-dropdown">
|
|
||||||
<a class="navbar-link">
|
|
||||||
<i class="icon-user"></i>
|
|
||||||
<span>
|
|
||||||
<%= user.username %>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="navbar-dropdown">
|
<a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
|
||||||
<a class="navbar-item" href="/mon-compte">
|
<span aria-hidden="true"></span>
|
||||||
Mon compte
|
<span aria-hidden="true"></span>
|
||||||
</a>
|
<span aria-hidden="true"></span>
|
||||||
<hr />
|
</a>
|
||||||
<a class="navbar-item" href="/ma-collection">
|
</div>
|
||||||
Ma collection
|
|
||||||
</a>
|
<div id="navbar" class="navbar-menu">
|
||||||
<a class="navbar-item" href="/ma-collection/exporter">
|
<% if ( user ) { %>
|
||||||
Exporter ma collection
|
<div class="navbar-start">
|
||||||
</a>
|
<div class="navbar-item">
|
||||||
<a class="navbar-item" href="/ma-collection/importer">
|
<div class="buttons">
|
||||||
Importer une collection
|
<a class="button is-primary" href="/ajouter-un-album">
|
||||||
</a>
|
<i class="icon-plus"></i>
|
||||||
|
<span>
|
||||||
|
Ajouter un album
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<div class="navbar-item apparence">
|
|
||||||
<div class="theme-switch-wrapper">
|
<div class="navbar-end">
|
||||||
<label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
|
<a class="navbar-item" href="/nous-contacter">
|
||||||
<input type="checkbox" id="checkbox" />
|
Nous contacter
|
||||||
<div class="slider round"></div>
|
</a>
|
||||||
</label>
|
<% if ( user ) { %>
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
<i class="icon-user"></i>
|
||||||
|
<span>
|
||||||
|
<%= user.username %>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item" href="/mon-compte">
|
||||||
|
Mon compte
|
||||||
|
</a>
|
||||||
|
<hr />
|
||||||
|
<a class="navbar-item" href="/ma-collection">
|
||||||
|
Ma collection
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item" href="/ma-collection/exporter">
|
||||||
|
Exporter ma collection
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item" href="/ma-collection/importer">
|
||||||
|
Importer une collection
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<% } %>
|
||||||
<div class="navbar-item">
|
<div class="navbar-item apparence">
|
||||||
<div class="buttons">
|
<div class="theme-switch-wrapper">
|
||||||
<% if ( !user ) { %>
|
<label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
|
||||||
<a class="button is-primary" href="/connexion">
|
<input type="checkbox" id="checkbox" />
|
||||||
<strong>Connexion</strong>
|
<div class="slider round"></div>
|
||||||
</a>
|
</label>
|
||||||
<% } else { %>
|
</div>
|
||||||
<a class="button is-danger" href="/se-deconnecter">
|
</div>
|
||||||
Déconnexion
|
<div class="navbar-item">
|
||||||
</a>
|
<div class="buttons">
|
||||||
<% } %>
|
<% if ( !user ) { %>
|
||||||
|
<a class="button is-primary" href="/connexion">
|
||||||
|
<strong>Connexion</strong>
|
||||||
|
</a>
|
||||||
|
<% } else { %>
|
||||||
|
<a class="button is-danger" href="/se-deconnecter">
|
||||||
|
Déconnexion
|
||||||
|
</a>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="toastr">
|
<div id="toastr">
|
||||||
|
|
|
||||||
|
|
@ -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-1 sm:grid-cols-2 gap-16">
|
<div class="grid grid-cols-1 md:grid-cols-3 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}`" />
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="md:col-span-2">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
<div class="grid grid-cols-1">
|
<div class="grid grid-cols-1">
|
||||||
<strong>Genres</strong>
|
<strong>Genres</strong>
|
||||||
|
|
|
||||||
|
|
@ -21,139 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="grid md:grid-cols-3 gap-16">
|
<%- include('../../../components/album.ejs') %>
|
||||||
<div>
|
|
||||||
<template v-for="album in tracklist">
|
|
||||||
<strong v-if="album.title">{{album.title}}</strong>
|
|
||||||
<ul>
|
|
||||||
<li v-for="(track, index) in album.tracks" class="ml-4">
|
|
||||||
{{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
|
|
||||||
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
|
|
||||||
<li v-for="extra in track.artists" class=" ml-4">
|
|
||||||
<small>{{extra.name}}</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden">
|
|
||||||
<li v-for="extra in track.extraartists" class=" ml-4">
|
|
||||||
<small>{{extra.role}} : {{extra.name}}</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="md:col-span-2">
|
|
||||||
<div class="grid grid-cols-2 gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Genres</strong>
|
|
||||||
<br />
|
|
||||||
<template v-for="(genre, index) in item.genres">
|
|
||||||
{{genre}}<template v-if="index < item.genres.length - 1">, </template>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Styles</strong>
|
|
||||||
<br />
|
|
||||||
<span v-for="(style, index) in item.styles">
|
|
||||||
{{style}}<template v-if="index < item.styles.length - 1">, </template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid grid-cols-3 gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Pays</strong>
|
|
||||||
<br />
|
|
||||||
<span>{{item.country}}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Année</strong>
|
|
||||||
<br />
|
|
||||||
<span>{{item.year}}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Date de sortie</strong>
|
|
||||||
<br />
|
|
||||||
<span>{{item.released}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid gap-10">
|
|
||||||
<div>
|
|
||||||
<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}}
|
|
||||||
<template v-if="format.text">
|
|
||||||
- <i>{{format.text}}</i>
|
|
||||||
</template>
|
|
||||||
<template v-if="format.descriptions && format.descriptions.length > 0">
|
|
||||||
(<span v-for="(description, index) in format.descriptions">
|
|
||||||
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
|
|
||||||
</span>)
|
|
||||||
</template>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
||||||
<div>
|
|
||||||
<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}})
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<template v-if="item.identifiers.length > identifiersPreviewLength">
|
|
||||||
<button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
|
|
||||||
Voir la suite
|
|
||||||
</button>
|
|
||||||
<button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
|
|
||||||
Voir moins
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<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 />
|
|
||||||
<div class="grid gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Note</strong>
|
|
||||||
<div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Vidéos</strong>
|
|
||||||
<dl>
|
|
||||||
<template v-for="video in item.videos">
|
|
||||||
<dt>
|
|
||||||
<a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
{{video.description}}
|
|
||||||
</dd>
|
|
||||||
</template>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal" :class="{'is-visible': modalIsVisible}">
|
<div class="modal" :class="{'is-visible': modalIsVisible}">
|
||||||
<div class="modal-background"></div>
|
<div class="modal-background"></div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue