diff --git a/customize.dist/main.css b/customize.dist/main.css index 3f2f1e6bd..026649207 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -1074,59 +1074,6 @@ html.cp, .cp .panel { background-color: #cccccc; } -.cp table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -.cp tbody { - border: 1px solid #555; -} -.cp tbody tr { - text-align: center; -} -.cp tbody tr:first-of-type th { - font-size: 20px; - border-top: 0px; - font-weight: bold; - padding: 10px; - text-decoration: underline; -} -.cp tbody tr:first-of-type th.table-refresh { - color: #46E981; - text-decoration: none; - cursor: pointer; -} -.cp tbody tr:nth-child(odd) { - background-color: #ffffff; -} -.cp tbody tr th:first-of-type { - border-left: 0px; -} -.cp tbody tr th { - box-sizing: border-box; - border: 1px solid #555; -} -.cp tbody tr th, -.cp tbody tr td { - color: #555; -} -.cp tbody tr th.remove, -.cp tbody tr td.remove { - cursor: pointer; -} -.cp tbody tr th:last-child { - border-right: 0px; -} -.cp tbody td { - border-right: 1px solid #555; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; -} -.cp tbody td:last-child { - border-right: none; -} .cp .bottom-left { border-bottom-left-radius: 5px; } @@ -1137,212 +1084,6 @@ html.cp, color: #FA5858; cursor: pointer !important; } -.cp form.realtime, -.cp div.realtime { - padding: 0px; - margin: 0px; -} -.cp form.realtime > textarea, -.cp div.realtime > textarea { - width: 50%; - height: 15vh; -} -.cp form.realtime table, -.cp div.realtime table { - border-collapse: collapse; - width: calc(100% - 1px); -} -.cp form.realtime table tr td:first-child, -.cp div.realtime table tr td:first-child { - position: absolute; - left: 29px; - top: auto; - width: calc(30% - 50px); -} -.cp form.realtime table tr td, -.cp div.realtime table tr td { - padding: 0px; - margin: 0px; -} -.cp form.realtime table tr td div.text-cell, -.cp div.realtime table tr td div.text-cell { - padding: 0px; - margin: 0px; - height: 100%; -} -.cp form.realtime table tr td div.text-cell input, -.cp div.realtime table tr td div.text-cell input { - width: 80%; - width: 90%; - height: 100%; - border: 0px; -} -.cp form.realtime table tr td div.text-cell input[disabled], -.cp div.realtime table tr td div.text-cell input[disabled] { - background-color: transparent; - color: #000; - font-weight: bold; -} -.cp form.realtime table tr td.checkbox-cell, -.cp div.realtime table tr td.checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 150px; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain { - display: inline-block; - height: 100%; - width: 100%; - position: relative; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain label, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain label { - background-color: transparent; - display: block; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { - display: none; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { - font-weight: bold; - background-color: #FA5858; - color: #000; - display: block; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { - height: 100%; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { - content: "✖"; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { - background-color: #46E981; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { - content: "✔"; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted { - background: #ddd; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { - display: none; -} -.cp form.realtime table input[type="text"], -.cp div.realtime table input[type="text"] { - height: auto; - border: 1px solid #fff; - width: 80%; -} -.cp form.realtime table thead td, -.cp div.realtime table thead td { - padding: 0px 5px; - background: #aaa; - border-radius: 20px 20px 0 0; - text-align: center; -} -.cp form.realtime table thead td input[type="text"], -.cp div.realtime table thead td input[type="text"] { - width: 100%; - box-sizing: border-box; -} -.cp form.realtime table thead td input[type="text"][disabled], -.cp div.realtime table thead td input[type="text"][disabled] { - color: #000; - padding: 1px 5px; - border: none; -} -.cp form.realtime table tbody .text-cell, -.cp div.realtime table tbody .text-cell { - background: #aaa; -} -.cp form.realtime table tbody .text-cell input[type="text"], -.cp div.realtime table tbody .text-cell input[type="text"] { - width: calc(100% - 50px); -} -.cp form.realtime table tbody .text-cell .edit, -.cp div.realtime table tbody .text-cell .edit { - float: right; - margin: 0 10px 0 0; -} -.cp form.realtime table tbody .text-cell .remove, -.cp div.realtime table tbody .text-cell .remove { - float: left; - margin: 0 0 0 10px; -} -.cp form.realtime table tbody td label, -.cp div.realtime table tbody td label { - border: 0.5px solid #555; -} -.cp form.realtime table .edit, -.cp div.realtime table .edit { - color: #000; - cursor: pointer; - float: left; - margin-left: 10px; -} -.cp form.realtime table .remove, -.cp div.realtime table .remove { - float: right; - margin-right: 10px; -} -.cp form.realtime table thead tr th input[type="text"][disabled], -.cp div.realtime table thead tr th input[type="text"][disabled] { - background-color: transparent; - color: #555; - font-weight: bold; -} -.cp form.realtime table thead tr th .remove, -.cp div.realtime table thead tr th .remove { - cursor: pointer; - font-size: 20px; -} -.cp form.realtime table tfoot tr, -.cp div.realtime table tfoot tr { - border: none; -} -.cp form.realtime table tfoot tr td, -.cp div.realtime table tfoot tr td { - border: none; - text-align: center; -} -.cp form.realtime table tfoot tr td .save, -.cp div.realtime table tfoot tr td .save { - padding: 15px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} -.cp form.realtime #adduser, -.cp div.realtime #adduser, -.cp form.realtime #addoption, -.cp div.realtime #addoption { - color: #46E981; - border: 1px solid #46E981; - padding: 15px; - cursor: pointer; -} -.cp form.realtime #adduser, -.cp div.realtime #adduser { - border-top-left-radius: 5px; -} -.cp form.realtime #addoption, -.cp div.realtime #addoption { - border-bottom-left-radius: 5px; -} #cors-store { display: none; } diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index cbee383bf..db8af27ce 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -520,60 +520,6 @@ noscript { /* Tables * Currently only used by /poll/ */ -table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -tbody { - border: 1px solid @poll-border-color; - tr { - text-align: center; - &:first-of-type th{ - font-size: 20px; - border-top: 0px; - font-weight: bold; - padding: 10px; - text-decoration: underline; - &.table-refresh { - color: @cp-green; - text-decoration: none; - cursor: pointer; - } - - } - &:nth-child(odd) { - background-color: @light-base; - } - th:first-of-type { - border-left: 0px; - } - th { - box-sizing: border-box; - border: 1px solid @poll-border-color; - } - th, td { - color: @fore; - - &.remove { - cursor: pointer; - } - } - th:last-child { - border-right: 0px; - } - } - - td { - border-right: 1px solid @poll-border-color; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; - &:last-child { - border-right: none; - } - } -} // form things .bottom-left { @@ -588,226 +534,6 @@ tbody { color: @cp-red; cursor: pointer !important; } - -form.realtime, div.realtime { - > input { - &[type="text"] { - - } - } - > textarea { - width: 50%; - height: 15vh; - } - - padding: 0px; - margin: 0px; - - table { - border-collapse: collapse; - width: ~"calc(100% - 1px)"; - tr { - td:first-child { - position:absolute; - left: 29px; - top: auto; - width: ~"calc(30% - 50px)"; - } - td { - padding: 0px; - margin: 0px; - - div.text-cell { - padding: 0px; - margin: 0px; - height: 100%; - - input { - width: 80%; - width: 90%; - height: 100%; - border: 0px; - &[disabled] { - background-color: transparent; - color: @poll-fg; - font-weight: bold; - } - } - } - - &.checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 150px; - - div.checkbox-contain { - display: inline-block; - height: 100%; - width: 100%; - position: relative; - - label { - background-color: transparent; - display: block; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; - } - - input { - &[type="checkbox"] { - &:not(.editable) { - display: none; - - ~ .cover { - display: block; - font-weight: bold; - - background-color: @cp-red; - color: @poll-cover-color; - - &:after { - height: 100%; - } - - &:after { content: "✖"; } - - display: block; - &.yes { - background-color: @cp-green; - &:after { content: "✔"; } - } - - &.uncommitted { - background: #ddd; - } - - - &.mine { - display: none; - } - } - } - } - } - } - } - } - } - - input { - &[type="text"] { - height: auto; - border: 1px solid @base; - width: 80%; - } - } - thead { - td { - padding: 0px 5px; - background: @poll-th-bg; - border-radius: 20px 20px 0 0; - text-align: center; - input { - &[type="text"] { - width: 100%; - box-sizing: border-box; - &[disabled] { - color: @poll-fg; - padding: 1px 5px; - border: none; - } - } - } - } - } - - tbody { - .text-cell { - background: @poll-td-bg; - //border-radius: 20px 0 0 20px; - input[type="text"] { - width: ~"calc(100% - 50px)"; - } - .edit { - float:right; - margin: 0 10px 0 0; - } - .remove { - float: left; - margin: 0 0 0 10px; - } - } - td { - label { - border: .5px solid @poll-border-color; - } - } - } - .edit { - color: @poll-cover-color; - cursor: pointer; - float: left; - margin-left: 10px; - } - - .remove { - float: right; - margin-right: 10px; - } - - thead { - tr { - th { - input[type="text"][disabled] { - background-color: transparent; - color: @fore; - font-weight: bold; - } - .remove { - cursor: pointer; - font-size: 20px; - } - } - } - } - tbody { - tr { - td { - - } - } - } - tfoot { - tr { - border: none; - td { - border: none; - text-align: center; - .save { - padding: 15px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - } - } - } - } - - #adduser, - #addoption { - color: @cp-green; - border: 1px solid @cp-green; - padding: 15px; - cursor: pointer; - } - - #adduser { .top-left; } - #addoption { .bottom-left; } -} } // hack for our cross-origin iframe diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less index 456adf9b2..b65af90d8 100644 --- a/customize.dist/src/less/mixins.less +++ b/customize.dist/src/less/mixins.less @@ -1,5 +1,5 @@ .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ - @font-face{ + @font-face { font-family: @family; src: url(@src) format(@fmt); font-weight: @weight; diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 20a1d80e1..8a0b4222e 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -60,12 +60,6 @@ @slide-default-bg: #000; -@poll-th-bg: #aaa; -@poll-td-bg: #aaa; -@poll-border-color: #555; -@poll-cover-color: #000; -@poll-fg: #000; - @bg-loading: @old-base; @color-loading: @old-fore; diff --git a/customize.dist/translations/messages.es.js b/customize.dist/translations/messages.es.js index cfe682c48..aafa9bf70 100644 --- a/customize.dist/translations/messages.es.js +++ b/customize.dist/translations/messages.es.js @@ -290,7 +290,7 @@ define(function () { out.fm_categoryError = "No se pudo abrir la categoría seleccionada, mostrando la raíz."; out.settings_userFeedbackHint1 = "CryptPad suministra informaciones muy básicas al servidor, para ayudarnos a mejorar vuestra experiencia."; out.settings_userFeedbackHint2 = "El contenido de tu pad nunca será compartido con el servidor."; - out.settings_userFeedback = "Activar feedback"; // "Disable user feedback" + out.settings_userFeedback = "Activar feedback"; out.settings_anonymous = "No has iniciado sesión. Tus ajustes se aplicarán solo a este navegador."; out.blog = "Blog"; out.initialState = "

Esto es CryptPad, el editor collaborativo en tiempo real zero knowledge.
Lo que escribes aquí es cifrado, con lo cual solo las personas con el enlace pueden accederlo.
Incluso el servido no puede ver lo que escribes.

Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí

 

"; @@ -356,5 +356,24 @@ define(function () { out.register_warning = "Zero Knowledge significa que no podemos recuperar tus datos si pierdes tu contraseña."; out.register_alreadyRegistered = "Este usuario ya existe, ¿iniciar sesión?"; + // 1.4.0 - Easter Bunny + + out.button_newwhiteboard = "Nueva Pizarra"; + out.wrongApp = "No se pudo mostrar el contenido de la sessión en tiempo real en tu navigador. Por favor, actualiza la página."; + out.synced = "Todo está guardado."; + out.saveTemplateButton = "Guardar como plantilla"; + out.saveTemplatePrompt = "Élige un título para la plantilla"; + out.templateSaved = "¡Plantilla guardada!"; + out.selectTemplate = "Élige una plantilla o pulsa ESC"; + out.slideOptionsTitle = "Personaliza tus diapositivas"; + out.slideOptionsButton = "Guardar (enter)"; + out.canvas_clear = "Limpiar"; + out.canvas_delete = "Borrar selección"; + out.canvas_disable = "No permitir dibujos"; + out.canvas_enable = "Permitir dibujos"; + out.canvas_width = "Talla"; + out.canvas_opacity = "Opacidad"; + out.settings_publicSigningKey = "Clave de Firma Pública"; + return out; }); diff --git a/package.json b/package.json index 882eeaa15..48aed5d0d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "scripts": { "lint": "jshint --config .jshintrc --exclude-path .jshintignore .", "test": "node TestSelenium.js", - "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css", + "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css", "template": "cd customize.dist/src && node build.js" } } diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 4ec0fabae..67609e2dc 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -1407,8 +1407,6 @@ load pinpad dynamically only after you know that it will be needed */ console.log('RPC handshake complete'); rpc = common.rpc = env.rpc = call; - // TODO check if pin list is up to date - // if not, reset common.arePinsSynced(function (err, yes) { if (!yes) { common.resetPins(function (err, hash) { diff --git a/www/poll/index.html b/www/poll/index.html index 296d6fbf5..31226d989 100644 --- a/www/poll/index.html +++ b/www/poll/index.html @@ -11,108 +11,8 @@ id="favicon" /> + - diff --git a/www/poll/main.js b/www/poll/main.js index aa3dceabf..b474d41f2 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -211,7 +211,7 @@ define([ }; /* Any time the realtime object changes, call this function */ - var change = function (o, n, path, throttle) { + var change = function (o, n, path, throttle, cb) { if (path && !Cryptpad.isArray(path)) { return; } @@ -260,8 +260,14 @@ define([ var displayedObj2 = mergeUncommitted(APP.proxy, APP.uncommitted); var f = getFocus(); Render.updateTable(table, displayedObj2, conf); + APP.proxy.table.rowsOrder.forEach(function (rowId) { + $('input[data-rt-id="' + rowId +'"]').val(APP.proxy.table.rows[rowId] || ''); + }); updateDisplayedTable(); setFocus(f); + if (typeof(cb) === "function") { + cb(); + } }; if (throttle) { @@ -281,7 +287,7 @@ define([ }; /* Called whenever an event is fired on an input element */ - var handleInput = function (input) { + var handleInput = function (input, isKeyup) { var type = input.type.toLowerCase(); var id = getRealtimeId(input); @@ -332,7 +338,9 @@ define([ }); } else if (isEdit) { unlockRow(id, function () { - change(); + change(null, null, null, null, function() { + $('input[data-rt-id="' + id + '"]').focus(); + }); }); } } else if (type === 'col') { @@ -345,7 +353,9 @@ define([ }); } else if (isEdit) { unlockColumn(id, function () { - change(); + change(null, null, null, null, function() { + $('input[data-rt-id="' + id + '"]').focus(); + }); }); } } else if (type === 'cell') { @@ -355,8 +365,8 @@ define([ } }; - var hideInputs = function (e) { - if ($(e.target).is('[type="text"]')) { + var hideInputs = function (e, isKeyup) { + if (!isKeyup && $(e.target).is('[type="text"]')) { return; } $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML); @@ -389,6 +399,10 @@ define([ switch (nodeName) { case 'INPUT': + if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) { + hideInputs(e, isKeyup); + return; + } handleInput(target); break; case 'SPAN': @@ -547,20 +561,18 @@ define([ var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly)); var $createRow = APP.$createRow = $('#create-option').click(function () { //console.error("BUTTON CLICKED! LOL"); - Render.createRow(proxy, function () { - change(); - var order = APP.proxy.table.rowsOrder; - - var last = order[order.length - 1]; - var $newest = $('[data-rt-id="' + last + '"]'); - $newest.val(''); - window.setTimeout(change); + Render.createRow(proxy, function (empty, id) { + change(null, null, null, null, function() { + $('.edit[data-rt-id="' + id + '"]').click(); + }); }); }); var $createCol = APP.$createCol = $('#create-user').click(function () { - Render.createColumn(proxy, function () { - change(); + Render.createColumn(proxy, function (empty, id) { + change(null, null, null, null, function() { + $('.edit[data-rt-id="' + id + '"]').click(); + }); }); }); diff --git a/www/poll/poll.css b/www/poll/poll.css new file mode 100644 index 000000000..321121b59 --- /dev/null +++ b/www/poll/poll.css @@ -0,0 +1,357 @@ +html, +body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + border: 0px; +} +.cryptpad-toolbar h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cryptpad-toolbar { + display: inline-block; +} +.realtime { + display: block; + max-height: 100%; + max-width: 100%; +} +.realtime input[type="text"] { + height: 1em; + margin: 0px; +} +.text-cell input[type="text"] { + width: 400px; +} +input[type="text"][disabled], +textarea[disabled] { + background-color: transparent; + font: white; + border: 0px; +} +table#table { + margin: 0px; +} +#tableContainer { + position: relative; + padding: 29px; + padding-right: 79px; +} +#tableContainer button { + height: 2rem; + display: none; +} +#publish { + display: none; +} +#publish, +#admin { + margin-top: 15px; + margin-bottom: 15px; +} +#create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#create-option { + width: 50px; +} +#tableScroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(30% - 50px + 29px); + max-width: 70%; + width: auto; + display: inline-block; +} +#description { + padding: 15px; + margin: auto; + min-width: 80%; + width: 80%; + min-height: 5em; + font-size: 20px; + font-weight: bold; +} +#description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} +#commit { + width: 100%; +} +#howItWorks { + width: 80%; + margin: auto; +} +div.upper { + width: 80%; + margin: auto; +} +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid #555; +} +tbody tr { + text-align: center; +} +tbody tr:first-of-type th { + font-size: 20px; + border-top: 0px; + font-weight: bold; + padding: 10px; + text-decoration: underline; +} +tbody tr:first-of-type th.table-refresh { + color: #46E981; + text-decoration: none; + cursor: pointer; +} +tbody tr:nth-child(odd) { + background-color: #ffffff; +} +tbody tr th:first-of-type { + border-left: 0px; +} +tbody tr th { + box-sizing: border-box; + border: 1px solid #555; +} +tbody tr th, +tbody tr td { + color: #555; +} +tbody tr th.remove, +tbody tr td.remove { + cursor: pointer; +} +tbody tr th:last-child { + border-right: 0px; +} +tbody td { + border-right: 1px solid #555; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; +} +tbody td:last-child { + border-right: none; +} +form.realtime, +div.realtime { + padding: 0px; + margin: 0px; +} +form.realtime > textarea, +div.realtime > textarea { + width: 50%; + height: 15vh; +} +form.realtime table, +div.realtime table { + border-collapse: collapse; + width: calc(100% - 1px); +} +form.realtime table tr td:first-child, +div.realtime table tr td:first-child { + position: absolute; + left: 29px; + top: auto; + width: calc(30% - 50px); +} +form.realtime table tr td, +div.realtime table tr td { + padding: 0px; + margin: 0px; +} +form.realtime table tr td div.text-cell, +div.realtime table tr td div.text-cell { + padding: 0px; + margin: 0px; + height: 100%; +} +form.realtime table tr td div.text-cell input, +div.realtime table tr td div.text-cell input { + width: 80%; + width: 90%; + height: 100%; + border: 0px; +} +form.realtime table tr td div.text-cell input[disabled], +div.realtime table tr td div.text-cell input[disabled] { + background-color: transparent; + color: #000; + font-weight: bold; +} +form.realtime table tr td.checkbox-cell, +div.realtime table tr td.checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain, +div.realtime table tr td.checkbox-cell div.checkbox-contain { + display: inline-block; + height: 100%; + width: 100%; + position: relative; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain label, +div.realtime table tr td.checkbox-cell div.checkbox-contain label { + background-color: transparent; + display: block; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { + display: none; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { + font-weight: bold; + background-color: #FA5858; + color: #000; + display: block; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { + height: 100%; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { + content: "✖"; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { + background-color: #46E981; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { + content: "✔"; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted { + background: #ddd; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { + display: none; +} +form.realtime table input[type="text"], +div.realtime table input[type="text"] { + height: auto; + border: 1px solid #fff; + width: 80%; +} +form.realtime table thead td, +div.realtime table thead td { + padding: 0px 5px; + background: #aaa; + border-radius: 20px 20px 0 0; + text-align: center; +} +form.realtime table thead td input[type="text"], +div.realtime table thead td input[type="text"] { + width: 100%; + box-sizing: border-box; +} +form.realtime table thead td input[type="text"][disabled], +div.realtime table thead td input[type="text"][disabled] { + color: #000; + padding: 1px 5px; + border: none; +} +form.realtime table tbody .text-cell, +div.realtime table tbody .text-cell { + background: #aaa; +} +form.realtime table tbody .text-cell input[type="text"], +div.realtime table tbody .text-cell input[type="text"] { + width: calc(100% - 50px); +} +form.realtime table tbody .text-cell .edit, +div.realtime table tbody .text-cell .edit { + float: right; + margin: 0 10px 0 0; +} +form.realtime table tbody .text-cell .remove, +div.realtime table tbody .text-cell .remove { + float: left; + margin: 0 0 0 10px; +} +form.realtime table tbody td label, +div.realtime table tbody td label { + border: 0.5px solid #555; +} +form.realtime table .edit, +div.realtime table .edit { + color: #000; + cursor: pointer; + float: left; + margin-left: 10px; +} +form.realtime table .remove, +div.realtime table .remove { + float: right; + margin-right: 10px; +} +form.realtime table thead tr th input[type="text"][disabled], +div.realtime table thead tr th input[type="text"][disabled] { + background-color: transparent; + color: #555; + font-weight: bold; +} +form.realtime table thead tr th .remove, +div.realtime table thead tr th .remove { + cursor: pointer; + font-size: 20px; +} +form.realtime table tfoot tr, +div.realtime table tfoot tr { + border: none; +} +form.realtime table tfoot tr td, +div.realtime table tfoot tr td { + border: none; + text-align: center; +} +form.realtime table tfoot tr td .save, +div.realtime table tfoot tr td .save { + padding: 15px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +form.realtime #adduser, +div.realtime #adduser, +form.realtime #addoption, +div.realtime #addoption { + color: #46E981; + border: 1px solid #46E981; + padding: 15px; + cursor: pointer; +} +form.realtime #adduser, +div.realtime #adduser { + border-top-left-radius: 5px; +} +form.realtime #addoption, +div.realtime #addoption { + border-bottom-left-radius: 5px; +} diff --git a/www/poll/poll.less b/www/poll/poll.less new file mode 100644 index 000000000..7292b0e15 --- /dev/null +++ b/www/poll/poll.less @@ -0,0 +1,387 @@ +@import "../../customize.dist/src/less/variables.less"; +@import "../../customize.dist/src/less/mixins.less"; + +@poll-th-bg: #aaa; +@poll-td-bg: #aaa; +@poll-border-color: #555; +@poll-cover-color: #000; +@poll-fg: #000; + +html, body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + border: 0px; +} + +.cryptpad-toolbar h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cryptpad-toolbar { + display: inline-block; +} +.realtime { + display: block; + max-height: 100%; + max-width: 100%; +} + +.realtime input[type="text"] { + height: 1em; + margin: 0px; +} +.text-cell input[type="text"] { + width: 400px; +} + +input[type="text"][disabled], textarea[disabled] { + background-color: transparent; + font: white; + border: 0px; +} +table#table { + margin: 0px; +} +#tableContainer { + position: relative; + padding: 29px; + padding-right: 79px; +} +#tableContainer button { + height: 2rem; + display: none; +} +#publish { + display: none; +} +#publish, #admin { + margin-top: 15px; + margin-bottom: 15px; +} +#create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#create-option { + width: 50px; +} +#tableScroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(~"30% - 50px + 29px"); + max-width: 70%; + width: auto; + display: inline-block; +} +#description { + padding: 15px; + margin: auto; + + min-width: 80%; + width: 80%; + min-height: 5em; + font-size: 20px; + font-weight: bold; + +} +#description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} + +#commit { + width: 100%; +} +#howItWorks { + width: 80%; + margin: auto; +} +div.upper { + width: 80%; + margin: auto; +} + +// from cryptpad.less + +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid @poll-border-color; + tr { + text-align: center; + &:first-of-type th{ + font-size: 20px; + border-top: 0px; + font-weight: bold; + padding: 10px; + text-decoration: underline; + &.table-refresh { + color: @cp-green; + text-decoration: none; + cursor: pointer; + } + + } + &:nth-child(odd) { + background-color: @light-base; + } + th:first-of-type { + border-left: 0px; + } + th { + box-sizing: border-box; + border: 1px solid @poll-border-color; + } + th, td { + color: @fore; + + &.remove { + cursor: pointer; + } + } + th:last-child { + border-right: 0px; + } + } + + td { + border-right: 1px solid @poll-border-color; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; + &:last-child { + border-right: none; + } + } +} + +form.realtime, div.realtime { + > input { + &[type="text"] { + + } + } + > textarea { + width: 50%; + height: 15vh; + } + + padding: 0px; + margin: 0px; + + table { + border-collapse: collapse; + width: ~"calc(100% - 1px)"; + tr { + td:first-child { + position:absolute; + left: 29px; + top: auto; + width: ~"calc(30% - 50px)"; + } + td { + padding: 0px; + margin: 0px; + + div.text-cell { + padding: 0px; + margin: 0px; + height: 100%; + + input { + width: 80%; + width: 90%; + height: 100%; + border: 0px; + &[disabled] { + background-color: transparent; + color: @poll-fg; + font-weight: bold; + } + } + } + + &.checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; + + div.checkbox-contain { + display: inline-block; + height: 100%; + width: 100%; + position: relative; + + label { + background-color: transparent; + display: block; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + } + + input { + &[type="checkbox"] { + &:not(.editable) { + display: none; + + ~ .cover { + display: block; + font-weight: bold; + + background-color: @cp-red; + color: @poll-cover-color; + + &:after { + height: 100%; + } + + &:after { content: "✖"; } + + display: block; + &.yes { + background-color: @cp-green; + &:after { content: "✔"; } + } + + &.uncommitted { + background: #ddd; + } + + + &.mine { + display: none; + } + } + } + } + } + } + } + } + } + + input { + &[type="text"] { + height: auto; + border: 1px solid @base; + width: 80%; + } + } + thead { + td { + padding: 0px 5px; + background: @poll-th-bg; + border-radius: 20px 20px 0 0; + text-align: center; + input { + &[type="text"] { + width: 100%; + box-sizing: border-box; + &[disabled] { + color: @poll-fg; + padding: 1px 5px; + border: none; + } + } + } + } + } + + tbody { + .text-cell { + background: @poll-td-bg; + //border-radius: 20px 0 0 20px; + input[type="text"] { + width: ~"calc(100% - 50px)"; + } + .edit { + float:right; + margin: 0 10px 0 0; + } + .remove { + float: left; + margin: 0 0 0 10px; + } + } + td { + label { + border: .5px solid @poll-border-color; + } + } + } + .edit { + color: @poll-cover-color; + cursor: pointer; + float: left; + margin-left: 10px; + } + + .remove { + float: right; + margin-right: 10px; + } + + thead { + tr { + th { + input[type="text"][disabled] { + background-color: transparent; + color: @fore; + font-weight: bold; + } + .remove { + cursor: pointer; + font-size: 20px; + } + } + } + } + tbody { + tr { + td { + + } + } + } + tfoot { + tr { + border: none; + td { + border: none; + text-align: center; + .save { + padding: 15px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + } + } + } + } + + #adduser, + #addoption { + color: @cp-green; + border: 1px solid @cp-green; + padding: 15px; + cursor: pointer; + } + + #adduser { .top-left; } + #addoption { .bottom-left; } +}