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

{WIP} Mise en place des thèmes clair et sombre

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 19:26:52 +01:00
parent 118586be47
commit 0893e07852
10 changed files with 96 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
sass/button.scss
View file

@ -38,12 +38,12 @@
} }
&.is-primary { &.is-primary {
background-color: var(--primary-color); background-color: var(--primary-bg-color);
border-color: transparent; border-color: transparent;
color: var(--default-color); color: var(--primary-font-color);
&:hover { &:hover {
background-color: var(--primary-hl-color); background-color: var(--primary-bg-hl-color);
} }
} }
} }

14
sass/connexion.scss
View file

@ -1,11 +1,11 @@
.connexion, .connexion,
.inscription { .inscription {
background-color: var(--default-color); background-color: var(--navbar-color);
border-radius: 6px; border-radius: 6px;
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(--font-color); color: var(--font-color);
display: block; display: block;
padding: 1.25rem; padding: 1.25rem;
width: calc(100% - 2rem); width: calc(100% - 2rem);
margin: auto; margin: auto;
@ -15,14 +15,4 @@
@include respond-to("medium-up") { @include respond-to("medium-up") {
width: 35%; width: 35%;
} }
button {
background-color: var(--secondary-color);
border-color: transparent;
color: var(--default-color);
&:hover {
background-color: var(--secondary-hl-color);
}
}
} }

31
sass/forms.scss
View file

@ -26,17 +26,18 @@
input, input,
textarea, textarea,
select { select {
border-radius: 0.375rem; border-radius: 4px;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05); 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 var(--default-hl-color) !important; border: 1px solid transparent !important;
color: var(--font-color); color: var(--input-color);
&:focus-visible { &:focus-visible {
border: 1px solid var(--font-color) !important; // border: 1px solid var(--font-color) !important;
outline: unset; outline: unset;
border-color: var(--input-active-color) !important;
} }
} }
@ -53,24 +54,24 @@
.theme-switch-wrapper { .theme-switch-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
em { em {
margin-left: 10px; margin-left: 10px;
font-size: 1rem; font-size: 1rem;
} }
} }
.theme-switch { .theme-switch {
display: inline-block; display: inline-block;
height: 34px; height: 34px;
position: relative; position: relative;
width: 60px; width: 60px;
} }
.theme-switch input { .theme-switch input {
display:none; display:none;
} }
.slider { .slider {
background-color: #ccc; background-color: #ccc;
bottom: 0; bottom: 0;
@ -81,7 +82,7 @@
top: 0; top: 0;
transition: .4s; transition: .4s;
} }
.slider:before { .slider:before {
background-color: #fff; background-color: #fff;
bottom: 4px; bottom: 4px;
@ -102,21 +103,21 @@
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
} }
input:checked + .slider { input:checked + .slider {
background-color: #485fc7; background-color: var(--primary-bg-color);
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(26px); transform: translateX(26px);
content: '\f186'; content: '\f186';
background-color: var(--input-active-color);
} }
.slider.round { .slider.round {
border-radius: 34px; border-radius: 34px;
} }
.slider.round:before { .slider.round:before {
border-radius: 50%; border-radius: 50%;
} }

52
sass/global.scss
View file

