{WIP} Bulma => Knacss (toastr & flash)
This commit is contained in:
parent
fe0a51e707
commit
2209b410f1
6 changed files with 110 additions and 52 deletions
14
sass/flash.scss
Normal file
14
sass/flash.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
.header {
|
||||
.home {
|
||||
.header {
|
||||
margin-bottom: 3.25rem;
|
||||
@include respond-to("small-up") {
|
||||
height: 30vh;
|
||||
background-image: url('/header.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,8 @@
|
|||
@import './button.scss';
|
||||
@import './table';
|
||||
@import './modal';
|
||||
@import './toast';
|
||||
@import './flash';
|
||||
|
||||
@import './home';
|
||||
@import './connexion';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<button class="delete"></button>
|
||||
<div id="toastr">
|
||||
<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="message-header">
|
||||
<p>Erreur</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
<div class="header">
|
||||
Erreur
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="body">
|
||||
<%= error %>
|
||||
</div>
|
||||
</article>
|
||||
<%
|
||||
}
|
||||
}
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</main> -->
|
||||
|
||||
<%- include(viewname) %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<main class="layout-maxed">
|
||||
<main class="layout-maxed home">
|
||||
<div class="header layout-hero"></div>
|
||||
<h1>
|
||||
My Music Library
|
||||
|
|
|
|||
Loading…
Reference in a new issue