WIP refacto

This commit is contained in:
Florian Schmitt 2022-04-14 09:21:17 +03:00
parent 324cd85a02
commit c71306264b
11 changed files with 2146 additions and 1632 deletions

View file

@ -1,22 +1,42 @@
extends layout
block header
- if (locals.demo)
div.notice-bar Tableau de démonstration.<br />Ny mettez rien dimportant !
div#create-card.post-it-actions
a.add-post-it.add-white-card(href="#", data-color="white")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note blanche')
img(alt="blanc", src="images/white-card.png")
a.add-post-it.add-yellow-card(href="#", data-color="yellow")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note jaune')
img(alt="jaune", src="images/yellow-card.png")
a.add-post-it.add-green-card(href="#", data-color="green")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note verte')
img(alt="vert", src="images/green-card.png")
a.add-post-it.add-blue-card(href="#", data-color="blue")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note bleu')
img(alt="bleu", src="images/blue-card.png")
div.stickers
div.sticker#sticker-red(title='Glisser-déposer la pastille rouge')
div.sticker#sticker-blue(title='Glisser-déposer la pastille bleue')
div.sticker#sticker-yellow(title='Glisser-déposer la pastille jaune')
div.sticker#sticker-green(title='Glisser-déposer la pastille verte')
div.sticker#sticker-pink(title='Glisser-déposer la pastille rose')
div.sticker#sticker-lightblue(title='Glisser-déposer la pastille bleu clair')
div.sticker#sticker-orange(title='Glisser-déposer la pastille orange')
div.sticker#sticker-purple(title='Glisser-déposer la pastille violette')
br
div.sticker#sticker-gold(title='Glisser-déposer une étoile dorée')
div.sticker#sticker-bluestar(title='Glisser-déposer une étoile bleue')
div.sticker#sticker-silverstar(title='Glisser-déposer une étoile argentée')
div.sticker#sticker-redstar(title='Glisser-déposer une étoile rouge')
div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
div.actions
a#share-link(href="#share", aria-controls="share", title="Partager le tableau")
i.fa.fa-fw.fa-lg.fa-share-alt
span Partager
a#revisions-link(href="#revisions", aria-controls="revisions", title="Révisions")
i.fa.fa-fw.fa-lg.fa-exchange
span Révisions
a#smallify(href="javascript:void(0);", title="Réduire la taille des post-it")
a#smallify(href="#size", title="Changer la taille des post-it")
i.fa.fa-fw.fa-lg.fa-search-plus
span.big Grands Post-it
span.small Petits Post-it
a#full-page(href="javascript:void(0);", aria-hidden="true", title="Plein écran")
a#full-page(href="#fullscreen", aria-hidden="true", title="Plein écran")
i.fa.fa-fw.fa-lg.fa-expand
span.full-screen Plein écran
span.contain-screen Réduire
a.toggle-nav(href="#share",aria-hidden="true", title="Partager le tableau")
i.fa.fa-fw.fa-lg.fa-share-alt
a.toggle-nav(href="#settings", aria-hidden="true", title="Options")
i.fa.fa-fw.fa-lg.fa-cog
block body
div.container
@ -30,87 +50,8 @@ block body
image#add-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/plus_alt_32x32.png' alt='Ajouter une colonne')
image#delete-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/minus_alt_32x32.png' alt='Supprimer une colonne')
div.container
div.buttons
i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon(title='Ajouter une note')
span Ajouter un Post-it
div.form-group
label.control-label(for='choose-card-color') Couleur
select#choose-card-color.form-control
option(value='random') Au hasard
option(value='yellow') Jaune
option(value='green') Vert
option(value='blue') Bleu
option(value='white') Blanc
div.stickers
div.sticker#sticker-red(title='Ajouter une pastille rouge')
div.sticker#sticker-blue(title='Ajouter une pastille bleue')
div.sticker#sticker-yellow(title='Ajouter une pastille jaune')
div.sticker#sticker-green(title='Ajouter une pastille verte')
br
div.sticker#sticker-pink(title='Ajouter une pastille rose')
div.sticker#sticker-lightblue(title='Ajouter une pastille bleu clair')
div.sticker#sticker-orange(title='Ajouter une pastille orange')
div.sticker#sticker-purple(title='Ajouter une pastille violette')
br
div.sticker#sticker-gold(title='Ajouter une étoile dorée')
div.sticker#sticker-bluestar(title='Ajouter une étoile bleue')
div.sticker#sticker-silverstar(title='Ajouter une étoile argentée')
div.sticker#sticker-redstar(title='Ajouter une étoile rouge')
br
div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
div.names
p <i class="fa fa-fw fa-lg fa-users"></i> connectés :
input#yourname-input
span.you-text (vous)
ul#names-ul
div#share.modal
div.modal-content
div.header
a#close(href="#")
div.box.box3
<svg viewbox="0 0 40 40"><path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /></svg>
h2 Partager le tableau
div.copy
div.form-inline
div.input-group
input#taburl.form-control(disabled='disabled')
div.input-group-addon
a#copyurl(href='#', title='Copier l\'adresse du tableau dans votre presse-papier')
i.fa.fa-clipboard
a(href="#")
div.overlay
div#revisions.modal
div.modal-content
div.header
a#close(href="#")
div.box.box3
<svg viewbox="0 0 40 40"><path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /></svg>
h2 Révisions - Import/Export
div.copy
div.revisions
h3 Révisions
button#create-revision.btn.btn-primary Créer une révision
div
ul#revisions-list
div.export
h3 Exporter le tableau
button#export-txt.btn.btn-primary Format texte
button#export-csv.btn.btn-primary Format CSV
button#export-json.btn.btn-primary Format JSON (pour import dans Post-it)
div.import
h3 Importer un tableau
div.form-inline
div.form-group
label(for="import-input") Fichier JSON à importer
input(type="file")#import-input.form-control
button#import-file.btn.btn-primary Importer
a(href="#")
div.overlay
div.names
p <i class="fa fa-fw fa-lg fa-users"></i> connectés :
input#yourname-input
span.you-text (vous)
ul#names-ul