@ -9,6 +9,7 @@ html {
font-family: 'open_sansregular'; font-family: 'open_sansregular';
font-weight: 400; font-weight: 400;
min-height: 100vh; min-height: 100vh;
color: var(--font-color);
&.is-accessible { &.is-accessible {
font-family: 'lucioleregular'; font-family: 'lucioleregular';
@ -21,8 +22,21 @@ html {
} }
a { a {
color: var(--secondary-color); color: var(--link-color);
cursor: pointer; cursor: pointer;
&:hover {
color: var(--link-hover-color);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--font-color);
} }
h1 { h1 {
@ -42,36 +56,44 @@ html {
} }
:root { :root {
--default-color: rgb(255, 255, 255);
--bg-color: rgb(242, 244, 248); --bg-color: rgb(242, 244, 248);
--font-color: rgb(76, 86, 106); --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);
--primary-bg-color: rgb(136, 192, 208);
--primary-bg-hl-color: rgb(121, 184, 202);
--primary-font-color: rgb(59, 66, 82);
--default-color: #fff;
--default-hl-color: #dbdbdb; --default-hl-color: #dbdbdb;
--primary-color: #2d7c58;
--primary-hl-color: #267953;
--secondary-color: #485fc7; --secondary-color: #485fc7;
--secondary-hl-color: #3e56c4; --secondary-hl-color: #3e56c4;
--danger-color: #d73455; --danger-color: #d73455;
--danger-hl-color: #d70933; --danger-hl-color: #d70933;
--footer-color: #fafafa;
--bg-light-color: #fafafa; --bg-light-color: #fafafa;
--disabled-color: #7a7a7a; --disabled-color: #7a7a7a;
--heading-color: #292922; --heading-color: #292922;
} }
[data-theme="dark"] { [data-theme="dark"] {
--default-color: rgb(76, 86, 106);
--bg-color: rgb(36, 41, 51); --bg-color: rgb(36, 41, 51);
--font-color: rgb(236, 239, 244); --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);
--primary-bg-color: rgb(136, 192, 208);
--default-color: #fff; --primary-bg-hl-color: rgb(121, 184, 202);
--default-hl-color: #dbdbdb; --primary-font-color: rgb(59, 66, 82);
--primary-color: #2d7c58;
--primary-hl-color: #267953;
--secondary-color: #485fc7;
--secondary-hl-color: #3e56c4;
--danger-color: #692230;
--danger-hl-color: #4e0f1b;
} }

6
sass/navbar.scss
View file

@ -1,6 +1,6 @@
.navbar { .navbar {
min-height: 3.25rem; min-height: 3.25rem;
background-color: var(--bg-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);
position: fixed; position: fixed;
@ -25,8 +25,8 @@
.navbar-item { .navbar-item {
align-items: center; align-items: center;
display: flex; display: flex;
img { img {
max-height: 1.75rem; max-height: 1.75rem;
} }

10
sass/pagination.scss
View file

@ -48,8 +48,8 @@
font-size: 1em; font-size: 1em;
justify-content: center; justify-content: center;
margin: .25rem; margin: .25rem;
border-color: var(--default-hl-color); border-color: var(--primary-bg-color);
color: var(--font-color); color: var(--primary-font-color);
min-width: 2.5em; min-width: 2.5em;
padding-left: .75em; padding-left: .75em;
padding-right: .75em; padding-right: .75em;
@ -66,9 +66,9 @@
.pagination-link { .pagination-link {
&.is-current { &.is-current {
background-color: var(--secondary-color); background-color: var(--primary-bg-color);
border-color: var(--secondary-color); border-color: var(--primary-bg-color);
color: var(--default-color); color: var(--primary-font-color);
} }
} }

40
views/index.ejs
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - My Music Library <% } %></title> <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - My Music Library <% } %></title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@ -13,12 +13,12 @@
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="/css/main.css" rel="stylesheet" /> <link href="/css/main.css" rel="stylesheet" />
<script src="/libs/axios/axios.min.js"></script> <script src="/libs/axios/axios.min.js"></script>
<script src="/libs/vue/vue.global.prod.js"></script> <script src="/libs/vue/vue.global.prod.js"></script>
<script> <script>
/** /**
* Fonction permettant d'afficher un message dans un toastr * Fonction permettant d'afficher un message dans un toastr
@ -29,7 +29,7 @@
if ( message ) { if ( message ) {
x.getElementsByTagName("SPAN")[0].innerHTML = message; x.getElementsByTagName("SPAN")[0].innerHTML = message;
} }
x.className = `${x.className} show`; x.className = `${x.className} show`;
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}; };
@ -39,7 +39,7 @@
*/ */
function hideToastr() { function hideToastr() {
let x = document.getElementById("toastr"); let x = document.getElementById("toastr");
x.className = x.className.replace("show", ""); x.className = x.className.replace("show", "");
x.getElementsByTagName("SPAN")[0].innerHTML = ""; x.getElementsByTagName("SPAN")[0].innerHTML = "";
} }
@ -48,7 +48,7 @@
* Fonction permettant de récupérer la valeur d'un cookie * Fonction permettant de récupérer la valeur d'un cookie
* @param {String} cname * @param {String} cname
* @param {String} defaultValue * @param {String} defaultValue
* *
* @return {String} * @return {String}
*/ */
function getCookie(cname, defaultValue = 'false') { function getCookie(cname, defaultValue = 'false') {
@ -101,12 +101,12 @@
*/ */
function switchAriaTheme() { function switchAriaTheme() {
let body = document.body; let body = document.body;
body.classList.toggle("is-accessible"); body.classList.toggle("is-accessible");
setCookie('ariatheme', body.classList.contains("is-accessible")); setCookie('ariatheme', body.classList.contains("is-accessible"));
} }
/** /**
* Fonction permettant de switcher de thème clair/sombre * Fonction permettant de switcher de thème clair/sombre
* @param {Object} e * @param {Object} e
@ -128,7 +128,7 @@
el.addEventListener('click', () => { el.addEventListener('click', () => {
const target = el.dataset.target; const target = el.dataset.target;
const $target = document.getElementById(target); const $target = document.getElementById(target);
el.classList.toggle('is-active'); el.classList.toggle('is-active');
$target.classList.toggle('is-active'); $target.classList.toggle('is-active');
}); });
@ -163,20 +163,20 @@
<img src="/img/logo.png" alt="Logo My Music Library"> <img src="/img/logo.png" alt="Logo My Music Library">
<span>My Music Library</span> <span>My Music Library</span>
</a> </a>
<a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar"> <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> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navbar" class="navbar-menu"> <div id="navbar" class="navbar-menu">
<% if ( user ) { %> <% if ( user ) { %>
<div class="navbar-start"> <div class="navbar-start">
<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-primary" href="/ajouter-un-album">
<i class="icon-plus"></i> <i class="icon-plus"></i>
<span> <span>
Ajouter un album Ajouter un album
@ -186,7 +186,7 @@
</div> </div>
</div> </div>
<% } %> <% } %>
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item" href="/nous-contacter"> <a class="navbar-item" href="/nous-contacter">
Nous contacter Nous contacter
@ -199,7 +199,7 @@
<%= user.username %> <%= user.username %>
</span> </span>
</a> </a>
<div class="navbar-dropdown"> <div class="navbar-dropdown">
<a class="navbar-item" href="/ma-collection"> <a class="navbar-item" href="/ma-collection">
Ma collection Ma collection
@ -217,11 +217,11 @@
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site"> <button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
<i class="icon-eye"></i> <i class="icon-eye"></i>
</button> </button>
<% if ( !user ) { %> <% if ( !user ) { %>
<a class="button is-link" href="/connexion"> <a class="button is-primary" href="/connexion">
<strong>Connexion</strong> <strong>Connexion</strong>
</a> </a>
<% } else { %> <% } else { %>
@ -249,7 +249,7 @@
<div class="body"> <div class="body">
<%= page.failureFlash %> <%= page.failureFlash %>
</div> </div>
<% } %> <% } %>
<% <%
if (error && error.length > 0) { if (error && error.length > 0) {
for( let i = 0 ; i < error.length ; i += 1 ) { for( let i = 0 ; i < error.length ; i += 1 ) {
@ -262,11 +262,11 @@
</div> </div>
<% <%
} }
} }
%> %>
</div> </div>
<% } %> <% } %>
<%- include(viewname) %> <%- include(viewname) %>
<footer class="footer layout-hero"> <footer class="footer layout-hero">

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

@ -6,7 +6,7 @@
<label for="q">Nom de l'album ou code barre</label> <label for="q">Nom de l'album ou code barre</label>
<div class="field has-addons"> <div class="field has-addons">
<input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus> <input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus>
<button class="button is-link" :disabled="loading" aria-label="Chercher"> <button class="button is-primary" :disabled="loading" aria-label="Chercher">
<i class="icon-search" v-if="!loading"></i> <i class="icon-search" v-if="!loading"></i>
<i class="icon-spin animate-spin" v-if="loading"></i> <i class="icon-spin animate-spin" v-if="loading"></i>
</button> </button>
@ -14,7 +14,7 @@
</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>
@ -35,7 +35,7 @@
</span> </span>
<br /> <br />
<span> <span>
<strong>Genre : </strong> <strong>Genre : </strong>
<template v-for="(genre, index) in item.genre"> <template v-for="(genre, index) in item.genre">
{{ genre }}<template v-if="index < item.genre.length - 1">, </template> {{ genre }}<template v-if="index < item.genre.length - 1">, </template>
</template> </template>

6
views/pages/connexion.ejs
View file

@ -6,7 +6,7 @@
<div class="field"> <div class="field">
<label for="email">Adresse e-mail</label> <label for="email">Adresse e-mail</label>
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr"> <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
</div> </div>
<div class="field"> <div class="field">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
<input type="password" name="password" id="password" placeholder="********"> <input type="password" name="password" id="password" placeholder="********">
@ -15,7 +15,7 @@
<div class="text-right mt-10"> <div class="text-right mt-10">
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p> <p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
</div> </div>
<button type="submit" class="button">Connexion</button> <button type="submit" class="button is-primary">Connexion</button>
</form> </form>
</div> </div>

8
views/pages/inscription.ejs
View file

@ -6,11 +6,11 @@
<div class="field"> <div class="field">
<label for="username">Nom d'utilisateur</label> <label for="username">Nom d'utilisateur</label>
<input type="text" name="username" id="username" placeholder="ex : darkou"> <input type="text" name="username" id="username" placeholder="ex : darkou">
</div> </div>
<div class="field"> <div class="field">
<label for="email">Adresse e-mail</label> <label for="email">Adresse e-mail</label>
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr"> <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
</div> </div>
<div class="field"> <div class="field">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
<input type="password" name="password" id="password" placeholder="********"> <input type="password" name="password" id="password" placeholder="********">
@ -19,7 +19,7 @@
<div class="text-right mt-10"> <div class="text-right mt-10">
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p> <p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
</div> </div>
<button type="submit" class="button">Inscription</button> <button type="submit" class="button is-primary">Inscription</button>
</form> </form>
</div> </div>