Ajout d'une page permettant de visualiser les composants

sass/button.scss

@@ -7,17 +7,19 @@
     padding-top: calc(0.5em - 1px);
     text-align: center;
     white-space: nowrap;
-    border-width: 1px;
+    border: 1px solid transparent;
     margin-bottom: .5rem;
-    background-color: var(--default-color);
+    background-color: $nord9;
-    border-color: var(--default-hl-color);
     border-radius: 0.375rem;
     color: $button-font-color;
     @include transition() {}
 
+    &:hover {
+        background-color: darken($nord9, $hoverAmount);
+    }
+
     &.is-danger {
         background-color: $danger-color;
-        border-color: transparent;
         color: $button-alternate-color;
 
         &:hover {
@@ -27,7 +29,6 @@
 
     &.is-primary {
         background-color: $primary-color;
-        border-color: transparent;
 
         &:hover {
             background-color: $primary-color-hl;
@@ -36,7 +37,6 @@
 
     &.is-warning {
         background-color: $warning-color;
-        border-color: transparent;
 
         &:hover {
             background-color: $warning-color-hl;
@@ -50,4 +50,14 @@
             background-color: $success-color-hl;
         }
     }
+
+    &.is-link {
+        background-color: transparent;
+        border-color: $nord9;
+        color: $nord9;
+
+        &:hover {
+            border-color: darken($nord9, $hoverAmount);
+        }
+    }
 }

sass/colors.scss

@@ -31,6 +31,7 @@ $success-color-hl: darken($success-color, $hoverAmount);
 
 $button-font-color: $nord1;
 $button-alternate-color: #01103C;
+
 $pagination-border-color: $nord3;
 $pagination-hover-color: rgb(115, 151, 186);
 

sass/error.scss

@@ -1,10 +1,4 @@
 .error {
     min-height: calc(100vh - 3.25rem - 100px);
     padding-top: 4rem;
-
-    pre {
-        padding: 0.75rem;
-        border: 1px dotted #cecccc;
-        background: #f9f9f9;
-    }
 }

sass/flash.scss

@@ -1,13 +1,12 @@
 .flash {
-    background-color: var(--danger-color);
+    background-color: $danger-color;
     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: var(--box-shadow-color) 0px 3px 6px 0px;
-    color: var(--default-color);
+    color: $button-alternate-color;
     display: block;
     padding: 1.25rem;
     width: calc(100% - 6rem);
     margin: 2rem auto;
-    @include transition() {}
 
     .header {
         font-weight: 800;

sass/global.scss

@@ -49,6 +49,13 @@ html {
         h1 {
             margin-top: 2rem;
         }
+
+        pre {
+            margin: 0.75rem 0;
+            padding: 0.75rem;
+            border: 1px dotted #cecccc;
+            background: #f9f9f9;
+        }
     }
 }
 

sass/toast.scss

@@ -9,8 +9,9 @@
     font-size: 17px;
 
     padding: 1.25rem 2.5rem 1.25rem 1.5rem;
-    background-color: var(--danger-color);
+    background-color: $danger-color;
-    color: var(--default-color);
+    color: $button-alternate-color;
+    border-radius: 6px;
 
     &.show {
         visibility: visible;

src/routes/index.js

@@ -117,6 +117,16 @@ router.route("/nous-contacter").get(async (req, res, next) => {
     }
 });
 
+router.route("/composants").get(async (req, res, next) => {
+    try {
+        const page = new Pages(req, "composants");
+
+        render(res, page);
+    } catch (err) {
+        next(err);
+    }
+});
+
 router.route("/se-deconnecter").get((req, res) => {
     req.logout();
     req.session.destroy(() => {

views/pages/composants.ejs

@@ -0,0 +1,403 @@
+<main class="layout-maxed" id="app">
+    <h1>Les composants</h1>
+
+    <ul>
+        <li><a href="#titres">Les titres</a></li>
+        <li><a href="#grilles">Les grilles</a></li>
+        <li><a href="#boutons">Les boutons</a></li>
+        <li><a href="#formulaires">Les formulaires</a></li>
+        <li><a href="#modales">Les modales</a></li>
+        <li><a href="#boites">Les boites</a></li>
+        <li><a href="#flash">Les messages flash</a></li>
+        <li><a href="#notifications">Les notifications</a></li>
+        <li><a href="#icones">Les icônes</a></li>
+        <li><a href="#listes">Les listes</a></li>
+        <li><a href="#paginations">Les paginations</a></li>
+        <li><a href="#barres-de-navigation">Les barres de navigation</a></li>
+    </ul>
+
+    <h2 id="titres">Les titres</h2>
+    <h1>Titre de niveau 1</h1>
+    <h2>Titre de niveau 2</h2>
+    <h3>Titre de niveau 3</h3>
+    <h4>Titre de niveau 4</h4>
+    <h5>Titre de niveau 5</h5>
+    <h6>Titre de niveau 6</h6>
+
+    <h2 id="grilles">Les grilles</h2>
+    <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>
+    <div type="button" class="button is-primary">.button.is-primary</div>
+    <div type="button" class="button is-success">.button.is-success</div>
+    <div type="button" class="button is-danger">.button.is-danger</div>
+    <div type="button" class="button is-warning">.button.is-warning</div>
+
+    <h2 id="formulaires">Les formulaires</h2>
+    <div class="field">
+        <label for="email">Adresse e-mail</label>
+        <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
+    </div>
+    <pre>
+&lt;div class="field"&gt;
+    &lt;label for="email"&gt;Adresse e-mail&lt;/label&gt;
+    &lt;input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr"&gt;
+&lt;/div&gt;
+    </pre>
+    <div class="field">
+        <label for="message">Message*</label>
+        <textarea name="message" id="message" rows="6" required ></textarea>
+    </div>
+    <pre>
+&lt;div class="field"&gt;
+    &lt;label for="message"&gt;Message*&lt;/label&gt;
+    &lt;textarea name="message" id="message" rows="6" required &gt;&lt;/textarea&gt;
+&lt;/div&gt;
+    </pre>
+    <div class="field">
+        <label for="sortOrder">Trier par</label>
+        <select id="sortOrder" v-model="sortOrder" @change="changeSort">
+            <option value="artists_sort-asc">Artiste (A-Z)</option>
+            <option value="artists_sort-desc">Artiste (Z-A)</option>
+            <option value="year-asc">Année (A-Z)</option>
+            <option value="year-desc">Année (Z-A)</option>
+            <option value="country-asc">Pays (A-Z)</option>
+            <option value="country-desc">Pays (Z-A)</option>
+            <option value="formats.name-asc">Format (A-Z)</option>
+            <option value="formats.name-desc">Format (Z-A)</option>
+        </select>
+    </div>
+    <pre>
+&lt;div class="field"&gt;
+&lt;label for="sortOrder"&gt;Trier par&lt;/label&gt;
+&lt;select id="sortOrder"&gt;
+    &lt;option value="artists_sort-asc"&gt;Artiste (A-Z)&lt;/option&gt;
+    &lt;option value="artists_sort-desc"&gt;Artiste (Z-A)&lt;/option&gt;
+    &lt;option value="year-asc"&gt;Année (A-Z)&lt;/option&gt;
+    &lt;option value="year-desc"&gt;Année (Z-A)&lt;/option&gt;
+    &lt;option value="country-asc"&gt;Pays (A-Z)&lt;/option&gt;
+    &lt;option value="country-desc"&gt;Pays (Z-A)&lt;/option&gt;
+    &lt;option value="formats.name-asc"&gt;Format (A-Z)&lt;/option&gt;
+    &lt;option value="formats.name-desc"&gt;Format (Z-A)&lt;/option&gt;
+&lt;/select&gt;
+&lt;/div&gt;
+    </pre>
+    <div class="field">
+        <label for="choix1">choix 1</label>
+        <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>
+&lt;div class="field"&gt;
+    &lt;label for="choix1"&gt;choix 1&lt;/label&gt;
+    &lt;input type="radio" id="choix1" name="choix" value="choix1" checked&gt; 
+    &lt;label for="choix2"&gt;choix 2&lt;/label&gt;
+    &lt;input type="radio" id="choix2" name="choix" value="choix2"&gt;
+&lt;/div&gt;
+    </pre>
+    <div class="field">
+        <label for="checkbox1">choix 1</label>
+        <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>
+&lt;div class="field"&gt;
+    &lt;label for="checkbox1"&gt;choix 1&lt;/label&gt;
+    &lt;input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked&gt; 
+    &lt;label for="checkbox2"&gt;choix 2&lt;/label&gt;
+    &lt;input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"&gt;
+&lt;/div&gt;
+    </pre>
+
+    <h2 id="modales">Les modales</h2>
+    <button type="button" class="button is-primary" @click="toggleModal">Ouvrir la modale</button>
+    <pre>
+&lt;div class="modal" :class="{'is-visible': showModal}"&gt;
+    &lt;div class="modal-background"&gt;&lt;/div&gt;
+    &lt;div class="modal-card"&gt;
+        &lt;header&gt;Titre&lt;/header&gt;
+        &lt;section&gt;
+            Ceci est une modale
+        &lt;/section&gt;
+        &lt;footer&gt;
+            &lt;button class="button is-primary" @click="toggleModal"&gt;Ok&lt;/button&gt;
+            &lt;button class="button" @click="toggleModal"&gt;Annuler&lt;/button&gt;
+        &lt;/footer&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+    </pre>
+
+    <div class="modal" :class="{'is-visible': showModal}">
+        <div class="modal-background"></div>
+        <div class="modal-card">
+            <header>Titre</header>
+            <section>
+                Ceci est une modale
+            </section>
+            <footer>
+                <button class="button is-primary" @click="toggleModal">Ok</button>
+                <button class="button" @click="toggleModal">Annuler</button>
+            </footer>
+        </div>
+    </div>
+
+    <h2 id="boites">Les boites</h2>
+    <div class="box">
+        <form method="POST">
+            <h1>
+                Connexion
+            </h1>
+            <div class="field">
+                <label for="email">Adresse e-mail</label>
+                <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
+            </div>
+            <div class="field">
+                <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>
+    <pre>
+&lt;div class="box"&gt;
+    Contenu
+&lt;/div&gt;
+    </pre>
+
+    <h2 id="flash">Les messages flash</h2>
+    <div class="flash">
+        <div class="header">
+            Erreur
+        </div>
+        <div class="body">
+            Ceci est une erreur
+        </div>
+    </div>
+    <pre>
+&lt;div class="flash"&gt;
+    &lt;div class="header"&gt;
+        Erreur
+    &lt;/div&gt;
+    &lt;div class="body"&gt;
+        Ceci est une erreur
+    &lt;/div&gt;
+&lt;/div&gt;
+    </pre>
+
+    <h2 id="notifications">Les notifications</h2>
+    <button type="button" class="button is-primary" onclick="showToastr('Ceci est une notification');">Afficher une notification</button>
+    <div id="toastr">
+        <button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button>
+        <span></span>
+    </div>
+    <pre>
+&lt;button 
+    type="button"
+    class="button is-primary" 
+    onclick="showToastr('Ceci est une notification');"
+&gt;
+    Afficher une notification
+&lt;/button&gt;
+
+&lt;div id="toastr"&gt;
+    &lt;button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"&gt;&lt;/button&gt;
+    &lt;span&gt;&lt;/span&gt;
+&lt;/div&gt;
+    </pre>
+
+    <h2 id="icones">Les icônes</h2>
+    <i class="icon-plus">.icon-plus</i>
+    <i class="icon-user">.icon-user</i>
+    <i class="icon-search">.icon-search</i>
+    <i class="icon-mail">.icon-mail</i>
+    <i class="icon-link">.icon-link</i>
+    <i class="icon-link-ext">.icon-link-ext</i>
+    <i class="icon-heart">.icon-heart</i>
+    <i class="icon-eye">.icon-eye</i>
+    <i class="icon-spin">.icon-spin</i>
+    <i class="icon-sun">.icon-sun</i>
+    <i class="icon-moon">.icon-moon</i>
+    <i class="icon-trash">.icon-trash</i>
+    <i class="icon-blind">.icon-blind</i>
+
+    <h2 id="listes">Les listes</h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 list">
+        <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>
+&lt;div class="grid grid-cols-1 md:grid-cols-2 list"&gt;
+    &lt;div class="item"&gt;
+        Contenu
+    &lt;/div&gt;
+&lt;/div&gt;
+    </pre>
+
+    <h2 id="paginations">Les paginations</h2>
+    <nav class="pagination" role="navigation" aria-label="Pagination">
+        <ul class="pagination-list">
+            <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
+                <template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
+                    <li>
+                        <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
+                    </li>
+                </template>
+                <template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
+                    <li>
+                        <a class="pagination-link is-disabled">…</a>
+                    </li>
+                </template>
+            </template>
+        </ul>
+    </nav>
+    <pre>
+&lt;nav class="pagination" role="navigation" aria-label="Pagination"&gt;
+    &lt;ul class="pagination-list"&gt;
+        &lt;li&gt;&lt;a class="pagination-link is-current" aria-label="Aller à la page 1"&gt;1&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a class="pagination-link" aria-label="Aller à la page 2"&gt;2&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a class="pagination-link is-disabled"&gt;…&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a class="pagination-link" aria-label="Aller à la page 11"&gt;11&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+&lt;/nav&gt;
+    </pre>
+
+    <h2 id="barres-de-navigation">Les barres de navigation</h2>
+    <pre>
+&lt;nav class="navbar" aria-label="Navigation principale"&gt;
+    &lt;div class="navbar-brand"&gt;
+        &lt;a class="navbar-item" href="/"&gt;
+            &lt;img src="/img/logo.png" alt="Logo My Music Library"&gt;
+            &lt;span&gt;My Music Library&lt;/span&gt;
+        &lt;/a&gt;
+
+        &lt;a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar"&gt;
+            &lt;span aria-hidden="true"&gt;&lt;/span&gt;
+            &lt;span aria-hidden="true"&gt;&lt;/span&gt;
+            &lt;span aria-hidden="true"&gt;&lt;/span&gt;
+        &lt;/a&gt;
+    &lt;/div&gt;
+
+    &lt;div id="navbar" class="navbar-menu"&gt;
+        &lt;div class="navbar-start"&gt;
+            &lt;div class="navbar-item"&gt;
+                &lt;div class="buttons"&gt;
+                    &lt;a class="button is-primary" href="/ajouter-un-album"&gt;
+                        &lt;i class="icon-plus"&gt;&lt;/i&gt;
+                        &lt;span&gt;
+                            Ajouter un album
+                        &lt;/span&gt;
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="navbar-end"&gt;
+            &lt;a class="navbar-item" href="/nous-contacter"&gt;
+                Nous contacter
+            &lt;/a&gt;
+            &lt;div class="navbar-item has-dropdown"&gt;
+                &lt;a class="navbar-link"&gt;
+                    &lt;i class="icon-user"&gt;&lt;/i&gt;
+                    &lt;span&gt;
+                        &lt;%= user.username %&gt;
+                    &lt;/span&gt;
+                &lt;/a&gt;
+
+                &lt;div class="navbar-dropdown"&gt;
+                    &lt;a class="navbar-item" href="/ma-collection"&gt;
+                        Ma collection
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="navbar-item apparence"&gt;
+                &lt;div class="theme-switch-wrapper"&gt;
+                    &lt;label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement"&gt;
+                        &lt;input type="checkbox" id="checkbox" /&gt;
+                        &lt;div class="slider round"&gt;&lt;/div&gt;
+                    &lt;/label&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="navbar-item"&gt;
+                &lt;div class="buttons"&gt;
+                    &lt;button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site"&gt;
+                        &lt;i class="icon-eye"&gt;&lt;/i&gt;
+                    &lt;/button&gt;
+                    &lt;a class="button is-danger" href="/se-deconnecter"&gt;
+                        Déconnexion
+                    &lt;/a&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/nav&gt;
+    </pre>
+</main>
+
+<script>
+    Vue.createApp({
+        data() {
+            return {
+                showModal: false,
+                totalPages: 16,
+                page: 1,
+                items: [
+                    {
+                        'title': 'Premier item',
+                        'thumb': 'https://via.placeholder.com/150',
+                        'lorem': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum mollis justo, id sodales ipsum tincidunt quis. Pellentesque volutpat enim vitae metus mollis, et volutpat nisi egestas. Maecenas vel volutpat felis, sit amet finibus risus. Vestibulum bibendum tempus luctus. Ut rutrum iaculis porta. Donec ultricies orci non tortor posuere faucibus. Cras posuere a augue quis faucibus. Integer consequat libero egestas tempus luctus. Praesent ac arcu eget neque interdum volutpat quis sed augue. Etiam egestas purus ac accumsan consectetur. Etiam vel nibh aliquet, hendrerit leo sed, molestie dui. Nulla eget mauris nec odio facilisis condimentum varius suscipit arcu. Sed vitae felis porta, ornare enim non, egestas velit. Nam tempor ipsum dapibus neque vulputate, at sagittis est commodo. Cras eu rhoncus arcu. ',
+                    },
+                    {
+                        'title': 'Premier item',
+                        'thumb': 'https://via.placeholder.com/150',
+                        'lorem': 'Quisque ipsum nunc, placerat non euismod at, varius quis urna. Vivamus augue augue, vulputate vel nunc eu, interdum eleifend eros. Nam finibus mattis commodo. Donec sem leo, feugiat sed venenatis et, ultricies sit amet tortor. Fusce feugiat nibh id ex suscipit, a auctor orci iaculis. Donec vulputate quis dolor in posuere. Nullam non luctus dolor. Morbi congue massa metus, vel scelerisque quam aliquam placerat. Aenean pharetra, neque sed sollicitudin finibus, massa quam tristique lacus, vitae egestas tellus mauris sed enim. ',
+                    },
+                    {
+                        'title': 'Premier item',
+                        'thumb': 'https://via.placeholder.com/150',
+                        'lorem': 'Nulla facilisi. Curabitur at leo nunc. Cras volutpat congue condimentum. Donec euismod rhoncus nisl non bibendum. Nullam nec lorem eget mi facilisis tincidunt id non sapien. Maecenas in sem sed risus hendrerit dapibus. Nulla eget ex laoreet, sollicitudin neque et, luctus ligula. Curabitur viverra a justo ut bibendum. Aenean lacinia dolor quis quam pellentesque tempus. Praesent a volutpat est. Proin dignissim, dui luctus dapibus commodo, nunc arcu tincidunt est, quis molestie erat elit bibendum nisi. Vestibulum hendrerit lacinia tortor a varius. Proin nec sem ligula. Aenean eleifend odio a mi laoreet, sed hendrerit massa efficitur. ',
+                    },
+                    {
+                        'title': 'Premier item',
+                        'thumb': 'https://via.placeholder.com/150',
+                        'lorem': 'Integer sed eleifend arcu. Morbi eget ipsum ut leo pellentesque commodo eget a ipsum. Nam vel enim sed neque bibendum ultricies nec non odio. Vivamus a fermentum ligula. Mauris in gravida tellus, eu pretium turpis. Mauris et mi tincidunt, molestie velit sit amet, euismod nunc. Fusce malesuada mi ante, vel accumsan lacus consequat non. Maecenas leo tellus, tincidunt nec hendrerit eget, convallis vel ex. Donec eleifend nisi erat, a aliquet ex vulputate congue. Sed efficitur eu ligula ac aliquam. Nullam sit amet blandit nisl. ',
+                    },
+                    {
+                        'title': 'Premier item',
+                        'thumb': 'https://via.placeholder.com/150',
+                        'lorem': 'Nulla facilisi. Aliquam et suscipit est, in faucibus felis. Nunc at risus rutrum, fermentum sem facilisis, porttitor diam. Mauris vitae neque enim. Sed in lobortis augue, eget hendrerit nunc. Donec in arcu vitae eros lobortis eleifend. Proin non vulputate sem, a pharetra felis. In tortor purus, blandit nec enim a, mattis pulvinar magna. Praesent vel felis vel sapien interdum suscipit ut a justo. Quisque non felis ac velit maximus tincidunt ac at nibh. ',
+                    },
+                ]
+            }
+        },
+        methods: {
+            toggleModal() {
+                this.showModal = !this.showModal;
+            },
+            goTo(page) {
+                this.page = page;
+            },
+        }
+  }).mount('#app')
+</script>