MusicTopus/views/pages/composants.ejs

<main class="layout-maxed composants" id="app">
    <h1>Les composants</h1>

    <ul>
        <li><a href="#titres">Les titres</a></li>
        <li><a href="#couleurs">Les couleurs</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="couleurs">Les couleurs</h2>
    <h3>Polar Night</h3>
    <div class="grid grid-cols-5 gap-5">
        <div class="couleur">
            <div style="background-color: var(--nord0);">&nbsp;</div>
            nord0
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord1);">&nbsp;</div>
            nord1
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord2);">&nbsp;</div>
            nord2
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord3);">&nbsp;</div>
            nord3
        </div>
    </div>
    <h3>Snow Storm</h3>
    <div class="grid grid-cols-5 gap-5">
        <div class="couleur">
            <div style="background-color: var(--nord4);">&nbsp;</div>
            nord4
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord5);">&nbsp;</div>
            nord5
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord6);">&nbsp;</div>
            nord6
        </div>
    </div>
    <h3>Frost</h3>
    <div class="grid grid-cols-5 gap-5">
        <div class="couleur">
            <div style="background-color: var(--nord7);">&nbsp;</div>
            nord7
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord8);">&nbsp;</div>
            nord8
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord9);">&nbsp;</div>
            nord9
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord10);">&nbsp;</div>
            nord10
        </div>
    </div>
    <h3>Aurora</h3>
    <div class="grid grid-cols-5 gap-5">
        <div class="couleur">
            <div style="background-color: var(--nord11);">&nbsp;</div>
            nord11
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord12);">&nbsp;</div>
            nord12
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord13);">&nbsp;</div>
            nord13
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord14);">&nbsp;</div>
            nord14
        </div>
        <div class="couleur">
            <div style="background-color: var(--nord15);">&nbsp;</div>
            nord15
        </div>
    </div>
    <p>
        Vous pourrez trouver plus d'informations sur le <a href="https://www.nordtheme.com/" target="_blank" rel="noopener noreferrer">site offciel</a> du projet nord.
    </p>

    <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="demo-email">Adresse e-mail</label>
        <input type="email" name="email" id="demo-email" placeholder="ex : damien@darkou.fr">
    </div>
    <pre>
&lt;div class="field"&gt;
    &lt;label for="demo-email"&gt;Adresse e-mail&lt;/label&gt;
    &lt;input type="email" name="email" id="demo-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>
    <form>
    <fieldset>
    <div class="field inline">
        <label for="choix1">choix 1</label>
        <input type="radio" id="choix1" name="choix" value="choix1" checked>
    </div>
    <div class="field inline">
        <label for="choix2">choix 2</label>
        <input type="radio" id="choix2" name="choix" value="choix2">
    </div>
    </fieldset>
</form>
    <pre>
&lt;div class="field inline"&gt;
    &lt;label for="choix1"&gt;choix 1&lt;/label&gt;
    &lt;input type="radio" id="choix1" name="choix" value="choix1" checked&gt;
&lt;/div&gt;
&lt;div class="field inline"&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>
    <div class="flash info">
        <div class="header">
            Information
        </div>
        <div class="body">
            Ceci est une information
        </div>
    </div>
    <div class="flash success">
        <div class="header">
            Succès
        </div>
        <div class="body">
            Ceci est un succès
        </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>
    <h3>Erreur</h3>
    <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>
    <h3>Succès</h3>
    <button type="button" class="button is-primary" onclick="showToastr('Ceci est une notification', true);">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', true);"
&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-left-open">.icon-left-open</i>
    <i class="icon-right-open">.icon-right-open</i>
    <i class="icon-export">.icon-export</i>
    <i class="icon-refresh">.icon-refresh</i>
    <i class="icon-share">.icon-share</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>
    <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">
                {{ 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>
    <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>
&lt;div class="grid grid-cols-1 md:grid-cols-2 list hover"&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 MusicTopus"&gt;
            &lt;span&gt;MusicTopus&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': 'Titre 1',
                        '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': 'Titre 2',
                        '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': 'Titre 3',
                        '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': 'Titre 4',
                        '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': 'Titre 5',
                        '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>