Merge pull request #108 from pbondoer/newpoll

Poll fixes

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;
 }

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

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;
 

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"
   }
 }

www/poll/index.html

@@ -11,108 +11,8 @@
         id="favicon" />
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/customize/main.css" />
+    <link rel="stylesheet" href="./poll.css" />
     <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
-    <style>
-        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;
-        }
-
-    </style>
 </head>
 <body>
 

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;
         }
@@ -262,6 +262,9 @@ define([
             Render.updateTable(table, displayedObj2, conf);
             updateDisplayedTable();
             setFocus(f);
+            if (typeof(cb) === "function") {
+                cb();
+            }
         };
 
         if (throttle) {
@@ -281,7 +284,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 +335,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 +350,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 +362,8 @@ define([
         }
     };
 
-    var hideInputs = function (e) {
+    var hideInputs = function (e, isKeyup) {
-        if ($(e.target).is('[type="text"]')) {
+        if (!isKeyup && $(e.target).is('[type="text"]')) {
             return;
         }
         $('.lock[data-rt-id!="' + APP.userid + '"]').html(lockHTML);
@@ -389,6 +396,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 +558,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 () {
+            Render.createRow(proxy, function (empty, id) {
-                change();
+                change(null, null, null, null, function() {
-                var order = APP.proxy.table.rowsOrder;
+                    $('.edit[data-rt-id="' + id + '"]').click();
-
+                });
-                var last = order[order.length - 1];
-                var $newest = $('[data-rt-id="' + last + '"]');
-                $newest.val('');
-                window.setTimeout(change);
             });
         });
 
         var $createCol = APP.$createCol = $('#create-user').click(function () {
-            Render.createColumn(proxy, function () {
+            Render.createColumn(proxy, function (empty, id) {
-                change();
+                change(null, null, null, null, function() {
+                    $('.edit[data-rt-id="' + id + '"]').click();
+                });
             });
         });
 

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;
+}

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; }
+}