diff --git a/client/css/style.css b/client/css/style.css index 1369075..b198bb6 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -94,7 +94,6 @@ body { color: #333; padding: 0; margin: 0; - user-select: none; -o-user-select: none; -moz-user-select: none; @@ -136,13 +135,13 @@ a:hover, a:focus, a:active { } .main-header { - margin:2em 0; + margin:2em 0 0 0; display: flex; align-content: space-around; align-items: center; } .logo { - width: 400px; + width: 350px; } .base-line { font-family: 'geomanistitalic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; @@ -155,6 +154,58 @@ a:hover, a:focus, a:active { max-width:1140px; margin: 0 auto; } +.container-fluid { + margin: 1em; +} +.board-container { + margin: 1em auto 0 auto; + width:1140px; +} + +.actions { + float:right; + margin-top: 1em; +} +.actions a { + font-weight: bold; + text-transform: uppercase; + font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin-left:1em; + transition: color ease-out .2s; +} +.actions a:hover { + text-decoration: none; + color:#e33d8a; +} + +#smallify .fa-search-plus ~ .big { + display:inline-block; +} +#smallify .fa-search-plus ~ .big ~ .small { + display:none; +} +#smallify .fa-search-minus ~ .big { + display:none; +} +#smallify .fa-search-minus ~ .big ~ .small { + display:inline-block; +} +#full-page .fa-expand ~ .full-screen { + display:inline-block; +} +#full-page .fa-expand ~ .full-screen ~ .contain-screen { + display:none; +} +#full-page .fa-compress ~ .full-screen { + display:none; +} +#full-page .fa-compress ~ .full-screen ~ .contain-screen { + display:inline-block; +} +.clearfix { + clear:both; +} + #board { position: relative; background-color: #EEE; @@ -176,6 +227,7 @@ a:hover, a:focus, a:active { display: block; height: 466px; box-shadow: 1px 1px 1px #aaa; + margin: 0 auto; } #board-doodles { @@ -187,13 +239,6 @@ a:hover, a:focus, a:active { background-image: url('/images/scribbles2.png'); } - - -.hover .content { - xborder: solid rgba(92, 157, 181, 0.5) 3px; -} - - .card-icon { display: none; position: absolute; @@ -392,13 +437,10 @@ h2 { } .names input:hover { - xpadding: 2px 2px 2px 2px; - xborder: solid 1px #E5E5E5; outline: 0; width: 100px; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); - xopacity: .5; background: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; border-radius: 10px; @@ -649,21 +691,6 @@ input.text { border-bottom: dashed 3px #64d29b; } -input:hover { - x-webkit-box-shadow: 0px 0px 4px #000; - xbackground: none; -} - - - #go { - /* padding: 0 10px 5px 0; */ - /* border-radius: 10px; */ - /* margin-bottom: 10px; */ - /* font-size: 40px; */ - /* xborder: solid 1px; */ - - } - #go:hover { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2); text-decoration: none; @@ -695,9 +722,11 @@ input:hover { .notice-bar { padding: 0; - margin: 0; + margin: 1em 0 0 0; text-align: center; color:#e33d8a; + text-transform:uppercase; + font-weight: bold; } .notice-bar a { @@ -747,15 +776,7 @@ img { bottom: 4px; } - - - - - .filler { - xwidth: 100%; - xbackground-color: rgba(255, 0, 0, 0.1); - xheight: 100%; right: 0; bottom: 0; position: absolute; @@ -923,5 +944,228 @@ img { } .credits { - float:right; -} \ No newline at end of file + text-align: center; +} + +/** +* modal.css +* Author: Pedro Laxe +* Version: 1.0.6 +* License: GPLv2 +**/ +.modal { + left: 50%; + margin: -250px 0 0 -32%; + opacity: 0; + position: absolute; + top: -50%; + visibility: hidden; + width: 65%; + box-shadow: 0 3px 3px rgba(0,0,0,.25); + box-sizing: border-box; + transition: all .4s ease-in-out; + -moz-transition: all .4s ease-in-out; + -webkit-transition: all .4s ease-in-out; +} +.modal:target { + opacity: 1; + top: 50%; + visibility: visible; +} +.modal .header, .modal .footer { + border-bottom: 1px solid #e7e7e7; + border-radius: 5px 5px 0 0; +} +.modal .footer { + border: none; + border-top: 1px solid #e7e7e7; + border-radius: 0 0 5px 5px; +} +.modal h2 { + margin: 0; + color: #333333; +} +.modal .btn { + float: right; +} +.modal .copy, .modal .header, .modal .footer { + padding: 5px; + color: #333333; +} +.modal-content { + background: #f7f7f7; + position: relative; + z-index: 20; + border-radius: 5px; + color: #333333; +} +.modal .copy { + background: #fff; + min-height:200px; +} +.modal .overlay { + background-color: #000; + background: rgba(0,0,0,.8); + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 10; +} +.copy ul li a { + color: #333333; + text-decoration: none; +} +/* Responsive Options */ +@media screen and (min-width: 768px) { + .modal{ + width:600px; + margin:-250px 0px 0px -18.2%; + top: -50%; + } +} +.modalcss-button { + /* Structure */ + display: inline-block; + zoom: 1; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + text-align: center; + cursor: pointer; + -webkit-user-drag: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* Firefox: Get rid of the inner focus border */ +.modalcss-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.modalcss-button { + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: #444; /* rgba not supported (IE 8) */ + color: rgba(0, 0, 0, 0.80); /* rgba supported */ + border: 1px solid #999; /*IE 6/7/8*/ + border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ + background-color: #E6E6E6; + text-decoration: none; + border-radius: 2px; +} + +.modalcss-button-hover, +.modalcss-button:hover, +.modalcss-button:focus { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); + background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10)); + background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); +} +.modalcss-button:focus { + outline: 0; +} +.modalcss-button-active, +.modalcss-button:active { + box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; + border-color: #000\9; +} +.modalcss-button[disabled], +.modalcss-button-disabled, +.modalcss-button-disabled:hover, +.modalcss-button-disabled:focus, +.modalcss-button-disabled:active { + border: none; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: alpha(opacity=40); + -khtml-opacity: 0.40; + -moz-opacity: 0.40; + opacity: 0.40; + cursor: not-allowed; + box-shadow: none; +} + +.modalcss-button-hidden { + display: none; +} + +/* Firefox: Get rid of the inner focus border */ +.modalcss-button::-moz-focus-inner{ + padding: 0; + border: 0; +} + +.modalcss-button-primary, +.modalcss-button-selected, +a.modalcss-button-primary, +a.modalcss-button-selected { + background-color: rgb(0, 120, 231); + color: #fff; +} +.button-success, + .button-error, + .button-warning, + .button-secondary { + color: white; + border-radius: 4px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + } + + .button-success { + background: rgb(28, 184, 65); /* this is a green */ + } + + .button-error { + background: rgb(202, 60, 60); /* this is a maroon */ + } + + .button-warning { + background: rgb(223, 117, 20); /* this is an orange */ + } + + .button-secondary { + background: rgb(66, 184, 221); /* this is a light blue */ + } +/* Responsive Video */ +.video { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; height: 0; overflow: hidden; +} +.video iframe, +.video object, +.video embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +/* Close Button */ +.box3 { + width: 25px; + right: 0px; + position: absolute; + margin: 5px; +} +svg { + display: block; +} +.close-x { + stroke: black; + fill: transparent; + stroke-linecap: round; + stroke-width: 5; +} diff --git a/client/script.js b/client/script.js index 215ed27..f846503 100644 --- a/client/script.js +++ b/client/script.js @@ -1,3 +1,13 @@ +function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } + } + var cards = {}; var totalcolumns = 0; var columns = []; @@ -1080,21 +1090,6 @@ $(document).ready(function(){ }, 500); - // Tabs - $('.board-outline') - .before( - '' - ) - .wrap( - '
' - ) $('.names').css({'margin':'auto','width':'auto'}).addClass('pull-right'); @@ -1114,32 +1109,28 @@ $(document).ready(function(){ // Style $('#create-card').addClass('vert fa-3x').css('opacity','1'); - $('#smallify').removeClass('fa-expand').addClass('fa-search-minus').on('click',function(){ + $('#smallify').on('click',function(){ if (currentTheme == "bigcards") { - $(this).removeClass('fa-search-plus').addClass('fa-search-minus'); + $(this).children('i').removeClass('fa-search-plus').addClass('fa-search-minus'); } else { - $(this).removeClass('fa-search-minus').addClass('fa-search-plus'); + $(this).children('i').removeClass('fa-search-minus').addClass('fa-search-plus'); } }) $('#full-page').on('click', function(){ - if ($('.container.ombre').length) { + if ($(this).children('i').hasClass('fa-expand')) { $(this).children('i').removeClass('fa-expand').addClass('fa-compress'); - $('.container.ombre').removeClass('container').addClass('container-fluid'); + $('#colibris-menu, .main-header, .credits').hide(); } else { $(this).children('i').removeClass('fa-compress').addClass('fa-expand'); - $('.container-fluid.ombre').removeClass('container-fluid').addClass('container'); + $('#colibris-menu, .main-header, .credits').show(); } + toggleFullScreen(); }) - $('main hr').hide(); - /** Mode iframe **/ if(top.location!=self.document.location) { - - $('#full-page').hide().trigger('click'); - $('main hr, header').hide(); - + $('#colibris-menu, .main-header, .credits').hide(); } // put URL in share input @@ -1190,4 +1181,11 @@ getJSON(url, styleElement.innerHTML = data.style; document.getElementById('colibris-menu').appendChild(styleElement); } - }); \ No newline at end of file + }); + +//Close with Escape Button +window.onkeydown = function( event ) { + if ( event.keyCode === 27 ) { + document.getElementById('close').click(); + } +}; \ No newline at end of file diff --git a/views/home.jade b/views/home.jade index e13b3a2..4ba1524 100644 --- a/views/home.jade +++ b/views/home.jade @@ -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 Framemo et Scrumblr + div.credits Logiciel libre basé sur Framemo et Scrumblr - Code source script(type="text/javascript", src="/home.js") diff --git a/views/index.jade b/views/index.jade index a9daddd..e36446a 100644 --- a/views/index.jade +++ b/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 \ No newline at end of file + + 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 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 + + 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 + + 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 \ No newline at end of file diff --git a/views/layout.jade b/views/layout.jade index 5f22514..ceef0c6 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -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 Framemo et Scrumblr \ No newline at end of file + main + block body + div.clearfix + div.container + div.credits Logiciel libre basé sur Framemo et Scrumblr - Code source \ No newline at end of file