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

issue/19 #20

Merged
dbroqua merged 16 commits from issue/19 into master 2022-03-01 16:09:47 +01:00
Conversation 0 Commits 16 Files changed 35 +148 -126
21 changed files with 148 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 369123d050 - Show all commits

30
sass/box.scss Normal file
View file

@ -0,0 +1,30 @@
.box {
background-color: var(--form-bg-color);
border-radius: 6px;
box-shadow: var(--form-box-color) 0px 3px 6px 0px;
color: var(--font-color);
display: block;
padding: 1.25rem;
width: calc(100% - 2rem);
margin: auto;
@include transition() {}
@include respond-to("small-up") {
width: 65%;
}
@include respond-to("medium-up") {
width: 35%;
}
h1 {
margin-top: 0;
}
input {
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
}
button {
margin-top: 2rem;
}
}

1
sass/button.scss
View file

@ -12,6 +12,7 @@
background-color: var(--default-color); background-color: var(--default-color);
border-color: var(--default-hl-color); border-color: var(--default-hl-color);
border-radius: 0.375rem; border-radius: 0.375rem;
@include transition() {}
&.is-danger { &.is-danger {
background-color: var(--danger-bg-color); background-color: var(--danger-bg-color);

53
sass/colors.scss Normal file
View file

@ -0,0 +1,53 @@
:root {
/* Couleurs globales */
--primary-bg-color: rgb(136, 192, 208);
--primary-bg-hl-color: rgb(121, 184, 202);
--primary-font-color: rgb(59, 66, 82);
--danger-bg-color: rgb(191, 97, 106);
--danger-bg-hl-color: rgb(176, 89, 100);
--danger-font-color: rgb(4, 4, 4);
/* Couleurs du thème */
--default-color: rgb(255, 255, 255);
--bg-color: rgb(242, 244, 248);
--font-color: rgb(76, 86, 106);
--footer-color: rgb(251, 251, 252);
--link-colink-color: rgb(59, 66, 82);
--link-hover-color: rgb(76, 86, 106);
--input-color: rgb(76, 86, 106);
--input-active-color: rgb(229, 233, 240);
--navbar-color: rgb(242, 244, 248);
--form-bg-color: rgb(255, 255, 255);
--form-box-color: rgba(184, 194, 215, 0.35);
--border-color: rgb(229, 233, 240);
--pagination-text-color: rgb(76, 86, 106);
--pagination-border-color: rgb(76, 86, 106);
--pagination-text-hover-color: rgb(115, 151, 186);
--pagination-border-hover-color: rgb(115, 151, 186);
}
[data-theme="dark"] {
--default-color: rgb(76, 86, 106);
--bg-color: rgb(36, 41, 51);
--font-color: rgb(236, 239, 244);
--footer-color: rgb(59, 66, 82);
--link-color: rgb(171, 185, 207);
--link-hover-color: rgb(236, 239, 244);
--input-color: rgb(236, 239, 244);
--input-active-color: rgb(36, 41, 51);
--navbar-color: rgb(59, 66, 82);
--form-bg-color: rgb(46, 52, 64);
--form-box-color: rgba(15, 17, 21, 0.2);
--border-color: rgb(59, 66, 82);
--pagination-text-color: rgb(236, 239, 244);
--pagination-border-color: rgb(76, 86, 106);
--pagination-text-hover-color: rgb(115, 151, 186);
--pagination-border-hover-color: rgb(115, 151, 186);
}

18
sass/connexion.scss
View file

@ -1,18 +0,0 @@
.connexion,
.inscription {
background-color: var(--navbar-color);
border-radius: 6px;
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
color: var(--font-color);
display: block;
padding: 1.25rem;
width: calc(100% - 2rem);
margin: auto;
@include respond-to("small-up") {
width: 65%;
}
@include respond-to("medium-up") {
width: 35%;
}
}

3
sass/flash.scss
View file

@ -4,9 +4,10 @@
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02); box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
color: var(--default-color); color: var(--default-color);
display: block; display: block;
padding: 1.25rem; padding: 1.25rem;
width: calc(100% - 6rem); width: calc(100% - 6rem);
margin: 2rem auto; margin: 2rem auto;
@include transition() {}
.header { .header {
font-weight: 800; font-weight: 800;

6
sass/forms.scss
View file

@ -27,15 +27,14 @@
textarea, textarea,
select { select {
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
background-color: var(--default-color); background-color: var(--default-color);
border: 1px solid transparent !important; border: 1px solid transparent !important;
color: var(--input-color); color: var(--input-color);
@include transition() {}
&:focus-visible { &:focus-visible {
// border: 1px solid var(--font-color) !important;
outline: unset; outline: unset;
border-color: var(--input-active-color) !important; border-color: var(--input-active-color) !important;
} }
@ -81,6 +80,7 @@
right: 0; right: 0;
top: 0; top: 0;
transition: .4s; transition: .4s;
@include transition() {}
} }
.slider:before { .slider:before {
@ -106,12 +106,14 @@
input:checked + .slider { input:checked + .slider {
background-color: var(--primary-bg-color); background-color: var(--primary-bg-color);
@include transition() {}
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(26px); transform: translateX(26px);
content: '\f186'; content: '\f186';
background-color: var(--input-active-color); background-color: var(--input-active-color);
@include transition() {}
} }
.slider.round { .slider.round {

49
sass/global.scss
View file

@ -10,6 +10,7 @@ html {
font-weight: 400; font-weight: 400;
min-height: 100vh; min-height: 100vh;
color: var(--font-color); color: var(--font-color);
@include transition() {}
&.is-accessible { &.is-accessible {
font-family: 'lucioleregular'; font-family: 'lucioleregular';
@ -19,11 +20,13 @@ html {
margin-top: auto; margin-top: auto;
padding: 2rem 0.7rem 1.5rem; padding: 2rem 0.7rem 1.5rem;
background-color: var(--footer-color); background-color: var(--footer-color);
@include transition() {}
} }
a { a {
color: var(--link-color); color: var(--link-color);
cursor: pointer; cursor: pointer;
@include transition() {}
&:hover { &:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
@ -53,50 +56,4 @@ html {
.is-hidden { .is-hidden {
display: none; display: none;
}
:root {
/* Couleurs globales */
--primary-bg-color: rgb(136, 192, 208);
--primary-bg-hl-color: rgb(121, 184, 202);
--primary-font-color: rgb(59, 66, 82);
--danger-bg-color: rgb(191, 97, 106);
--danger-bg-hl-color: rgb(176, 89, 100);
--danger-font-color: rgb(4, 4, 4);
/* Couleurs du thème */
--default-color: rgb(255, 255, 255);
--bg-color: rgb(242, 244, 248);
--font-color: rgb(76, 86, 106);
--footer-color: rgb(251, 251, 252);
--link-color: rgb(123, 136, 161);
--link-hover-color: rgb(76, 86, 106);
--input-color: rgb(76, 86, 106);
--input-active-color: rgb(229, 233, 240);
--navbar-color: rgb(242, 244, 248);
--default-hl-color: #dbdbdb;
--secondary-color: #485fc7;
--secondary-hl-color: #3e56c4;
--danger-color: #d73455;
--danger-hl-color: #d70933;
--bg-light-color: #fafafa;
--disabled-color: #7a7a7a;
--heading-color: #292922;
}
[data-theme="dark"] {
--default-color: rgb(76, 86, 106);
--bg-color: rgb(36, 41, 51);
--font-color: rgb(236, 239, 244);
--footer-color: rgb(59, 66, 82);
--link-color: rgb(171, 185, 207);
--link-hover-color: rgb(236, 239, 244);
--input-color: rgb(236, 239, 244);
--input-active-color: rgb(36, 41, 51);
--navbar-color: rgb(59, 66, 82);
} }

7
sass/index.scss
View file

@ -26,6 +26,8 @@
// SPÉCIFIQUE AU SITE // SPÉCIFIQUE AU SITE
@import './fonts'; @import './fonts';
@import './colors';
@import './mixin';
@import './global'; @import './global';
@import './navbar'; @import './navbar';
@import './forms'; @import './forms';
@ -36,10 +38,9 @@
@import './pagination'; @import './pagination';
@import './icons'; @import './icons';
@import './list'; @import './list';
@import './box';
@import './error'; @import './error';
@import './home'; @import './home';
@import './connexion';
@import './ajouter-un-album'; @import './ajouter-un-album';
@import './ma-collection'; @import './ma-collection';
@import './nous-contacter';

13
sass/list.scss
View file

@ -1,26 +1,27 @@
.list { .list {
margin-top: 2rem; margin: 2rem 0;
.item{ .item{
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--default-hl-color); border-bottom: 1px solid var(--border-color);
@include transition() {}
@include respond-to("medium") { @include respond-to("medium") {
&:nth-child(2n) { &:nth-child(2n) {
background-color: var(--bg-light-color); background-color: var(--default-color);
} }
} }
@include respond-to("medium-up") { @include respond-to("medium-up") {
border-left: 1px solid var(--default-hl-color); border-left: 1px solid var(--border-color);
&:first-child, &:first-child,
&:nth-child(2) { &:nth-child(2) {
border-top: 1px solid var(--default-hl-color); border-top: 1px solid var(--border-color);
} }
&:nth-child(2n), &:nth-child(2n),
&:last-child { &:last-child {
border-right: 1px solid var(--default-hl-color); border-right: 1px solid var(--border-color);
margin-right: -1px; margin-right: -1px;
} }
} }

1
sass/ma-collection.scss
View file

@ -28,6 +28,7 @@
.icon-trash { .icon-trash {
cursor: pointer; cursor: pointer;
color: var(--danger-bg-color); color: var(--danger-bg-color);
@include transition() {}
&:hover { &:hover {
color: var(--danger-bg-hl-color); color: var(--danger-bg-hl-color);

4
sass/mixin.scss Normal file
View file

@ -0,0 +1,4 @@
@mixin transition() {
transition: background-color 200ms ease-in 0s, border-color 200ms ease-in 0s, box-shadow 200ms ease-in 0s, color 200ms ease-in 0s;
@content;
}

9
sass/modal.scss
View file

@ -46,20 +46,22 @@
header, header,
footer { footer {
align-items: center; align-items: center;
background-color: var(--bg-light-color); background-color: var(--navbar-color);
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;
padding: 0.75rem; padding: 0.75rem;
position: relative; position: relative;
@include transition() {}
} }
header { header {
border-bottom: 1px solid var(--default-hl-color); border-bottom: 1px solid var(--border-color);
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
justify-content: space-between; justify-content: space-between;
font-size: 1.5rem; font-size: 1.5rem;
@include transition() {}
button { button {
user-select: none; user-select: none;
@ -108,11 +110,12 @@
flex-shrink: 1; flex-shrink: 1;
overflow: auto; overflow: auto;
padding: 20px; padding: 20px;
@include transition() {}
} }
footer { footer {
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-top: 1px solid var(--default-hl-color); border-top: 1px solid var(--border-color);
.button:not(:last-child) { .button:not(:last-child) {
margin-right: .5em; margin-right: .5em;

7
sass/navbar.scss
View file

@ -8,8 +8,7 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
@include transition() {}
@include respond-to("medium-up") { @include respond-to("medium-up") {
min-height: 3.25rem; min-height: 3.25rem;
@ -37,6 +36,7 @@
font-weight: 600; font-weight: 600;
line-height: 1.125; line-height: 1.125;
margin-left: .5rem !important; margin-left: .5rem !important;
@include transition() {}
} }
} }
} }
@ -106,6 +106,7 @@
flex-shrink: 0; flex-shrink: 0;
color: var(--font-color); color: var(--font-color);
display: block; display: block;
@include transition() {}
&.has-dropdown { &.has-dropdown {
padding: 0; padding: 0;
@ -157,6 +158,7 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding-right: 2.5em; padding-right: 2.5em;
@include transition() {}
@include respond-to("medium-up") { @include respond-to("medium-up") {
display: flex; display: flex;
@ -200,6 +202,7 @@
background-color: var(--default-color); background-color: var(--default-color);
box-shadow: 0 8px 16px rgba(10,10,10,.1); box-shadow: 0 8px 16px rgba(10,10,10,.1);
padding: .5rem 0; padding: .5rem 0;
@include transition() {}
@include respond-to("medium") { @include respond-to("medium") {
max-height: calc(100vh - 3.25rem); max-height: calc(100vh - 3.25rem);

15
sass/nous-contacter.scss
View file

@ -1,15 +0,0 @@
.nous-contacter {
width: calc(100% - 2rem);
margin: 2rem auto;
@include respond-to("small-up") {
width: 55%;
}
@include respond-to("medium-up") {
width: 35%;
}
button {
margin-top: 2rem;
}
}

36
sass/pagination.scss
View file

@ -25,10 +25,25 @@
position: relative; position: relative;
vertical-align: top; vertical-align: top;
text-decoration: none; text-decoration: none;
user-select: none;
text-align: center;
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: var(--pagination-border-color);
color: var(--pagination-text-color);
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
white-space: nowrap;
margin-bottom: 0;
margin-top: 0;
@include transition() {}
&:hover { &:hover {
border-color: var(--font-color); border-color: var(--pagination-border-hover-color);
color: var(--font-color); color: var(--pagination-text-hover-color);
} }
&.is-disabled { &.is-disabled {
@ -40,23 +55,6 @@
} }
} }
.pagination-previous,
.pagination-next,
.pagination-link {
user-select: none;
text-align: center;
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: var(--primary-bg-color);
color: var(--primary-font-color);
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
white-space: nowrap;
margin-bottom: 0;
margin-top: 0;
}
.pagination-previous { .pagination-previous {
order: 2; order: 2;
} }

2
views/index.ejs
View file

@ -209,7 +209,7 @@
<% } %> <% } %>
<div class="navbar-item apparence"> <div class="navbar-item apparence">
<div class="theme-switch-wrapper"> <div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox"> <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
<input type="checkbox" id="checkbox" /> <input type="checkbox" id="checkbox" />
<div class="slider round"></div> <div class="slider round"></div>
</label> </label>

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

@ -15,12 +15,12 @@
</div> </div>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 list"> <div class="grid grid-cols-1 md: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>
<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;" @click="loadDetails(item.id)"/> <img :src="item.thumb" :alt="item.title" @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>

2
views/pages/connexion.ejs
View file

@ -1,4 +1,4 @@
<div class="connexion"> <div class="box">
<form method="POST"> <form method="POST">
<h1> <h1>
Connexion Connexion

2
views/pages/inscription.ejs
View file

@ -1,4 +1,4 @@
<div class="connexion"> <div class="box">
<form method="POST"> <form method="POST">
<h1> <h1>
Inscription Inscription

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

@ -55,7 +55,7 @@
<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>
@ -70,7 +70,7 @@
<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>
<div class="total"> <div class="total">
<strong>Nombre total d'éléments : </strong>{{total}} <strong>Nombre total d'éléments : </strong>{{total}}
@ -118,7 +118,7 @@
total: 0, total: 0,
page: 1, page: 1,
totalPages: 1, totalPages: 1,
limit: 10, limit: 2,
artist: '', artist: '',
format: '', format: '',
sortOrder: 'artists_sort-asc', sortOrder: 'artists_sort-asc',

6
views/pages/nous-contacter.ejs
View file

@ -1,4 +1,4 @@
<section class="nous-contacter"> <section class="box">
<h1>Nous contacter</h1> <h1>Nous contacter</h1>
<form action="https://formspree.io/f/<%= config.formspreeId %>" method="POST"> <form action="https://formspree.io/f/<%= config.formspreeId %>" method="POST">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
@ -11,12 +11,12 @@
<input type="text" name="name" id="name" /> <input type="text" name="name" id="name" />
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="message">Message*</label> <label for="message">Message*</label>
<textarea name="message" id="message" rows="6" required ></textarea> <textarea name="message" id="message" rows="6" required ></textarea>
</div> </div>
<button type="submit" class="button is-primary">Envoyer</button> <button type="submit" class="button is-primary">Envoyer</button>
</form> </form>
</section> </section>