dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Some fixes on css

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 08:41:30 +01:00
parent e2f4ddeb5a
commit c02d5e9ebd
12 changed files with 152 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -6,7 +6,7 @@
"start": "node ./dist/bin/www", "start": "node ./dist/bin/www",
"run:all": "npm-run-all build sass start", "run:all": "npm-run-all build sass start",
"watch": "nodemon -e js,scss", "watch": "nodemon -e js,scss",
"sass": "npx sass sass/index.scss public/css/main.css -s compressed", "sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
"prebuild": "rimraf dist", "prebuild": "rimraf dist",
"build": "babel ./src --out-dir dist --copy-files", "build": "babel ./src --out-dir dist --copy-files",
"test": "jest", "test": "jest",

33
sass/ajouter-un-album.scss
View file

@ -8,40 +8,7 @@
margin-top: 2rem; margin-top: 2rem;
.item{ .item{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
@include respond-to("large") {
&:nth-child(2n) {
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 {
font-weight: 800;
font-size: 1.4rem;
}
.grid {
margin-top: 0.75rem;
}
img { img {
border: 2px solid #4a4a4a;
cursor: pointer; cursor: pointer;
} }
} }

15
sass/global.scss
View file

@ -13,17 +13,6 @@
font-style: normal; font-style: normal;
} }
@font-face {
font-family: 'icon';
src: url('/font/icon.eot?52730206');
src: url('/font/icon.eot?52730206#iefix') format('embedded-opentype'),
url('/font/icon.woff?52730206') format('woff'),
url('/font/icon.ttf?52730206') format('truetype'),
url('/font/icon.svg?52730206#icon') format('svg');
font-weight: normal;
font-style: normal;
}
html { html {
min-height: 100vh; min-height: 100vh;
@ -45,6 +34,10 @@ html {
color: #485fc7; color: #485fc7;
cursor: pointer; cursor: pointer;
} }
h1 {
margin-top: 2rem;
}
} }
} }

1
sass/home.scss
View file

