polish integration graphique: modals
This commit is contained in:
Florian Schmitt
parent
3b3914aed6
commit
b7ae41fc45
5 changed files with 426 additions and 156 deletions
|
|
@ -10,7 +10,7 @@ body
|
|||
div.container
|
||||
header.main-header
|
||||
a(href="/", title="Retour à la page d'accueil")
|
||||
img.logo(src="/images/logo-Post-it.svg", alt="logo Post-it")
|
||||
img.logo(src="/images/logo-Post-it.svg", alt="logo Post-it")
|
||||
div.base-line Organiser ses idées collectivement
|
||||
main
|
||||
div.board-outline
|
||||
|
|
@ -31,5 +31,5 @@ body
|
|||
|
||||
//display # of active users here
|
||||
div.active-connections= "Connexions en cours : " + connected
|
||||
div.credits Logiciel libre basé sur <a href="https://framagit.org/framasoft/framemo">Framemo</a> et <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a>
|
||||
div.credits Logiciel libre basé sur <a href="https://framagit.org/framasoft/framemo">Framemo</a> et <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a> - <a href="https://framagit.org/colibris/framemo">Code source</a>
|
||||
script(type="text/javascript", src="/home.js")
|
||||
|
|
|
|||
194
views/index.jade
194
views/index.jade
|
|
@ -1,90 +1,116 @@
|
|||
extends layout
|
||||
|
||||
block body
|
||||
- if (locals.demo)
|
||||
div.notice-bar Ceci est un tableau de démonstration. N’y mettez rien d’important
|
||||
div.container
|
||||
- if (locals.demo)
|
||||
div.pull-left.notice-bar Tableau de démonstration. N’y mettez rien d’important !
|
||||
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")
|
||||
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")
|
||||
i.fa.fa-fw.fa-lg.fa-expand
|
||||
span.full-screen Plein écran
|
||||
span.contain-screen Réduire
|
||||
div.clearfix
|
||||
div.board-container
|
||||
div.board-outline
|
||||
div#board
|
||||
div#board-doodles
|
||||
table#board-table.board-table
|
||||
tr
|
||||
td#icon-col(width='1%')
|
||||
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.board-outline
|
||||
div#board
|
||||
div#board-doodles
|
||||
|
||||
table#board-table.board-table
|
||||
tr
|
||||
td#icon-col(width='1%')
|
||||
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.buttons
|
||||
i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon(title='Ajouter une note')
|
||||
i#smallify.fa.fa-expand.fa-2x.bottom-icon(title='Réduire la taille des notes')
|
||||
div.form-group
|
||||
label.control-label(for='choose-card-color') Choisir la couleur de la nouvelle note
|
||||
select#choose-card-color.form-control
|
||||
option(value='random') Couleur 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')
|
||||
//div.sticker#sticker-silverstar
|
||||
//div#addsticker
|
||||
br
|
||||
div.sticker#sticker-gold(title='Ajouter une étoile dorée')
|
||||
// image(src="/images/stickers/sticker-gold.png")
|
||||
div.sticker#sticker-bluestar(title='Ajouter une étoile bleue')
|
||||
// image(src="/images/stickers/sticker-bluestar.png")
|
||||
div.sticker#sticker-silverstar(title='Ajouter une étoile argentée')
|
||||
// image(src="/images/stickers/sticker-silverstar.png")
|
||||
div.sticker#sticker-redstar(title='Ajouter une étoile rouge')
|
||||
// image(src="/images/stickers/sticker-redstar.png")
|
||||
br
|
||||
div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
|
||||
|
||||
|
||||
div.names
|
||||
p connectés :
|
||||
//image#user-icon(src="/images/icons/cc/black/png/user_icon&16.png")
|
||||
input#yourname-input
|
||||
span.you-text (vous)
|
||||
ul#names-ul
|
||||
|
||||
div.share
|
||||
h3 Partager le tableau
|
||||
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
|
||||
|
||||
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.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(for="import-input") fichier JSON à importer
|
||||
input(type="file")#import-input.form-control
|
||||
button#import-file.btn.btn-primary Importer
|
||||
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.revisions
|
||||
h3 Révisions
|
||||
button#create-revision.btn.btn-primary Créer une révision
|
||||
div
|
||||
ul#revisions-list
|
||||
|
||||
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
|
||||
|
|
@ -35,6 +35,8 @@ html(lang="fr")
|
|||
a(href="/", title="Retour à la page d'accueil")
|
||||
img.logo(src="/images/logo-Post-it.svg", alt="logo Post-it")
|
||||
div.base-line Organiser ses idées collectivement
|
||||
main
|
||||
block body
|
||||
div.credits Logiciel libre basé sur <a href="https://framagit.org/framasoft/framemo">Framemo</a> et <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a>
|
||||
main
|
||||
block body
|
||||
div.clearfix
|
||||
div.container
|
||||
div.credits Logiciel libre basé sur <a href="https://framagit.org/framasoft/framemo">Framemo</a> et <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a> - <a href="https://framagit.org/colibris/framemo">Code source</a>
|
||||
Loading…
Add table
Add a link
Reference in a new issue