dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

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

Browse source
This commit is contained in:
Damien Broqua 2022-02-18 11:38:56 +01:00
parent fe0a51e707
commit 2209b410f1
6 changed files with 110 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
sass/flash.scss Normal file
View 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;
}
}

14
sass/home.scss
View file

@ -1,8 +1,10 @@
.header { .home {
margin-bottom: 3.25rem; .header {
@include respond-to("small-up") { margin-bottom: 3.25rem;
height: 30vh; @include respond-to("small-up") {
background-image: url('/header.jpg'); height: 30vh;
background-size: cover; background-image: url('/header.jpg');
background-size: cover;
}
} }
} }

2
sass/index.scss
View file

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

49
sass/toast.scss
View file

@ -8,10 +8,59 @@
top: 30px; top: 30px;
font-size: 17px; font-size: 17px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
background-color: #f14668;
color: #fff;
&.show { &.show {
visibility: visible; visibility: visible;
animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s; 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 { @keyframes toastrFadein {

77
views/index.ejs
View file

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

2
views/pages/home.ejs
View file

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