@ -1,6 +1,5 @@
.home { .home {
.header { .header {
margin-bottom: 3.25rem;
@include respond-to("small-up") { @include respond-to("small-up") {
height: 30vh; height: 30vh;
background-image: url('/header.jpg'); background-image: url('/header.jpg');

60
sass/icons.scss
View file

@ -1,6 +1,56 @@
.icon { @font-face {
font-family: "icon"; font-family: 'icon';
font-style: normal; src: url('/font/icon.eot?80770511');
font-weight: normal; src: url('/font/icon.eot?80770511#iefix') format('embedded-opentype'),
text-decoration: inherit; url('/font/icon.woff2?80770511') format('woff2'),
url('/font/icon.woff?80770511') format('woff'),
url('/font/icon.ttf?80770511') format('truetype'),
url('/font/icon.svg?80770511#icon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "icon";
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-plus:before { content: '\e800'; } /* '' */
.icon-user:before { content: '\e801'; } /* '' */
.icon-search:before { content: '\e802'; } /* '' */
.icon-mail:before { content: '\e803'; } /* '' */
.icon-link:before { content: '\e804'; } /* '' */
.icon-spin:before { content: '\e839'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */
.animate-spin {
animation: spin 2s infinite linear;
display: inline-block;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
} }

1
sass/index.scss
View file

@ -35,6 +35,7 @@
@import './flash'; @import './flash';
@import './pagination'; @import './pagination';
@import './icons'; @import './icons';
@import './list';
@import './error'; @import './error';
@import './home'; @import './home';

42
sass/list.scss Normal file
View file

@ -0,0 +1,42 @@
.list {
margin-top: 2rem;
.item{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
@include respond-to("medium") {
&:nth-child(2n) {
background-color: #fafafa;
}
}
@include respond-to("medium-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 {
font-weight: 800;
font-size: 1.4rem;
}
.grid {
margin-top: 0.75rem;
}
img {
border: 2px solid #4a4a4a;
max-width: 90%;
}
}
}

20
sass/ma-collection.scss
View file

@ -24,18 +24,8 @@
} }
.list{ .list{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
&:nth-child(2n) {
background-color: #fafafa;
}
.title { .title {
font-weight: 800; .icon-trash {
font-size: 1.4rem;
.icon {
cursor: pointer; cursor: pointer;
color: #f14668; color: #f14668;
@ -44,14 +34,6 @@
} }
} }
} }
.grid {
margin-top: 0.75rem;
}
img {
border: 2px solid #4a4a4a;
}
} }
.total { .total {

12
views/index.ejs
View file

@ -73,9 +73,7 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a class="button is-link" href="/ajouter-un-album"> <a class="button is-link" href="/ajouter-un-album">
<span class="icon"> <i class="icon-plus"></i>
&#xe800;
</span>
<span> <span>
Ajouter un album Ajouter un album
</span> </span>
@ -92,9 +90,7 @@
<% if ( user ) { %> <% if ( user ) { %>
<div class="navbar-item has-dropdown"> <div class="navbar-item has-dropdown">
<a class="navbar-link"> <a class="navbar-link">
<span class="icon"> <i class="icon-user"></i>
&#xe801;
</span>
<span> <span>
<%= user.username %> <%= user.username %>
</span> </span>
@ -160,9 +156,9 @@
<footer class="footer layout-hero"> <footer class="footer layout-hero">
<p> <p>
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon">&#xe804;</i></a>. <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon-link"></i></a>.
Fait avec ❤ à Bordeaux. Fait avec ❤ à Bordeaux.
Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon">&#xe804;</i></a>. Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>.
</p> </p>
</footer> </footer>
</body> </body>

11
views/pages/ajouter-un-album.ejs
View file

@ -1,18 +1,19 @@
<section class="layout-maxed ajouter-un-album" id="app"> <main class="layout-maxed ajouter-un-album" id="app">
<h1>Ajouter un album</h1>
<div class="grid sm:grid-cols-2"> <div class="grid sm:grid-cols-2">
<div> <div>
<form @submit="search"> <form @submit="search">
<div class="field has-addons"> <div class="field has-addons">
<input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)" autofocus> <input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)" autofocus>
<button class="button is-link" :disabled="loading"> <button class="button is-link" :disabled="loading">
<span class="icon"> <i class="icon-search" v-if="!loading"></i>
&#xe802; <i class="icon-spin animate-spin" v-if="loading"></i>
</span>
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 list"> <div class="grid grid-cols-1 lg:grid-cols-2 list">
<div class="item" 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>
@ -149,7 +150,7 @@
</footer> </footer>
</div> </div>
</div> </div>
</section> </main>
<script> <script>
Vue.createApp({ Vue.createApp({

8
views/pages/home.ejs
View file

@ -9,7 +9,7 @@
<p class="text-justify"> <p class="text-justify">
<strong>My Music Library</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où. <strong>My Music Library</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
<br /> <br />
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon">&#xe804;</i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr <i class="icon">&#xe804;</i></a>. Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr <i class="icon-link"></i></a>.
</p> </p>
<h2> <h2>
Pourquoi utiliser My Music Library ? Pourquoi utiliser My Music Library ?
@ -25,9 +25,9 @@
<p class="text-justify"> <p class="text-justify">
<strong>My Music Library</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔). <strong>My Music Library</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
<ul> <ul>
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon">&#xe804;</i></a>.</li> <li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon-link"></i></a>.</li>
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon">&#xe804;</i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon">&#xe804;</i></a>.</li> <li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon-link"></i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon-link"></i></a>.</li>
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon">&#xe804;</i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon">&#xe804;</i></a>.</li> <li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon-link"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon-link"></i></a>.</li>
</ul> </ul>
</p> </p>
</main> </main>

67
views/pages/mon-compte/ma-collection.ejs
View file

@ -1,4 +1,5 @@
<section class="layout-maxed ma-collection" id="app"> <main class="layout-maxed ma-collection" id="app">
<h1>Ma collection</h1>
<div class="filters"> <div class="filters">
<div class="field"> <div class="field">
<label for="artist">Artiste</label> <label for="artist">Artiste</label>
@ -36,40 +37,40 @@
</select> </select>
</div> </div>
</div> </div>
<div class="list" v-if="!loading" v-for="item in items"> <div class="grid grid-cols-1 md:grid-cols-2 list">
<span class="title"> <div class="item" v-if="!loading" v-for="item in items">
{{ item.artists_sort}} - {{ item.title }} <span class="title">
<span class="icon" @click="showConfirmDelete(item._id)"> {{ item.artists_sort}} - {{ item.title }}
&#xf1f8; <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
</span> </span>
</span> <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" />
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/> </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> <br />
<br /> <span><strong>Pays :</strong> {{ item.country }}</span>
<span><strong>Pays :</strong> {{ item.country }}</span> <br />
<br /> <span>
<span> <strong>Format : </strong>
<strong>Format : </strong> <span v-for="(format, index) in item.formats">
<span v-for="(format, index) in item.formats"> {{ format.name }}
{{ format.name }} <template v-if="format.descriptions">
<template v-if="format.descriptions"> (<template v-for="(description, j) in format.descriptions">
(<template v-for="(description, j) in format.descriptions"> {{description}}<template v-if="j < format.descriptions.length - 1">, </template>
{{description}}<template v-if="j < format.descriptions.length - 1">, </template> </template>)
</template>) </template>
</template> <template v-if="index < item.formats.length - 1">, </template>
<template v-if="index < item.formats.length - 1">, </template> </span>
</span> </span>
</span> <br />
<br /> <span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
<span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span> <br />
<br /> <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
<span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="total"> <div class="total">
<strong>Nombre total d'éléments : </strong>{{total}} <strong>Nombre total d'éléments : </strong>{{total}}
@ -106,7 +107,7 @@
</footer> </footer>
</div> </div>
</div> </div>
</section> </main>
<script> <script>
Vue.createApp({ Vue.createApp({