{WIP} Bulma => Knacss (signin/signup)
This commit is contained in:
parent
62607e2a83
commit
5b0f5a69c4
10 changed files with 167 additions and 136 deletions
5
sass/bulma.scss
vendored
5
sass/bulma.scss
vendored
|
|
@ -1,5 +0,0 @@
|
|||
@use '../node_modules/bulma/bulma.sass';
|
||||
|
||||
.modal-content {
|
||||
width: 80%;
|
||||
}
|
||||
28
sass/connexion.scss
Normal file
28
sass/connexion.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.connexion,
|
||||
.inscription {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
|
||||
color: #4a4a4a;
|
||||
display: block;
|
||||
padding: 1.25rem;
|
||||
width: calc(100% - 2rem);
|
||||
margin: auto;
|
||||
|
||||
@include respond-to("small-up") {
|
||||
width: 65%;
|
||||
}
|
||||
@include respond-to("medium-up") {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #485fc7;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #3e56c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
sass/forms.scss
Normal file
51
sass/forms.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.field {
|
||||
padding-top: .6rem;
|
||||
label {
|
||||
font-weight: 800;
|
||||
}
|
||||
input {
|
||||
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dbdbdb !important;
|
||||
color: #363636;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover {
|
||||
background-color: #f03a5f;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-link {
|
||||
background-color: #485fc7;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #3e56c4;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 3.25rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 3.25rem;
|
||||
|
|
|
|||
|
|
@ -27,4 +27,6 @@
|
|||
// SPÉCIFIQUE AU SITE
|
||||
@import './global';
|
||||
@import './navbar';
|
||||
@import './home';
|
||||
@import './forms';
|
||||
@import './home';
|
||||
@import './connexion';
|
||||
|
|
@ -22,10 +22,6 @@
|
|||
.navbar-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
@include respond-to("medium-up") {
|
||||
// display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 1.75rem;
|
||||
|
|
@ -296,30 +292,5 @@
|
|||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -166,9 +166,9 @@
|
|||
</div>
|
||||
<% } %>
|
||||
</main> -->
|
||||
<main class="layout-maxed">
|
||||
<%- include(viewname) %>
|
||||
</main>
|
||||
|
||||
<%- include(viewname) %>
|
||||
|
||||
<footer class="footer layout-hero">
|
||||
<p>
|
||||
<strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
|
||||
|
|
|
|||
|
|
@ -1,32 +1,24 @@
|
|||
<div class="container">
|
||||
<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">
|
||||
<form class="box" method="POST">
|
||||
<div class="has-text-centered">
|
||||
<img class="mb-4" src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
<div class="is-size-3">
|
||||
Connexion
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Adresse e-mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">Mot de passe</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="has-text-right mb-3">
|
||||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button class="button is-link">Connexion</button>
|
||||
</form>
|
||||
<div class="connexion">
|
||||
<form method="POST">
|
||||
<div class="text-center">
|
||||
<img src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
</div>
|
||||
<h2>
|
||||
Connexion
|
||||
</h2>
|
||||
<div class="field">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-10">
|
||||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,31 +1,33 @@
|
|||
<div class="header layout-hero"></div>
|
||||
<h1>
|
||||
My Music Library
|
||||
</h1>
|
||||
<p>
|
||||
Retrouvez votre cd-thèque partout depuis votre PC ou votre smartphone.
|
||||
</p>
|
||||
<p>
|
||||
<strong>My Music Library</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
|
||||
<br />
|
||||
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later</a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr</a>.
|
||||
</p>
|
||||
<h2>
|
||||
Pourquoi utiliser My Music Library ?
|
||||
</h2>
|
||||
<p>
|
||||
<strong>My Music Library</strong> est indispensable lorsqu'une collecion, de CD-audios et vyniles, est devenue trop importante pour qu'on puisse se souvenir de tous les albums qu'elle contient. Consulter My Music Library peut par exemple éviter un achat en double, et de savoir qu'on à des albums à céder ou échanger.
|
||||
<br />
|
||||
Il existe déjà plusieurs applications de gestion de librairies musicales mais, (au moment de l'édition de cette présentation) aucune facilement accessible via internet, comme par exemple lorsqu'on est chez un discaire.
|
||||
</p>
|
||||
<h2>
|
||||
Qu'est ce qui fait tourner My Music Library ?
|
||||
</h2>
|
||||
<p>
|
||||
<strong>My Music Library</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
|
||||
<ul>
|
||||
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS</a>.</li>
|
||||
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL</a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB</a>.</li>
|
||||
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss</a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS</a>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<main class="layout-maxed">
|
||||
<div class="header layout-hero"></div>
|
||||
<h1>
|
||||
My Music Library
|
||||
</h1>
|
||||
<p>
|
||||
Retrouvez votre cd-thèque partout depuis votre PC ou votre smartphone.
|
||||
</p>
|
||||
<p>
|
||||
<strong>My Music Library</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
|
||||
<br />
|
||||
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later</a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr</a>.
|
||||
</p>
|
||||
<h2>
|
||||
Pourquoi utiliser My Music Library ?
|
||||
</h2>
|
||||
<p>
|
||||
<strong>My Music Library</strong> est indispensable lorsqu'une collecion, de CD-audios et vyniles, est devenue trop importante pour qu'on puisse se souvenir de tous les albums qu'elle contient. Consulter My Music Library peut par exemple éviter un achat en double, et de savoir qu'on à des albums à céder ou échanger.
|
||||
<br />
|
||||
Il existe déjà plusieurs applications de gestion de librairies musicales mais, (au moment de l'édition de cette présentation) aucune facilement accessible via internet, comme par exemple lorsqu'on est chez un discaire.
|
||||
</p>
|
||||
<h2>
|
||||
Qu'est ce qui fait tourner My Music Library ?
|
||||
</h2>
|
||||
<p>
|
||||
<strong>My Music Library</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
|
||||
<ul>
|
||||
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS</a>.</li>
|
||||
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL</a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB</a>.</li>
|
||||
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss</a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS</a>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</main>
|
||||
|
|
@ -1,38 +1,28 @@
|
|||
<div class="container">
|
||||
<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">
|
||||
<form class="box" method="POST">
|
||||
<div class="has-text-centered">
|
||||
<img class="mb-4" src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
<div class="is-size-3">
|
||||
Inscription
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Nom d'utilisateur</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" name="username" id="username" placeholder="ex : darkou">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Adresse e-mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">Mot de passe</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="has-text-right mb-3">
|
||||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button class="button is-link">Inscription</button>
|
||||
</form>
|
||||
<div class="connexion">
|
||||
<form method="POST">
|
||||
<div class="text-center">
|
||||
<img src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
</div>
|
||||
<h2>
|
||||
Inscription
|
||||
</h2>
|
||||
<div class="field">
|
||||
<label for="email">Nom d'utilisateur</label>
|
||||
<input type="text" name="username" id="username" placeholder="ex : darkou">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-10">
|
||||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Inscription</button>
|
||||
</form>
|
||||
</div>
|
||||
Loading…
Reference in a new issue