From 6b072fcaad82865be49bed93928fce64c1730894 Mon Sep 17 00:00:00 2001 From: dbroqua Date: Thu, 24 Feb 2022 14:28:51 +0100 Subject: [PATCH] Ajout d'une page permettant de visualiser les composants --- sass/button.scss | 22 +- sass/colors.scss | 1 + sass/error.scss | 6 - sass/flash.scss | 7 +- sass/global.scss | 7 + sass/toast.scss | 5 +- src/routes/index.js | 10 + views/pages/composants.ejs | 403 +++++++++++++++++++++++++++++++++++++ 8 files changed, 443 insertions(+), 18 deletions(-) create mode 100644 views/pages/composants.ejs diff --git a/sass/button.scss b/sass/button.scss index 8f773ba..1d8c946 100644 --- a/sass/button.scss +++ b/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); - border-color: var(--default-hl-color); + background-color: $nord9; 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); + } + } } \ No newline at end of file diff --git a/sass/colors.scss b/sass/colors.scss index 920cacc..5759f90 100644 --- a/sass/colors.scss +++ b/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); diff --git a/sass/error.scss b/sass/error.scss index 325f38b..cf534ac 100644 --- a/sass/error.scss +++ b/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; - } } \ No newline at end of file diff --git a/sass/flash.scss b/sass/flash.scss index 3d676b9..db28cb0 100644 --- a/sass/flash.scss +++ b/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); - color: var(--default-color); + box-shadow: var(--box-shadow-color) 0px 3px 6px 0px; + color: $button-alternate-color; display: block; padding: 1.25rem; width: calc(100% - 6rem); margin: 2rem auto; - @include transition() {} .header { font-weight: 800; diff --git a/sass/global.scss b/sass/global.scss index d1a3997..4d38bc7 100644 --- a/sass/global.scss +++ b/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; + } } } diff --git a/sass/toast.scss b/sass/toast.scss index cb2143d..21d1730 100644 --- a/sass/toast.scss +++ b/sass/toast.scss @@ -9,8 +9,9 @@ font-size: 17px; padding: 1.25rem 2.5rem 1.25rem 1.5rem; - background-color: var(--danger-color); - color: var(--default-color); + background-color: $danger-color; + color: $button-alternate-color; + border-radius: 6px; &.show { visibility: visible; diff --git a/src/routes/index.js b/src/routes/index.js index 595cad7..8a340a0 100644 --- a/src/routes/index.js +++ b/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(() => { diff --git a/views/pages/composants.ejs b/views/pages/composants.ejs new file mode 100644 index 0000000..7b963a9 --- /dev/null +++ b/views/pages/composants.ejs @@ -0,0 +1,403 @@ +
+

Les composants

+ + + +

Les titres

+

Titre de niveau 1

+

Titre de niveau 2

+

Titre de niveau 3

+

Titre de niveau 4

+
Titre de niveau 5
+
Titre de niveau 6
+ +

Les grilles

+

+ Se référer à la documentation de Knacss. +

+ +

Les boutons

+
.button
+
.button.is-link
+
.button.is-primary
+
.button.is-success
+
.button.is-danger
+
.button.is-warning
+ +

Les formulaires

+
+ + +
+ 
+<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="message">Message*</label>
+    <textarea name="message" id="message" rows="6" required ></textarea>
+</div>
+
+
+ + +
+ 
+<div class="field">
+<label for="sortOrder">Trier par</label>
+<select id="sortOrder">
+    <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>
+
+
+ + + + +
+ 
+<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>
+
+
+ + + + +
+ 
+<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>
+
+ +

Les modales

+ + 
+<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>
+
+ +
+
+
+
Titre
+
+ Ceci est une modale +
+
+ + +
+
+
+ +

Les boites

+
+
+

+ Connexion +

+
+ + +
+
+ + +
+ +
+

Pas encore inscrit ? Inscrivez-vous

+
+ + +
+
+ 
+<div class="box">
+    Contenu
+</div>
+
+ +

Les messages flash

+
+
+ Erreur +
+
+ Ceci est une erreur +
+
+ 
+<div class="flash">
+    <div class="header">
+        Erreur
+    </div>
+    <div class="body">
+        Ceci est une erreur
+    </div>
+</div>
+
+ +

Les notifications

+ +
+ + +
+ 
+<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>
+
+ +

Les icônes

+ .icon-plus + .icon-user + .icon-search + .icon-mail + .icon-link + .icon-link-ext + .icon-heart + .icon-eye + .icon-spin + .icon-sun + .icon-moon + .icon-trash + .icon-blind + +

Les listes

+
+
+ + {{ item.title }} + +
+
+ +
+
+ {{ item.lorem }} +
+
+
+
+ 
+<div class="grid grid-cols-1 md:grid-cols-2 list">
+    <div class="item">
+        Contenu
+    </div>
+</div>
+
+ +

Les paginations

+ + 
+<nav class="pagination" role="navigation" aria-label="Pagination">
+    <ul class="pagination-list">
+        <li><a class="pagination-link is-current" aria-label="Aller à la page 1">1</a></li>
+        <li><a class="pagination-link" aria-label="Aller à la page 2">2</a></li>
+        <li><a class="pagination-link is-disabled">…</a></li>
+        <li><a class="pagination-link" aria-label="Aller à la page 11">11</a></li>
+    </ul>
+</nav>
+
+ +

Les barres de navigation

+ 
+<nav class="navbar" aria-label="Navigation principale">
+    <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+            <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">
+        <div class="navbar-start">
+            <div class="navbar-item">
+                <div class="buttons">
+                    <a class="button is-primary" href="/ajouter-un-album">
+                        <i class="icon-plus"></i>
+                        <span>
+                            Ajouter un album
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="navbar-end">
+            <a class="navbar-item" href="/nous-contacter">
+                Nous contacter
+            </a>
+            <div class="navbar-item has-dropdown">
+                <a class="navbar-link">
+                    <i class="icon-user"></i>
+                    <span>
+                        <%= user.username %>
+                    </span>
+                </a>
+
+                <div class="navbar-dropdown">
+                    <a class="navbar-item" href="/ma-collection">
+                        Ma collection
+                    </a>
+                </div>
+            </div>
+            <div class="navbar-item apparence">
+                <div class="theme-switch-wrapper">
+                    <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
+                        <input type="checkbox" id="checkbox" />
+                        <div class="slider round"></div>
+                    </label>
+                </div>
+            </div>
+            <div class="navbar-item">
+                <div class="buttons">
+                    <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>
+                    <a class="button is-danger" href="/se-deconnecter">
+                        Déconnexion
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
+
+
+ +