WIP refacto
This commit is contained in:
Florian Schmitt
parent
324cd85a02
commit
c71306264b
11 changed files with 2146 additions and 1632 deletions
|
|
@ -12,9 +12,9 @@ block body
|
|||
tr
|
||||
td
|
||||
form.home(onsubmit="return go();")
|
||||
label Nommez votre nouveau tableau :
|
||||
label Créer/ouvrir un tableau intitulé :
|
||||
br
|
||||
input.text(type="text", name="name")
|
||||
a#go(onclick="return go();") Allons-y.
|
||||
a#go(onclick="return go();") OK
|
||||
p.home Exemple :
|
||||
p.home!= '<a href="//' + locals.url + '/demo">' + locals.url + '/demo</a>'
|
||||
|
|
|
|||
137
views/index.jade
137
views/index.jade
|
|
@ -1,22 +1,42 @@
|
|||
extends layout
|
||||
block header
|
||||
- if (locals.demo)
|
||||
div.notice-bar Tableau de démonstration.<br />N’y mettez rien d’important !
|
||||
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
|
||||
|
|
@ -1,49 +1,106 @@
|
|||
doctype html
|
||||
html(lang="fr")
|
||||
head
|
||||
|
||||
<!-- STYLES -->
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<link rel="stylesheet" title="cardsize" href="css/bigcards.css" type="text/css" media="all" />
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- External Scripts -->
|
||||
<script src="lib/jquery.ui.touch-punch.min.js"></script>
|
||||
<script src="lib/jquery.jeditable.js"></script>
|
||||
<script src="lib/jquery.blockUI.js"></script>
|
||||
<script src="lib/marked.min.js"></script>
|
||||
<script src="lib/moment-with-locales.min.js"></script>
|
||||
|
||||
<!-- Socket.IO -->
|
||||
<script src="socket.io/socket.io.js"></script>
|
||||
|
||||
<!-- ** My Script ** -->
|
||||
<script src="script.js"></script>
|
||||
link(href="css/font-awesome.min.css", rel="stylesheet")
|
||||
link(href="bootstrap-icons/font/bootstrap-icons.css", rel="stylesheet")
|
||||
link(rel="stylesheet", type="text/css", href="css/style.css")
|
||||
link(rel="stylesheet" title="cardsize", href="css/bigcards.css", type="text/css", media="all")
|
||||
if locals.faviconUrl
|
||||
link(rel="icon" type="image/png" href=locals.faviconUrl)
|
||||
link(rel="icon", type="image/png", href=locals.faviconUrl)
|
||||
else
|
||||
link(rel="icon" type="image/png" href="/images/favicon.png")
|
||||
|
||||
link(rel="icon", type="image/png", href="/images/favicon.png")
|
||||
title= locals.pageTitle
|
||||
|
||||
body
|
||||
div#header-bar(data-url=locals.headerBarUrl)
|
||||
header.container.main-header
|
||||
div.title
|
||||
a(href="//" + locals.url, title="Retour à la page d'accueil")
|
||||
if locals.logoUrl
|
||||
img.logo(src=locals.logoUrl, alt="logo Post-it")
|
||||
else
|
||||
img.logo(src="images/logo-Post-it.svg", alt="logo Post-it")
|
||||
div.base-line Organiser ses idées collectivement
|
||||
block header
|
||||
main
|
||||
block body
|
||||
div.clearfix
|
||||
footer.container
|
||||
block footer
|
||||
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>
|
||||
div#site-wrapper
|
||||
div#site-canvas
|
||||
div#site-menu
|
||||
a.toggle-nav.pull-right.close-link(href="#") Fermer
|
||||
i.fa.fa-times
|
||||
|
||||
div#share
|
||||
div.copy
|
||||
h2 Partager le tableau
|
||||
h3 par lien
|
||||
div.form-inline
|
||||
div.input-group
|
||||
input.replace-url.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
|
||||
h3 en iframe HTML
|
||||
div.form-inline
|
||||
div.input-group
|
||||
textarea.share-iframe.form-control(disabled='disabled', name="html-widget", cols="30", rows="3")
|
||||
<iframe src="{{replace-url}}" width="100%" height="600" frameborder="0"></iframe>
|
||||
div.input-group-addon
|
||||
a#copyurl(href='#', title='Copier l\'adresse du tableau dans votre presse-papier')
|
||||
i.fa.fa-clipboard
|
||||
div.export
|
||||
h2 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#settings
|
||||
h2 Image de fond
|
||||
div.backgrounds
|
||||
img.bg(src="images/backgrounds/lagune.jpg", alt="lagune")
|
||||
img.bg(src="images/backgrounds/canoe.jpg", alt="canoe")
|
||||
img.bg(src="images/backgrounds/ciel.jpg", alt="ciel")
|
||||
img.bg(src="images/backgrounds/contreplaque.jpg", alt="contreplaque")
|
||||
img.bg(src="images/backgrounds/muscaris.jpg", alt="muscaris")
|
||||
img.bg(src="images/backgrounds/nuagesoir.jpg", alt="nuagesoir")
|
||||
img.bg(src="images/backgrounds/osier.jpg", alt="osier")
|
||||
img.bg(src="images/backgrounds/planches.jpg", alt="planches")
|
||||
img.bg(src="images/backgrounds/ardoise.jpg", alt="ardoise")
|
||||
img.bg(src="images/backgrounds/clouds.jpg", alt="clouds")
|
||||
img.bg(src="images/backgrounds/crab.jpg", alt="crab")
|
||||
img.bg(src="images/backgrounds/ecorces.jpg", alt="ecorces")
|
||||
img.bg(src="images/backgrounds/kiwi.jpg", alt="kiwi")
|
||||
img.bg(src="images/backgrounds/plants.jpg", alt="plants")
|
||||
img.bg(src="images/backgrounds/straw.jpg", alt="straw")
|
||||
img.bg(src="images/backgrounds/textile.jpg", alt="textile")
|
||||
img.bg(src="images/backgrounds/trees.jpg", alt="trees")
|
||||
img.bg(src="images/backgrounds/yellow-bamboos.jpg", alt="yellow-bamboos")
|
||||
input.bgurl.form-control(type="url", placeholder="URL vers image de fond", name="bgurl")
|
||||
div.revisions
|
||||
h2 Révisions
|
||||
button#create-revision.btn.btn-primary Créer une révision
|
||||
div
|
||||
ul#revisions-list
|
||||
div.import
|
||||
h2 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
|
||||
div#header-bar(data-url=locals.headerBarUrl)
|
||||
header.container.main-header
|
||||
div.title
|
||||
a(href="/", title="Retour à la page d'accueil")
|
||||
if locals.logoUrl
|
||||
img.logo(src=locals.logoUrl, alt="logo Post-it")
|
||||
else
|
||||
img.logo(src="images/logo-Post-it.svg", alt="logo Post-it")
|
||||
if (locals.home === true)
|
||||
div.base-line Organiser ses idées collectivement
|
||||
if (locals.demo === true)
|
||||
div.base-line Tableau de démonstration.<br />N’y mettez rien d’important !
|
||||
block header
|
||||
main
|
||||
block body
|
||||
div.clearfix
|
||||
footer.container
|
||||
block footer
|
||||
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(src="/reload/reload.js")
|
||||
script(src="lib/jquery.min.js")
|
||||
script(src="lib/jquery-ui.min.js")
|
||||
script(src="lib/jquery.ui.touch-punch.min.js")
|
||||
script(src="lib/jquery.jeditable.js")
|
||||
script(src="lib/jquery.blockUI.js")
|
||||
script(src="lib/marked.min.js")
|
||||
script(src="lib/moment-with-locales.min.js")
|
||||
script(src="socket.io/socket.io.js")
|
||||
script(src="script.js")
|
||||
Loading…
Add table
Add a link
Reference in a new issue