{WIP} Bulma => Knacss
This commit is contained in:
parent
b1aaeaaef8
commit
2a35e452d7
6 changed files with 400 additions and 40 deletions
|
|
@ -44,7 +44,6 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.26.0",
|
"axios": "^0.26.0",
|
||||||
"bulma": "^0.9.3",
|
|
||||||
"connect-ensure-login": "^0.1.1",
|
"connect-ensure-login": "^0.1.1",
|
||||||
"connect-flash": "^0.1.1",
|
"connect-flash": "^0.1.1",
|
||||||
"connect-mongo": "^4.6.0",
|
"connect-mongo": "^4.6.0",
|
||||||
|
|
@ -54,6 +53,7 @@
|
||||||
"ejs": "^3.1.6",
|
"ejs": "^3.1.6",
|
||||||
"express": "^4.17.2",
|
"express": "^4.17.2",
|
||||||
"express-session": "^1.17.2",
|
"express-session": "^1.17.2",
|
||||||
|
"knacss": "^8.0.4",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
"mongoose": "^6.2.1",
|
"mongoose": "^6.2.1",
|
||||||
"mongoose-unique-validator": "^3.0.0",
|
"mongoose-unique-validator": "^3.0.0",
|
||||||
|
|
|
||||||
19
sass/global.scss
Normal file
19
sass/global.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 3.25rem;
|
||||||
|
font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 2rem 0 1.5rem;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #485fc7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,17 +1,8 @@
|
||||||
.header {
|
.header {
|
||||||
|
margin-bottom: 3.25rem;
|
||||||
|
@include respond-to("small-up") {
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
background-image: url('/header.jpg');
|
background-image: url('/header.jpg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin-bottom: 3.25rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > footer {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,30 @@
|
||||||
@use './bulma.scss';
|
// @use '../node_modules/knacss/sass/knacss.scss';
|
||||||
@use './toast.scss';
|
|
||||||
@use './pagination.scss';
|
// NOYAU
|
||||||
@use './home.scss';
|
@import "../node_modules/knacss/sass/abstracts/variables-sass";
|
||||||
|
@import "../node_modules/knacss/sass/abstracts/mixins-sass";
|
||||||
|
|
||||||
|
@import "../node_modules/knacss/sass/base/reset-base";
|
||||||
|
@import "../node_modules/knacss/sass/base/reset-accessibility";
|
||||||
|
@import "../node_modules/knacss/sass/base/reset-forms";
|
||||||
|
@import "../node_modules/knacss/sass/base/reset-print";
|
||||||
|
@import "../node_modules/knacss/sass/base/layout";
|
||||||
|
|
||||||
|
// UTILITAIRES
|
||||||
|
@import "../node_modules/knacss/sass/utils/utils-global";
|
||||||
|
@import "../node_modules/knacss/sass/utils/utils-font-sizes";
|
||||||
|
@import "../node_modules/knacss/sass/utils/utils-spacers";
|
||||||
|
@import "../node_modules/knacss/sass/utils/grillade";
|
||||||
|
|
||||||
|
// COMPOSANTS (à ajouter au besoin)
|
||||||
|
// @import "../node_modules/knacss/sass/components/button";
|
||||||
|
// @import "components/burger";
|
||||||
|
// @import "components/checkbox";
|
||||||
|
// @import "components/radio";
|
||||||
|
// @import "components/select";
|
||||||
|
// @import "components/quote";
|
||||||
|
|
||||||
|
// SPÉCIFIQUE AU SITE
|
||||||
|
@import './global';
|
||||||
|
@import './navbar';
|
||||||
|
@import './home';
|
||||||
325
sass/navbar.scss
Normal file
325
sass/navbar.scss
Normal file
|
|
@ -0,0 +1,325 @@
|
||||||
|
.navbar {
|
||||||
|
min-height: 3.25rem;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: rgba(0,0,0,.7);
|
||||||
|
position: fixed;
|
||||||
|
z-index: 30;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
min-height: 3.25rem;
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
min-height: 3.25rem;
|
||||||
|
|
||||||
|
.navbar-item {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
// display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
word-break: break-word;
|
||||||
|
color: #363636;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.125;
|
||||||
|
margin-left: .5rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-burger {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
appearance: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
height: 3.25rem;
|
||||||
|
position: relative;
|
||||||
|
width: 3.25rem;
|
||||||
|
margin-left: auto;
|
||||||
|
color: rgba(0,0,0,.7);
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
background-color: currentColor;
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
left: calc(50% - 8px);
|
||||||
|
position: absolute;
|
||||||
|
transform-origin: center;
|
||||||
|
transition-duration: 86ms;
|
||||||
|
transition-property: background-color,opacity,transform;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
width: 16px;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
top: calc(50% - 6px);
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
top: calc(50% - 1px);
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
top: calc(50% + 4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
span {
|
||||||
|
&:nth-child(1) {
|
||||||
|
transform: translateY(5px) rotate(45deg);
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
transform: translateY(-5px) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-item {
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: .5rem .75rem;
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #4a4a4a;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&.has-dropdown {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
color: rgba(0,0,0,.7);
|
||||||
|
|
||||||
|
.navbar-dropdown {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom-left-radius: 6px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
border-top: 2px solid #dbdbdb;
|
||||||
|
box-shadow: 0 8px 8px rgba(10,10,10,.1);
|
||||||
|
display: none;
|
||||||
|
font-size: .875rem;
|
||||||
|
left: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.navbar-link {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
color: rgba(0,0,0,.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-link {
|
||||||
|
color: #4a4a4a;
|
||||||
|
display: block;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: .5rem .75rem;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-right: 2.5em;
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
align-items: center;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
border-right: 0;
|
||||||
|
border-top: 0;
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
height: .625em;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transform-origin: center;
|
||||||
|
width: .625em;
|
||||||
|
border-color: #485fc7;
|
||||||
|
margin-top: -0.375em;
|
||||||
|
right: 1.125em;
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
border-color: rgba(0,0,0,.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-menu {
|
||||||
|
display: none;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 8px 16px rgba(10,10,10,.1);
|
||||||
|
padding: .5rem 0;
|
||||||
|
|
||||||
|
@include respond-to("medium") {
|
||||||
|
max-height: calc(100vh - 3.25rem);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background-color: initial;
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
.navbar-start {
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-right: auto;
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.navbar-item {
|
||||||
|
color: rgba(0,0,0,.7);
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-left: auto;
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-dropdown {
|
||||||
|
font-size: .875rem;
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
padding-top: .5rem;
|
||||||
|
|
||||||
|
.navbar-item {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-to("medium-up") {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom-left-radius: 6px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
border-top: 2px solid #dbdbdb;
|
||||||
|
box-shadow: 0 8px 8px rgba(10,10,10,.1);
|
||||||
|
display: none;
|
||||||
|
font-size: .875rem;
|
||||||
|
left: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
|
.navbar-item {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: .375rem 1rem;
|
||||||
|
padding-right: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: calc(0.5em - 1px);
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
padding-top: calc(0.5em - 1px);
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-width: 1px;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
&.is-danger {
|
||||||
|
background-color: #f14668;
|
||||||
|
border-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-link {
|
||||||
|
background-color: #485fc7;
|
||||||
|
border-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -51,26 +51,26 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="has-navbar-fixed-top">
|
<body>
|
||||||
<nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<a class="navbar-item" href="/">
|
<a class="navbar-item" href="/">
|
||||||
<img src="/logo.png" alt="Logo">
|
<img src="/logo.png" alt="Logo">
|
||||||
<h1 class="title ml-2">My Music Library</h1>
|
<span>My Music Library</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
|
||||||
<span aria-hidden="true"></span>
|
<span aria-hidden="true"></span>
|
||||||
<span aria-hidden="true"></span>
|
<span aria-hidden="true"></span>
|
||||||
<span aria-hidden="true"></span>
|
<span aria-hidden="true"></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="navbarBasicExample" class="navbar-menu">
|
<div id="navbar" class="navbar-menu">
|
||||||
<% if ( user ) { %>
|
<% if ( user ) { %>
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<p class="control">
|
<div class="buttons">
|
||||||
<a class="button is-link" href="/ajouter-un-album">
|
<a class="button is-link" href="/ajouter-un-album">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa-solid fa-plus"></i>
|
<i class="fa-solid fa-plus"></i>
|
||||||
|
|
@ -79,14 +79,14 @@
|
||||||
Ajouter un album
|
Ajouter un album
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<% if ( user ) { %>
|
<% if ( user ) { %>
|
||||||
<div class="navbar-item has-dropdown is-hoverable">
|
<div class="navbar-item has-dropdown">
|
||||||
<a class="navbar-link">
|
<a class="navbar-link">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa-solid fa-user"></i>
|
<i class="fa-solid fa-user"></i>
|
||||||
|
|
@ -120,13 +120,12 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- <div id="toastr" class="notification is-danger">
|
||||||
<div id="toastr" class="notification is-danger">
|
|
||||||
<button class="delete"></button>
|
<button class="delete"></button>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<main class="mt-4 mb-5">
|
<!-- <main class="layout-maxed">
|
||||||
<% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
|
<% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
|
||||||
<div class="columns is-mobile">
|
<div class="columns is-mobile">
|
||||||
<div class="
|
<div class="
|
||||||
|
|
@ -166,16 +165,16 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
</main> -->
|
||||||
|
<main class="layout-maxed">
|
||||||
<%- include(viewname) %>
|
<%- include(viewname) %>
|
||||||
</main>
|
</main>
|
||||||
<footer class="footer">
|
<footer class="footer layout-hero">
|
||||||
<div class="content has-text-centered">
|
|
||||||
<p>
|
<p>
|
||||||
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
|
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
|
||||||
Fait avec ❤ à Bordeaux.
|
Fait avec ❤ à Bordeaux.
|
||||||
Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
|
Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue