mrflos/memo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP refacto

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.nodemonignore
View file

@ -1,4 +0,0 @@
/client/*
.DS_Store
/.git/*
*.rdb

3
client/css/bigcards.css
View file

@ -1,8 +1,6 @@
.card {
width: 230px;
height: 152px;
xpadding: 5px; float: left;
xmargin: 0 10px 10px 0;
font-size: .9em;
@ -32,7 +30,6 @@
.card-image {
position: absolute;
xtop: -10;
left: -3px;
width: 100%;
height: 100%;

1349
client/css/style.css
View file

File diff suppressed because it is too large Load diff

150
client/script.js
View file

@ -47,7 +47,7 @@ socket.on("connect", function () {
socket.on("disconnect", function () {
blockUI("Serveur déconnecté. Veuillez rafraîchir la page pour essayer de vous reconnecter…")
//$('.blockOverlay').click($.unblockUI);
//$('.blockOverlay').on('click', $.unblockUI);
})
socket.on("message", function (data) {
@ -189,7 +189,7 @@ function getMessage(m) {
}
}
$(document).bind("keyup", function (event) {
$(document).on("keyup", function (event) {
keyTrap = event.which
})
@ -229,7 +229,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
//we click on a card
//The following doesn't work so we will do the bug
//fix recommended in the above bug report
// card.click( function() {
// card.on('click', function() {
// $(this).focus();
// } );
@ -251,7 +251,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
})
//After a drag:
card.bind("dragstop", function (event, ui) {
card.on("dragstop", function (event, ui) {
if (keyTrap == 27) {
keyTrap = null
return
@ -323,7 +323,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
}
)
card.children(".delete-card-icon").click(function () {
card.children(".delete-card-icon").on("click", function () {
$("#" + id).remove()
//notify server of delete
sendAction("deleteCard", {
@ -415,11 +415,6 @@ function createCard(id, text, x, y, rot, colour) {
}
function randomCardColour() {
var choosed = $("#choose-card-color").val()
if (choosed !== "random") {
return choosed
}
var colours = ["yellow", "green", "blue", "white"]
var i = Math.floor(Math.random() * colours.length)
@ -726,16 +721,14 @@ function download(filename, text) {
element.style.display = "none"
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
function addRevision(timestamp) {
var li = $('<li id="revision-' + timestamp + '"></li>')
var s1 = $("<span></span>")
var s2 = $('<img src="../images/stickers/sticker-deletestar.png" alt="delete revision">')
var s2 = $('<img src="/images/stickers/sticker-deletestar.png" alt="delete revision">')
if (typeof timestamp === "string") {
timestamp = parseInt(timestamp)
}
@ -745,13 +738,13 @@ function addRevision(timestamp) {
li.append(s2)
$("#revisions-list").append(li)
s1.click(function () {
$('body').on("click", s1, function () {
socket.json.send({
action: "exportRevision",
data: timestamp,
})
})
s2.click(function () {
$('body').on("click", s2, function () {
socket.json.send({
action: "deleteRevision",
data: timestamp,
@ -770,39 +763,29 @@ $(function () {
//setTimeout($.unblockUI, 2000);
$("#create-card").click(function () {
$(".add-post-it").on("click", function () {
var rotation = Math.random() * 10 - 5 //add a bit of random rotation (+/- 10deg)
uniqueID = Math.round(Math.random() * 99999999) //is this big enough to assure uniqueness?
var cardLeft = 150 + Math.random() * 400
var cardTop = 20 + Math.random() * 50
var uniqueID = Math.round(Math.random() * 99999999) //is this big enough to assure uniqueness?
//alert(uniqueID);
createCard(
"card" + uniqueID,
"",
58,
$("div.board-outline").height(), // hack - not a great way to get the new card coordinates, but most consistant ATM
rotation,
randomCardColour()
)
createCard("card" + uniqueID, "", cardLeft, cardTop, rotation, $(this).data("color"))
})
// Style changer
$("#smallify").click(function () {
$("#smallify").on("click", function () {
if (currentTheme == "bigcards") {
changeThemeTo("smallcards")
} else if (currentTheme == "smallcards") {
changeThemeTo("bigcards")
}
/*else if (currentTheme == "nocards")
{
currentTheme = "bigcards";
$("link[title=cardsize]").attr("href", "css/bigcards.css");
}*/
sendAction("changeTheme", currentTheme)
return false
})
$("#icon-col").hover(
$("#icon-col").on(
"hover",
function () {
$(".col-icon").fadeIn(10)
},
@ -811,29 +794,19 @@ $(function () {
}
)
$("#add-col").click(function () {
$("#add-col").on("click", function () {
createColumn("Nouveau")
return false
})
$("#delete-col").click(function () {
$("#delete-col").on("click", function () {
deleteColumn()
return false
})
// $('#cog-button').click( function(){
// $('#config-dropdown').fadeToggle();
// } );
// $('#config-dropdown').hover(
// function(){ /*$('#config-dropdown').fadeIn()*/ },
// function(){ $('#config-dropdown').fadeOut() }
// );
//
var user_name = getCookie("scrumscrum-username")
$("#yourname-input").focus(function () {
$("#yourname-input").on("focus", function () {
if ($(this).val() == "anonyme") {
$(this).val("")
}
@ -841,7 +814,7 @@ $(function () {
$(this).addClass("focused")
})
$("#yourname-input").blur(function () {
$("#yourname-input").on("blur", function () {
if ($(this).val() === "") {
$(this).val("anonyme")
}
@ -851,14 +824,14 @@ $(function () {
})
$("#yourname-input").val(user_name)
$("#yourname-input").blur()
$("#yourname-input").trigger("blur")
$("#yourname-li").hide()
$("#yourname-input").keypress(function (e) {
$("#yourname-input").on("keypress", function (e) {
code = e.keyCode ? e.keyCode : e.which
if (code == 10 || code == 13) {
$(this).blur()
$(this).trigger("blur")
}
})
@ -879,13 +852,13 @@ $(function () {
;(function () {
var offsets
$(".board-outline").bind("resizestart", function () {
$(".board-outline").on("resizestart", function () {
offsets = calcCardOffset()
})
$(".board-outline").bind("resize", function (event, ui) {
$(".board-outline").on("resize", function (event, ui) {
adjustCard(offsets, false)
})
$(".board-outline").bind("resizestop", function (event, ui) {
$(".board-outline").on("resizestop", function (event, ui) {
boardResizeHappened(event, ui)
adjustCard(offsets, true)
})
@ -901,7 +874,7 @@ $(function () {
containment: "parent",
})
$("#export-txt").click(function () {
$("#export-txt").on("click", function () {
$('.nav-tabs a[href="#scrumblr"]').tab("show")
socket.json.send({
action: "exportTxt",
@ -909,7 +882,7 @@ $(function () {
})
})
$("#export-csv").click(function () {
$("#export-csv").on("click", function () {
$('.nav-tabs a[href="#scrumblr"]').tab("show")
socket.json.send({
action: "exportCsv",
@ -917,7 +890,7 @@ $(function () {
})
})
$("#export-json").click(function () {
$("#export-json").on("click", function () {
socket.json.send({
action: "exportJson",
data: {
@ -927,7 +900,7 @@ $(function () {
})
})
$("#import-file").click(function (evt) {
$("#import-file").on("click", function (evt) {
evt.stopPropagation()
evt.preventDefault()
@ -943,7 +916,7 @@ $(function () {
fr.readAsText(f)
})
$("#create-revision").click(function () {
$("#create-revision").on("click", function () {
socket.json.send({
action: "createRevision",
data: {
@ -1048,8 +1021,6 @@ $(document).ready(function () {
}
}, 500)
$(".names").css({ margin: "auto", width: "auto" }).addClass("pull-right")
$("#scrumblr")
.append($(".names, .stickers, .buttons"))
.after(
@ -1065,7 +1036,6 @@ $(document).ready(function () {
$("#about").append($("#tuto-faq, #le-logiciel, #jardin"))
// Style
$("#create-card").addClass("vert fa-3x").css("opacity", "1")
$("#smallify").on("click", function () {
if (currentTheme == "bigcards") {
$(this).children("i").removeClass("fa-search-plus").addClass("fa-search-minus")
@ -1091,9 +1061,11 @@ $(document).ready(function () {
}
// put URL in share input
$("#taburl").val(location)
var mainurl = location.toString().split('#')[0]
$(".replace-url").val(mainurl)
$(".share-iframe").text($(".share-iframe").text().replace('{{replace-url}}', mainurl))
// copy URL to clipboard
$("#copyurl").click(function (e) {
$("#copyurl").on("click", function (e) {
e.preventDefault()
var node = document.getElementById("taburl")
node.disabled = null
@ -1115,7 +1087,7 @@ $(document).ready(function () {
//Close with Escape Button
window.onkeydown = function (event) {
if (event.keyCode === 27) {
document.getElementById("close").click()
document.getElementById("close").on("click")
}
}
@ -1155,3 +1127,53 @@ $(function () {
})
}
})
$(function () {
// Toggle Nav on Click
$(".toggle-nav").on("click", function () {
var target = $(this).attr("href")
if (target === '#') {
target = false
} else {
history.replaceState('', '', target);
}
toggleNav(target)
return false
})
// When nav opened, a click on the canvas hides the menu
$("body").on("click", ".show-nav #site-canvas main", function () {
toggleNav(false)
return false
})
$(".backgrounds .bg").on("click", function () {
if ($(this).hasClass("selected")) {
$("body").css("background-image", "none")
$(this).removeClass("selected")
} else {
$(".selected").removeClass("selected")
$('.bgurl').val('')
$("body").css("background-image", 'url("/' + $(this).attr("src") + '")')
$(this).addClass("selected")
}
})
$('.bgurl').on('change', function() {
var url = $(this).val()
if (url) {
$(".selected").removeClass("selected")
$("body").css("background-image", 'url("' + url + '")')
}
})
})
function toggleNav(target) {
if ($("#site-wrapper").hasClass("show-nav") && target === false) {
$("#site-wrapper").removeClass("show-nav")
} else {
$("#share, #settings").hide()
if (target !== false) {
$(target).show()
}
$("#site-wrapper").addClass("show-nav")
}
return false
}

2
config.js
View file

@ -40,4 +40,4 @@ exports.database = {
exports.headerBarUrl = argv['headerBarUrl'] || null /* example url with appropriate json markup : 'https://colibris-lemouvement.org/archipel-markup?domain=colibris-outilslibres.org' */
exports.logoUrl = argv['logoUrl'] || null /* example logo url : 'https://postit.colibris-outilslibres.org/images/logo-Post-it.svg' */
exports.faviconUrl = argv['faviconUrl'] || null /* example favicon url : 'https://postit.colibris-outilslibres.org/images/favicon.png' */
exports.faviconUrl = argv['faviconUrl'] || null /* example favicon url : 'https://postit.colibris-outilslibres.org/images/favicon.png' */

1930
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

22
package.json
View file

@ -1,9 +1,10 @@
{
"name": "scrumblr",
"description": "Web-based simulation of a physical agile sprint board that supports real-time collaboration.",
"version": "0.2.1",
"version": "1.0.0",
"license": "AGPL-3.0",
"repository": {
"url": "http://framagit.org/colibris/framemo"
"url": "https://framagit.org/colibris/framemo"
},
"author": "Ali Asaria",
"main": "server.js",
@ -14,20 +15,33 @@
"node": "0.4.7"
},
"scripts": {
"start": "node server.js"
"start": "nodemon server.js -e js,css,jade,json"
},
"nodemonConfig": {
"ignore": [
".DS_Store",
" /.git/*",
"*.rdb",
"docs/*"
]
},
"dependencies": {
"async": "~0.9.0",
"bootstrap-icons": "^1.8.1",
"compression": "^1.1.0",
"express": "4.x",
"html2canvas": "^1.4.1",
"jade": "~1.5.0",
"redis": "~0.12.1",
"reload": "^3.2.0",
"sanitizer": "~0.1.1",
"simplesets": "~1.2.0",
"socket.io": "1.x",
"typeface-inter": "^3.18.1",
"yargs": "~2.3.0"
},
"devDependencies": {
"forever": "^0.15.3"
"forever": "^0.15.3",
"nodemon": "^2.0.15"
}
}

36
server.js
View file

@ -3,8 +3,7 @@
SYSTEM INCLUDES
**************/
var http = require("http")
// var sys = require('sys');
var async = require("async")
var reload = require('reload')
var sanitizer = require("sanitizer")
var compression = require("compression")
var express = require("express")
@ -33,12 +32,22 @@ var router = express.Router()
app.use(compression())
app.use(conf.baseurl, router)
router.use(express.static(__dirname + "/node_modules"))
router.use(express.static(__dirname + "/client"))
var server = require("http").Server(app)
server.listen(conf.port)
var server = http.createServer(app)
console.log("Server running at http://127.0.0.1:" + conf.port + "/")
// Reload code here
reload(app).then(function (reloadReturned) {
// reloadReturned is documented in the returns API in the README
// Reload started, start web server
server.listen(conf.port, function () {
console.log('Web server available on http://127.0.0.1:'+ conf.port )
})
}).catch(function (err) {
console.error('Reload could not start, could not start server/sample app', err)
})
/**************
SETUP Socket.IO
@ -53,15 +62,14 @@ var io = require("socket.io")(server, {
router.get("/", function (req, res) {
//console.log(req.header('host'));
url = req.header("host") + req.baseUrl
var connected = io.sockets.connected
clientsCount = Object.keys(connected).length
res.render("home.jade", {
url: url,
headerBarUrl: headerBarUrl,
logoUrl: logoUrl,
connected: clientsCount
connected: clientsCount,
home: true,
})
})
@ -69,10 +77,10 @@ router.get("/demo", function (req, res) {
url = req.header("host") + req.baseUrl
res.render("index.jade", {
pageTitle: "Post-it - demo",
headerBarUrl: headerBarUrl,
headerBarUrl: headerBarUrl,
logoUrl: logoUrl,
url: url,
demo: true
demo: true,
})
})
@ -80,12 +88,16 @@ router.get("/:id", function (req, res) {
url = req.header("host") + req.baseUrl
res.render("index.jade", {
pageTitle: "Post-it - " + req.params.id,
headerBarUrl: headerBarUrl,
headerBarUrl: headerBarUrl,
logoUrl: logoUrl,
url: url
url: url,
})
})
router.get("/stats", function (req, res) {
console.log('TODO: stats')
})
/**************
SOCKET.I0
**************/

4
views/home.jade
View file

@ -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();") &nbsp;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
View file

@ -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

141
views/layout.jade
View file

@ -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&nbsp;&nbsp;
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")
&lt;iframe src="{{replace-url}}" width="100%" height="600" frameborder="0"&gt;&lt;/iframe&gt;
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")