Updated css for ajouter-un-album
This commit is contained in:
parent
cb69a62603
commit
c159495a59
6 changed files with 71 additions and 268 deletions
|
|
@ -4,13 +4,32 @@
|
||||||
padding: 0 .75rem;
|
padding: 0 .75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list{
|
.list {
|
||||||
|
margin-top: 2rem;
|
||||||
|
|
||||||
|
.item{
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
border-bottom: 1px solid #dbdbdb;
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
@include respond-to("large") {
|
||||||
&:nth-child(2n) {
|
&:nth-child(2n) {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@include respond-to("large-up") {
|
||||||
|
border-left: 1px solid #dbdbdb;
|
||||||
|
|
||||||
|
&:first-child,
|
||||||
|
&:nth-child(2) {
|
||||||
|
border-top: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n),
|
||||||
|
&:last-child {
|
||||||
|
border-right: 1px solid #dbdbdb;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
|
@ -23,6 +42,9 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border: 2px solid #4a4a4a;
|
border: 2px solid #4a4a4a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.items {
|
.items {
|
||||||
|
|
@ -41,5 +63,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -12,7 +12,6 @@ import config, { env, mongoDbUri, secret } from "./config";
|
||||||
import { isXhr } from "./helpers";
|
import { isXhr } from "./helpers";
|
||||||
|
|
||||||
import indexRouter from "./routes";
|
import indexRouter from "./routes";
|
||||||
import addAlbumRouter from "./routes/addAlbum";
|
|
||||||
|
|
||||||
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
|
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
|
||||||
import importSearchRouterApiV1 from "./routes/api/v1/search";
|
import importSearchRouterApiV1 from "./routes/api/v1/search";
|
||||||
|
|
@ -81,7 +80,6 @@ app.use(
|
||||||
);
|
);
|
||||||
|
|
||||||
app.use("/", indexRouter);
|
app.use("/", indexRouter);
|
||||||
app.use("/ajouter-un-album", addAlbumRouter);
|
|
||||||
app.use("/api/v1/albums", importAlbumRouterApiV1);
|
app.use("/api/v1/albums", importAlbumRouterApiV1);
|
||||||
app.use("/api/v1/search", importSearchRouterApiV1);
|
app.use("/api/v1/search", importSearchRouterApiV1);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import express from "express";
|
|
||||||
import { ensureLoggedIn } from "connect-ensure-login";
|
|
||||||
|
|
||||||
import Pages from "../middleware/Albums";
|
|
||||||
|
|
||||||
import render from "../libs/format";
|
|
||||||
|
|
||||||
// eslint-disable-next-line new-cap
|
|
||||||
const router = express.Router();
|
|
||||||
|
|
||||||
router.route("/").get(ensureLoggedIn("/connexion"), (req, res, next) => {
|
|
||||||
try {
|
|
||||||
const page = new Pages(req, "ajouter-un-album/search");
|
|
||||||
|
|
||||||
render(res, page);
|
|
||||||
} catch (err) {
|
|
||||||
next(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router
|
|
||||||
.route("/:discogsId")
|
|
||||||
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
|
||||||
try {
|
|
||||||
const page = new Pages(req, "ajouter-un-album/form");
|
|
||||||
|
|
||||||
await page.getFormAddOne();
|
|
||||||
|
|
||||||
render(res, page);
|
|
||||||
} catch (err) {
|
|
||||||
next(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default router;
|
|
||||||
|
|
@ -77,6 +77,18 @@ router
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router
|
||||||
|
.route("/ajouter-un-album")
|
||||||
|
.get(ensureLoggedIn("/connexion"), (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const page = new Pages(req, "ajouter-un-album");
|
||||||
|
|
||||||
|
render(res, page);
|
||||||
|
} catch (err) {
|
||||||
|
next(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
router
|
router
|
||||||
.route("/ma-collection")
|
.route("/ma-collection")
|
||||||
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,12 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="grid grid-cols-1 lg:grid-cols-2 list">
|
||||||
<div class="list" v-if="!loading" v-for="item in items">
|
<div class="item" v-if="!loading" v-for="item in items">
|
||||||
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
<div>
|
<div>
|
||||||
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;" @click="loadDetails(item.id)"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:col-span-3">
|
<div class="md:col-span-3">
|
||||||
<span><strong>Année :</strong> {{ item.year }}</span>
|
<span><strong>Année :</strong> {{ item.year }}</span>
|
||||||
|
|
@ -63,15 +63,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="grid grid-cols-2 gap-10">
|
<div class="grid grid-cols-2 gap-10">
|
||||||
<div>
|
<div class="items">
|
||||||
<strong>Genres</strong>
|
<strong>Genres</strong>
|
||||||
<br />
|
<br />
|
||||||
<span class="item" v-for="genre in details.genres">{{genre}}</span>
|
<span v-for="genre in details.genres">{{genre}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="items">
|
||||||
<strong>Styles</strong>
|
<strong>Styles</strong>
|
||||||
<br />
|
<br />
|
||||||
<span class="item" v-for="style in details.styles">{{style}}</span>
|
<span v-for="style in details.styles">{{style}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
@ -230,4 +230,3 @@
|
||||||
}
|
}
|
||||||
}).mount('#app')
|
}).mount('#app')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1,192 +0,0 @@
|
||||||
<div class="container" id="app">
|
|
||||||
<form method="POST" @submit="add">
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-12-mobile is-4-desktop">
|
|
||||||
<div class="has-text-centered">
|
|
||||||
<img src="<%= page.values.thumb %>" alt="Miniature" />
|
|
||||||
<hr />
|
|
||||||
<img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<ol>
|
|
||||||
<li v-for="track in album.tracklist">{{ track.title }} ({{track.duration}})</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
<div class="column is-12-mobile is-8-desktop">
|
|
||||||
<div class="column is-12">
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-12">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="artists">Titre</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="title" name="title" class="input" v-model="album.title" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field" v-for="artist in album.artists">
|
|
||||||
<label class="label" for="artists">Artiste</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="artists" name="artists" class="input" v-model="artist.name" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile is-multiline">
|
|
||||||
<div class="column is-12-mobile is-6-desktop" v-for="genre in album.genres">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="company">Genre</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="genres" name="genres" class="input" v-model="genre" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column is-12-mobile is-6-desktop" v-for="style in album.styles">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="company">Style</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="style" name="style" class="input" v-model="style" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-12-mobile is-6-desktop">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="year">Année</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="year" name="year" class="input" v-model="album.year" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column is-12-mobile is-6-desktop">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="released">Date de sortie</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="released" name="released" class="input" v-model="album.released" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-12-mobile is-6-desktop">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="country">Pays</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="country" name="country" class="input" v-model="album.country" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-12">
|
|
||||||
<span class="label">Codes barres</span>
|
|
||||||
<ol>
|
|
||||||
<li v-for="identifier in album.identifiers">
|
|
||||||
{{identifier.value}} ({{identifier.type}})
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-12">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="country">Notes</label>
|
|
||||||
<div class="control">
|
|
||||||
<textarea id="notes" id="notes" name="notes" class="textarea" rows="8" v-model="album.notes" disabled></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile is-multiline">
|
|
||||||
<div class="column is-12-mobile is-6-desktop" v-for="format in album.formats">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="format">Format</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="format" name="format" class="input" v-model="format.name" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile is-multiline">
|
|
||||||
<div class="column is-12-mobile is-6-desktop" v-for="label in album.labels">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="label">Label</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="label" name="label" class="input" v-model="label.name" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile is-multiline">
|
|
||||||
<div class="column is-12-mobile is-6-desktop" v-for="company in album.companies">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="label">Société</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" id="company" name="company" class="input" v-model="company.name" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile is-multiline">
|
|
||||||
<div class="column is-12-mobile">
|
|
||||||
<span class="label">Vidéos</span>
|
|
||||||
<ol>
|
|
||||||
<li v-for="video in album.videos">
|
|
||||||
<a :href="video.uri" target="_blank">{{video.title}}</a>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="columns is-mobile is-multiline">
|
|
||||||
<div class="column is-12-mobile">
|
|
||||||
<span class="label">Artistes</span>
|
|
||||||
<ul>
|
|
||||||
<li v-for="extraartist in album.extraartists">
|
|
||||||
{{extraartist.name}} ({{extraartist.role}})
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="button is-primary is-fullwidth">Ajouter</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const defaultValues = <%- JSON.stringify(page.values) %>;
|
|
||||||
|
|
||||||
Vue.createApp({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
album: defaultValues,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
add(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
axios.post('/api/v1/albums', this.album)
|
|
||||||
.then(() => {
|
|
||||||
window.location.href = '/ma-collection';
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).mount('#app')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue