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

{WIP} Bulma => Knacss

This commit is contained in:
Damien Broqua 2022-02-18 16:53:54 +01:00
parent ff9c3d0113
commit 4c80b6d9f1
9 changed files with 393 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
sass/ajouter-un-album.scss
View File

@ -1,15 +1,44 @@
.ajouter-un-album {
span.item {
margin-right: 0.6rem;
@include respond-to("small") {
display: block;
padding: 0 .75rem;
}
&::after {
content: ",";
.list{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
&:nth-child(2n) {
background-color: #fafafa;
}
&:last-child {
margin-right: 0;
&::after {
content: "";
.title {
font-weight: 800;
font-size: 1.4rem;
}
.grid {
margin-top: 0.75rem;
}
img {
border: 2px solid #4a4a4a;
}
.items {
span {
margin-right: 0.6rem;
&::after {
content: ",";
}
&:last-child {
&::after {
margin-right: 0;
content: "";
}
}
}
}
}

1
sass/button.scss
View File

@ -11,6 +11,7 @@
margin-bottom: .5rem;
background-color: #fff;
border-color: #dbdbdb;
border-radius: 0.375rem;
&.is-danger {
background-color: #f14668;

19
sass/forms.scss
View File

@ -1,24 +1,41 @@
.field {
padding-top: .6rem;
display: flex;
flex-direction: column;
&.has-addons {
display: flex;
justify-content: flex-start;
flex-direction: row;
.button {
margin-bottom: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
label {
font-weight: 800;
}
input {
input,
select {
border-radius: 0.375rem;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
max-width: 100%;
width: 100%;
background-color: #fff;
border: 1px solid #dbdbdb !important;
color: #363636;
&:focus-visible {
border: 1px solid #b9b9b9 !important;
outline: unset;
}
}
}

55
sass/global.scss
View File

File diff suppressed because one or more lines are too long

4
sass/index.scss
View File

@ -33,7 +33,9 @@
@import './modal';
@import './toast';
@import './flash';
@import './pagination';
@import './home';
@import './connexion';
@import './ajouter-un-album';
@import './ajouter-un-album';
@import './ma-collection';

47
sass/ma-collection.scss Normal file
View File

@ -0,0 +1,47 @@
.ma-collection {
.filters {
display: flex;
justify-content: end;
padding: 0.5rem 0;
.field {
padding: 0 0.5rem;
select {
width: auto;
}
@include respond-to("small-up") {
&:last-child {
padding-right: 0;
}
}
}
@include respond-to("small") {
flex-direction: column;
}
}
.list{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
&:nth-child(2n) {
background-color: #fafafa;
}
.title {
font-weight: 800;
font-size: 1.4rem;
}
.grid {
margin-top: 0.75rem;
}
img {
border: 2px solid #4a4a4a;
}
}
}

98
sass/pagination.scss
View File

@ -1,15 +1,85 @@
.pagination-link,
.pagination-link,
.pagination-next,
.pagination-next,
.pagination-previous,
.pagination-previous {
&.is-disabled,
&[disabled] {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
opacity: .5;
}
.pagination {
font-size: 1rem;
align-items: center;
display: flex;
text-align: center;
justify-content: space-between;
margin: 1rem 0;
.pagination-previous,
.pagination-next,
.pagination-link {
align-items: center;
border: 1px solid transparent;
border-radius: .375em;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(.5em - 1px);
padding-left: calc(.75em - 1px);
padding-right: calc(.75em - 1px);
padding-top: calc(.5em - 1px);
position: relative;
vertical-align: top;
text-decoration: none;
&:hover {
border-color: #b5b5b5;
color: #363636;
}
&.is-disabled {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
opacity: .5;
}
}
.pagination-previous,
.pagination-next,
.pagination-link {
user-select: none;
text-align: center;
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: #dbdbdb;
color: #363636;
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
white-space: nowrap;
margin-bottom: 0;
margin-top: 0;
}
.pagination-previous {
order: 2;
}
.pagination-next {
order: 3;
}
.pagination-link {
&.is-current {
background-color: #485fc7;
border-color: #485fc7;
color: #fff;
}
}
.pagination-list {
align-items: center;
display: flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
order: 1;
}
}

99
views/pages/ajouter-un-album/search.ejs
View File

@ -1,4 +1,46 @@
<section class="layout-maxed ajouter-un-album" id="app">
<div class="grid sm:grid-cols-2">
<div>
<form @submit="search">
<div class="field has-addons">
<input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
<button class="button is-link" :disabled="loading">
<span class="icon">
<i class="fas fa-search"></i>
</span>
</button>
</div>
</form>
</div>
</div>
<div>
<div class="list" v-if="!loading" v-for="item in items">
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>
<br />
<span><strong>Pays :</strong> {{ item.country }}</span>
<br />
<span class="items">
<strong>Format :</strong> <span v-for="format in item.format">{{ format }}</span>
</span>
<br />
<span class="items">
<strong>Genre :</strong> <span v-for="genre in item.genre">{{ genre }}</span>
</span>
<br />
<span class="items">
<strong>Style :</strong> <span v-for="style in item.style">{{ style }}</span>
</span>
</div>
</div>
</div>
</div>
<div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
<div class="modal-background"></div>
<div class="modal-card">
@ -92,63 +134,6 @@
</footer>
</div>
</div>
<div class="layout-hero">
<form @submit="search">
<div class="field has-addons">
<input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
<button class="button is-link" :disabled="loading">
<span class="icon">
<i class="fas fa-search"></i>
</span>
</button>
</div>
</form>
<table class="mt-20">
<thead>
<tr>
<th>Pochette</th>
<th>Titre</th>
<th>Pays</th>
<th>Année</th>
<th>Format</th>
<th>Genres</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr v-if="loading">
<td colspan="7">
Chargement en cours…
</td>
</tr>
<tr v-for="item in items">
<td>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
</td>
<td>
<a @click="loadDetails(item.id)">{{ item.title }}</a>
</td>
<td>{{ item.year }}</td>
<td>{{ item.country }}</td>
<td>
<ul>
<li v-for="format in item.format">{{ format }}</li>
</ul>
</td>
<td>
<ul>
<li v-for="genre in item.genre">{{ genre }}</li>
</ul>
</td>
<td>
<ul>
<li v-for="style in item.style">{{ style }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<script>

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

@ -1,119 +1,60 @@
<div class="container" id="app">
<table class="table is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th>Pochette</th>
<th>
<div class="field">
<label class="label">
<span class="icon-text">
<span class="icon has-text-info">
<i v-if="sort !== 'artists_sort'" class="fa-solid fa-sort" @click="changeSort('artists_sort', 'asc')"></i>
<i v-if="sort === 'artists_sort' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('artists_sort', 'asc')"></i>
<i v-if="sort === 'artists_sort' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('artists_sort', 'desc')"></i>
</span>
<span>Artiste</span>
</span>
</label>
<div class="control">
<div class="select is-small">
<select v-model="artist" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.artists.length; i += 1 ) {
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
}
%>
</select>
</div>
</div>
</div>
</th>
<th>Titre</th>
<th>
<span class="icon-text">
<span class="icon has-text-info">
<i v-if="sort !== 'year'" class="fa-solid fa-sort" @click="changeSort('year', 'asc')"></i>
<i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('year', 'asc')"></i>
<i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('year', 'desc')"></i>
</span>
<span>Année</span>
</span>
</th>
<th>
<span class="icon-text">
<span class="icon has-text-info">
<i v-if="sort !== 'country'" class="fa-solid fa-sort" @click="changeSort('country', 'asc')"></i>
<i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('country', 'asc')"></i>
<i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('country', 'desc')"></i>
</span>
<span>Pays</span>
</span>
</th>
<th>
<div class="field">
<label class="label">
<span class="icon-text">
<span class="icon has-text-info">
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></i>
<i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('formats.name', 'asc')"></i>
<i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
</span>
<span>Format</span>
</span>
</label>
<div class="control">
<div class="select is-small">
<select v-model="format" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.formats.length; i += 1 ) {
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
}
%>
</select>
</div>
</div>
</div>
</th>
<th>Genres</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr v-if="loading">
<td colspan="8">
Chargement en cours…
</td>
</tr>
<tr v-if="!loading" v-for="item in items">
<td>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
</td>
<td>{{ item.artists_sort }}</td>
<td>
<a :href="'/ma-collection/' + item._id">{{ item.title }}</a>
</td>
<td>{{ item.year }}</td>
<td>{{ item.country }}</td>
<td>
<ul>
<li v-for="format in item.formats">{{ format.name }}</li>
</ul>
</td>
<td>
<ul>
<li v-for="genre in item.genres">{{ genre }}</li>
</ul>
</td>
<td>
<ul>
<li v-for="style in item.styles">{{ style }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
<section class="layout-maxed ma-collection" id="app">
<div class="filters">
<div class="field">
<label for="artist">Artiste</label>
<select id="artist" v-model="artist" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.artists.length; i += 1 ) {
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
}
%>
</select>
</div>
<div class="field">
<label for="format">Format</label>
<select id="format" v-model="format" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.formats.length; i += 1 ) {
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
}
%>
</select>
</div>
<div class="field">
<label for="sortOrder">Trier par</label>
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
<option value="artists_sort-asc">Artiste (A-Z)</option>
<option value="artists_sort-desc">Artiste (Z-A)</option>
<option value="year-asc">Année (A-Z)</option>
<option value="year-desc">Année (Z-A)</option>
<option value="country-asc">Pays (A-Z)</option>
<option value="country-desc">Pays (Z-A)</option>
<option value="formats.name-asc">Format (A-Z)</option>
<option value="formats.name-desc">Format (Z-A)</option>
</select>
</div>
</div>
<div class="list" v-if="!loading" v-for="item in items">
<span class="title">{{ item.artists_sort }} {{ item.title }}</span>
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>
<br />
<span><strong>Pays :</strong> {{ item.country }}</span>
<br />
<span class="item"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</span></span>
<br />
<span class="item"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span>
<br />
<span class="item"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span>
</div>
</div>
</div>
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
<a class="pagination-next" :class="{'is-disabled': (page*limit) >= total}" @click="next">Suivant</a>
@ -121,27 +62,67 @@
<li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
</li>
<!-- <li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">86</a>
</li> -->
</ul>
</ul>
</nav>
</div>
<!-- <table>
<thead>
<tr>
<th>Pochette</th>
<th>
</th>
<th>Titre</th>
<th>
<div class="field">
<span @click="changeSort('year', sort !== 'year' || order === 'desc' ? 'asc' : 'desc')">
<span class="icon">
<i v-if="sort !== 'year'" class="fa-solid fa-sort"></i>
<i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down"></i>
<i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up"></i>
</span>
<span>Année</span>
</span>
</div>
</th>
<th>
<div class="field">
<span @click="changeSort('country', sort !== 'country' || order === 'desc' ? 'asc' : 'desc')">
<span class="icon">
<i v-if="sort !== 'country'" class="fa-solid fa-sort"></i>
<i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down"></i>
<i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up"></i>
</span>
<span>Pays</span>
</span>
</div>
</th>
<th>
<div class="field">
<span @click="changeSort('formats.name', sort !== 'formats.name' || order === 'desc' ? 'asc' : 'desc')">
<span class="icon">
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort"></i>
<i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down"></i>
<i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up"></i>
</span>
<span>Artiste</span>
</span>
<select v-model="format" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.formats.length; i += 1 ) {
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
}
%>
</select>
</div>
</th>
<th>Genres</th>
<th>Styles</th>
</tr>
</thead>
</table> -->
</section>
<script>
Vue.createApp({
@ -152,9 +133,10 @@
total: 0,
page: 1,
totalPages: 1,
limit: 5,
limit: 10,
artist: '',
format: '',
sortOrder: 'artists_sort-asc',
sort: 'artists_sort',
order: 'asc',
}
@ -207,7 +189,9 @@
this.fetch();
},
changeSort(sort, order) {
changeSort() {
console.log('TEST:', this.sortOrder);
const [sort,order] = this.sortOrder.split('-');
this.sort = sort;
this.order = order;
this.page = 1;