diff --git a/sass/colors.scss b/sass/colors.scss index f100c6b..bc54734 100644 --- a/sass/colors.scss +++ b/sass/colors.scss @@ -45,7 +45,7 @@ $pagination-hover-color: rgb(115, 151, 186); --input-font-color: #{$nord3}; --input-color: #{$white}; --input-active-color: #{$nord5}; - + --navbar-color: #{darken($white, 5%)}; --box-bg-color: #F8F9FB; diff --git a/sass/list.scss b/sass/list.scss index 4f2b124..537a60d 100644 --- a/sass/list.scss +++ b/sass/list.scss @@ -30,10 +30,6 @@ border-right: 1px solid var(--border-color); margin-right: -1px; } - - &:hover { - background-color: var(--border-color); - } } .title { @@ -50,4 +46,10 @@ max-width: 90%; } } + + &.hover { + .item:hover { + background-color: var(--border-color); + } + } } \ No newline at end of file diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs index bdebb4e..797bce6 100644 --- a/views/pages/ajouter-un-album.ejs +++ b/views/pages/ajouter-un-album.ejs @@ -15,7 +15,7 @@ </div> </div> - <div class="grid grid-cols-1 md:grid-cols-2 list"> + <div class="grid grid-cols-1 md:grid-cols-2 list hover"> <div class="item" 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"> diff --git a/views/pages/composants.ejs b/views/pages/composants.ejs index dc4f8f2..592662b 100644 --- a/views/pages/composants.ejs +++ b/views/pages/composants.ejs @@ -110,7 +110,7 @@ <p> Se référer à la documentation de <a href="https://www.knacss.com/doc.html#grid" target="_blank" rel="noopener noreferrer">Knacss</a>. </p> - + <h2 id="boutons">Les boutons</h2> <div type="button" class="button">.button</div> <div type="button" class="button is-link">.button.is-link</div> @@ -170,28 +170,28 @@ </pre> <div class="field"> <label for="choix1">choix 1</label> - <input type="radio" id="choix1" name="choix" value="choix1" checked> + <input type="radio" id="choix1" name="choix" value="choix1" checked> <label for="choix2">choix 2</label> <input type="radio" id="choix2" name="choix" value="choix2"> </div> <pre> <div class="field"> <label for="choix1">choix 1</label> - <input type="radio" id="choix1" name="choix" value="choix1" checked> + <input type="radio" id="choix1" name="choix" value="choix1" checked> <label for="choix2">choix 2</label> <input type="radio" id="choix2" name="choix" value="choix2"> </div> </pre> <div class="field"> <label for="checkbox1">choix 1</label> - <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> + <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> <label for="checkbox2">choix 2</label> <input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"> </div> <pre> <div class="field"> <label for="checkbox1">choix 1</label> - <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> + <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> <label for="checkbox2">choix 2</label> <input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"> </div> @@ -243,11 +243,11 @@ <label for="password">Mot de passe</label> <input type="password" name="password" id="password" placeholder="********"> </div> - + <div class="text-right mt-10"> <p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p> </div> - + <button type="submit" class="button is-primary">Connexion</button> </form> </div> @@ -284,9 +284,9 @@ <span></span> </div> <pre> -<button +<button type="button" - class="button is-primary" + class="button is-primary" onclick="showToastr('Ceci est une notification');" > Afficher une notification @@ -318,6 +318,7 @@ <i class="icon-blind">.icon-blind</i> <h2 id="listes">Les listes</h2> + <h3>Liste normale</h3> <div class="grid grid-cols-1 md:grid-cols-2 list"> <div class="item" v-for="item in items"> <span class="title"> @@ -340,6 +341,29 @@ </div> </div> </pre> + <h3>Liste avec effet au hover</h3> + <div class="grid grid-cols-1 md:grid-cols-2 list hover"> + <div class="item" v-for="item in items"> + <span class="title"> + {{ item.title }} + </span> + <div class="grid grid-cols-2 md:grid-cols-4"> + <div> + <img :src="item.thumb" :alt="item.title" /> + </div> + <div class="md:col-span-3"> + {{ item.lorem }} + </div> + </div> + </div> + </div> + <pre> +<div class="grid grid-cols-1 md:grid-cols-2 list hover"> + <div class="item"> + Contenu + </div> +</div> + </pre> <h2 id="paginations">Les paginations</h2> <nav class="pagination" role="navigation" aria-label="Pagination"> diff --git a/views/pages/mon-compte/ma-collection/index.ejs b/views/pages/mon-compte/ma-collection/index.ejs index 970d584..9dd4bbd 100644 --- a/views/pages/mon-compte/ma-collection/index.ejs +++ b/views/pages/mon-compte/ma-collection/index.ejs @@ -43,7 +43,7 @@ </select> </div> </div> - <div class="grid grid-cols-1 md:grid-cols-2 list"> + <div class="grid grid-cols-1 md:grid-cols-2 list hover"> <div class="item" v-if="!loading" v-for="item in items"> <span class="title"> <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>