{WIP} Bulma => Knacss (toastr & flash)

sass/flash.scss

@@ -0,0 +1,14 @@
+.flash {
+    background-color: #f14668;
+    border-radius: 6px;
+    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
+    color: #fff;
+    display: block;
+    padding: 1.25rem; 
+    width: calc(100% - 6rem);
+    margin: 2rem auto;
+
+    .header {
+        font-weight: 800;
+    }
+}

sass/home.scss

@@ -1,3 +1,4 @@
+.home {
     .header {
         margin-bottom: 3.25rem;
         @include respond-to("small-up") {
@@ -6,3 +7,4 @@
             background-size: cover;
         }
     }
+}

sass/index.scss

@@ -31,6 +31,8 @@
 @import './button.scss';
 @import './table';
 @import './modal';
+@import './toast';
+@import './flash';
 
 @import './home';
 @import './connexion';

sass/toast.scss

@@ -8,10 +8,59 @@
     top: 30px;
     font-size: 17px;
 
+    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+    background-color: #f14668;
+    color: #fff;
+
     &.show {
         visibility: visible;
         animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s;
     }
+
+    button {
+        width: 20px;
+        font-size: 0;
+        height: 20px;
+        max-height: 20px;
+        max-width: 20px;
+        min-height: 20px;
+        min-width: 20px;
+        outline: 0;
+        border: none;
+        border-radius: 9999px;
+        cursor: pointer;
+        pointer-events: auto;
+        display: inline-block;
+        user-select: none;
+        right: .5rem;
+        position: absolute;
+        top: .5rem;
+        background-color: rgba(10, 10, 10, 0.2);
+
+        &:hover {
+            background-color: rgba(10,10,10,.3);
+        }
+
+        &::before,
+        &::after {
+            background-color: #fff;
+            content: "";
+            display: block;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateX(-50%) translateY(-50%) rotate(45deg);
+            transform-origin: center center;
+        }
+        &::before {
+            height: 2px;
+            width: 50%;
+        }
+        &::after {
+            height: 50%;
+            width: 2px;
+        }
+    }
 }
 
 @keyframes toastrFadein {

views/index.ejs

@@ -26,7 +26,7 @@
     
         <script>
             function showToastr(message) {
-                var x = document.getElementById("toastr");
+                let x = document.getElementById("toastr");
                 if ( message ) {
                     x.getElementsByTagName("SPAN")[0].innerHTML = message;
                 }
@@ -35,6 +35,12 @@
                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
             };
 
+            function hideToastr() {
+                let x = document.getElementById("toastr");
+                
+                x.className = x.className.replace("show", "");
+            }
+    
             document.addEventListener('DOMContentLoaded', () => {
                 const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
                 if ($navbarBurgers.length > 0) {
@@ -120,52 +126,37 @@
             </div>
         </nav>
 
-        <!-- <div id="toastr" class="notification is-danger">
+        <div id="toastr">
-            <button class="delete"></button>
+            <button class="delete" onclick="hideToastr()"></button>
             <span></span>
-        </div> -->
-
-        <!-- <main class="layout-maxed">
-            <% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
-                <div class="columns is-mobile">
-                    <div class="
-                        column 
-                        is-10-mobile is-offset-1-mobile
-                        is-8-tablet is-offset-2-tablet
-                        is-6-desktop is-offset-3-desktop
-                        is-4-widescreen is-offset-4-widescreen
-                    ">
-                        <% if ( page.failureFlash ) {%>
-                        <article class="message is-danger">
-                            <div class="message-header">
-                                <p>Erreur</p>
         </div>
-                            <div class="message-body">
+
+        <% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
+            <div class="flash">
+                <% if ( page.failureFlash ) {%>
+                    <div class="header">
+                        Erreur
+                    </div>
+                    <div class="body">
                         <%= page.failureFlash %>
                     </div>
-                        </article>
                 <% } %>    
                 <%
                     if (error && error.length > 0) {
                         for( let i = 0 ; i < error.length ; i += 1 ) {
                 %>
-                        <article class="message is-danger">
+                <div class="header">
-                            <div class="message-header">
+                    Erreur
-                                <p>Erreur</p>
-                                <button class="delete" aria-label="delete"></button>
                 </div>
-                            <div class="message-body">
+                <div class="body">
                     <%= error %>
                 </div>
-                        </article>
                 <%
                         }
                     } 
                 %>
             </div>
-                </div>
         <% } %>
-        </main> -->
         
         <%- include(viewname) %>
 

views/pages/home.ejs

@@ -1,4 +1,4 @@
-<main class="layout-maxed">
+<main class="layout-maxed home">
     <div class="header layout-hero"></div>
     <h1>
         My Music Library