{WIP} Mise en place des thèmes clair et sombre
This commit is contained in:
parent
118586be47
commit
0893e07852
10 changed files with 96 additions and 83 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - My Music Library <% } %></title>
|
||||
|
||||
<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">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
|
||||
<link href="/css/main.css" rel="stylesheet" />
|
||||
|
||||
|
||||
<script src="/libs/axios/axios.min.js"></script>
|
||||
<script src="/libs/vue/vue.global.prod.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Fonction permettant d'afficher un message dans un toastr
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
if ( message ) {
|
||||
x.getElementsByTagName("SPAN")[0].innerHTML = message;
|
||||
}
|
||||
|
||||
|
||||
x.className = `${x.className} show`;
|
||||
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
|
||||
};
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
*/
|
||||
function hideToastr() {
|
||||
let x = document.getElementById("toastr");
|
||||
|
||||
|
||||
x.className = x.className.replace("show", "");
|
||||
x.getElementsByTagName("SPAN")[0].innerHTML = "";
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
* Fonction permettant de récupérer la valeur d'un cookie
|
||||
* @param {String} cname
|
||||
* @param {String} defaultValue
|
||||
*
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
function getCookie(cname, defaultValue = 'false') {
|
||||
|
|
@ -101,12 +101,12 @@
|
|||
*/
|
||||
function switchAriaTheme() {
|
||||
let body = document.body;
|
||||
|
||||
|
||||
body.classList.toggle("is-accessible");
|
||||
|
||||
setCookie('ariatheme', body.classList.contains("is-accessible"));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Fonction permettant de switcher de thème clair/sombre
|
||||
* @param {Object} e
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
el.addEventListener('click', () => {
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
});
|
||||
|
|
@ -163,20 +163,20 @@
|
|||
<img src="/img/logo.png" alt="Logo My Music Library">
|
||||
<span>My Music Library</span>
|
||||
</a>
|
||||
|
||||
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="navbar" class="navbar-menu">
|
||||
<% if ( user ) { %>
|
||||
<div class="navbar-start">
|
||||
<div class="navbar-item">
|
||||
<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>
|
||||
<span>
|
||||
Ajouter un album
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="/nous-contacter">
|
||||
Nous contacter
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<%= user.username %>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/ma-collection">
|
||||
Ma collection
|
||||
|
|
@ -217,11 +217,11 @@
|
|||
</div>
|
||||
<div class="navbar-item">
|
||||
<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>
|
||||
</button>
|
||||
<% if ( !user ) { %>
|
||||
<a class="button is-link" href="/connexion">
|
||||
<a class="button is-primary" href="/connexion">
|
||||
<strong>Connexion</strong>
|
||||
</a>
|
||||
<% } else { %>
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
<div class="body">
|
||||
<%= page.failureFlash %>
|
||||
</div>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<%
|
||||
if (error && error.length > 0) {
|
||||
for( let i = 0 ; i < error.length ; i += 1 ) {
|
||||
|
|
@ -262,11 +262,11 @@
|
|||
</div>
|
||||
<%
|
||||
}
|
||||
}
|
||||
}
|
||||
%>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
|
||||
<%- include(viewname) %>
|
||||
|
||||
<footer class="footer layout-hero">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<label for="q">Nom de l'album ou code barre</label>
|
||||
<div class="field has-addons">
|
||||
<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-spin animate-spin" v-if="loading"></i>
|
||||
</button>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 list">
|
||||
<div class="item" v-if="!loading" v-for="item in items">
|
||||
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</span>
|
||||
<br />
|
||||
<span>
|
||||
<strong>Genre : </strong>
|
||||
<strong>Genre : </strong>
|
||||
<template v-for="(genre, index) in item.genre">
|
||||
{{ genre }}<template v-if="index < item.genre.length - 1">, </template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="field">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" name="password" id="password" placeholder="********">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="text-right mt-10">
|
||||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Connexion</button>
|
||||
|
||||
<button type="submit" class="button is-primary">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -6,11 +6,11 @@
|
|||
<div class="field">
|
||||
<label for="username">Nom d'utilisateur</label>
|
||||
<input type="text" name="username" id="username" placeholder="ex : darkou">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" name="password" id="password" placeholder="********">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="text-right mt-10">
|
||||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Inscription</button>
|
||||
|
||||
<button type="submit" class="button is-primary">Inscription</button>
|
||||
</form>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue