dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 10 Pull Requests Releases 14 Activity

{WIP} Bulma => Knacss

This commit is contained in:
Damien Broqua 2022-02-18 08:14:34 +01:00
parent b1aaeaaef8
commit 2a35e452d7
6 changed files with 400 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -44,7 +44,6 @@
},
"dependencies": {
"axios": "^0.26.0",
"bulma": "^0.9.3",
"connect-ensure-login": "^0.1.1",
"connect-flash": "^0.1.1",
"connect-mongo": "^4.6.0",
@ -54,6 +53,7 @@
"ejs": "^3.1.6",
"express": "^4.17.2",
"express-session": "^1.17.2",
"knacss": "^8.0.4",
"moment": "^2.29.1",
"mongoose": "^6.2.1",
"mongoose-unique-validator": "^3.0.0",

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

21
sass/home.scss
View File

@ -1,17 +1,8 @@
.header {
height: 30vh;
background-image: url('/header.jpg');
background-size: cover;
margin-bottom: 3.25rem;
}
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body > footer {
margin-top: auto;
margin-bottom: 3.25rem;
@include respond-to("small-up") {
height: 30vh;
background-image: url('/header.jpg');
background-size: cover;
}
}

34
sass/index.scss
View File

@ -1,4 +1,30 @@
@use './bulma.scss';
@use './toast.scss';
@use './pagination.scss';
@use './home.scss';
// @use '../node_modules/knacss/sass/knacss.scss';
// NOYAU
@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
View 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;
}
}
}
}

39
views/index.ejs
View File

@ -51,26 +51,26 @@
});
</script>
</head>
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/logo.png" alt="Logo">
<h1 class="title ml-2">My Music Library</h1>
<span>My Music Library</span>
</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>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div id="navbar" class="navbar-menu">
<% if ( user ) { %>
<div class="navbar-start">
<div class="navbar-item">
<p class="control">
<div class="buttons">
<a class="button is-link" href="/ajouter-un-album">
<span class="icon">
<i class="fa-solid fa-plus"></i>
@ -79,14 +79,14 @@
Ajouter un album
</span>
</a>
</p>
</div>
</div>
</div>
<% } %>
<div class="navbar-end">
<% if ( user ) { %>
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-item has-dropdown">
<a class="navbar-link">
<span class="icon">
<i class="fa-solid fa-user"></i>
@ -120,13 +120,12 @@
</div>
</nav>
<div id="toastr" class="notification is-danger">
<!-- <div id="toastr" class="notification is-danger">
<button class="delete"></button>
<span></span>
</div>
</div> -->
<main class="mt-4 mb-5">
<!-- <main class="layout-maxed">
<% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
<div class="columns is-mobile">
<div class="
@ -166,16 +165,16 @@
</div>
</div>
<% } %>
</main> -->
<main class="layout-maxed">
<%- include(viewname) %>
</main>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
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>.
</p>
</div>
<footer class="footer layout-hero">
<p>
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
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>.
</p>
</footer>
</body>
</html>