diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 55945ccd2..2427b2a28 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -638,48 +638,45 @@ define([ Pages['/poll/'] = Pages['/poll/index.html'] = function () { return [ - appToolbar(), - h('div#content', [ - h('div#poll', [ - h('div#howItWorks', [ + appToolbar3(), + h('div#cp-app-poll-content', [ + h('div#cp-app-poll-form', [ + h('div#cp-app-poll-help', [ h('h1', 'CryptPoll'), setHTML(h('h2'), Msg.poll_subtitle), h('p', Msg.poll_p_save), h('p', Msg.poll_p_encryption) ]), - h('div.upper', [ - h('button#publish.btn.btn-success', { + h('div.cp-app-poll-upper', [ + h('button#cp-app-poll-action-publish.btn.btn-success', { style: { display: 'none' } }, Msg.poll_publish_button), - h('button#admin.btn.btn-primary', { + h('button#cp-app-poll-action-admin.btn.btn-primary', { style: { display: 'none' }, title: Msg.poll_admin_button }, Msg.poll_admin_button), - h('button#help.btn.btn-secondary', { + h('button#cp-app-poll-action-help.btn.btn-secondary', { title: Msg.poll_show_help_button }, Msg.poll_show_help_button) ]), - h('div.realtime', [ + h('div.cp-app-poll-realtime', [ h('br'), h('center', [ - h('textarea#description', { + h('textarea#cp-app-poll-description', { rows: "5", cols: "50", disabled: true }), h('br') ]), - h('div#tableContainer', [ - h('div#tableScroll'), - h('button#create-user.btn.btn-secondary', { + h('div#cp-app-poll-table-container', [ + h('div#cp-app-poll-table-scroll'), + h('button#cp-app-poll-create-user.btn.btn-secondary', { title: Msg.poll_create_user }, h('span.fa.fa-plus')), - h('button#create-option.btn.btn-secondary', { + h('button#cp-app-poll-create-option.btn.btn-secondary', { title: Msg.poll_create_option }, h('span.fa.fa-plus')), - h('button#commit.btn.btn-secondary', { - title: Msg.poll_commit - }, h('span.fa.fa-check')) ]) ]) ]) diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less index 51450db27..5f7c7e071 100644 --- a/customize.dist/src/less2/main.less +++ b/customize.dist/src/less2/main.less @@ -28,6 +28,6 @@ body.cp-app-code { @import "../../../code/app-code.less"; } body.cp-app-slide { @import "../../../slide/app-slide.less"; } body.cp-app-file { @import "../../../file/app-file.less"; } body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; } -//body.cp-app-poll { @import "../../../poll/app-poll.less"; } +body.cp-app-poll { @import "../../../poll/app-poll.less"; } body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; } diff --git a/www/drive/inner.js b/www/drive/inner.js index f8ed897ed..fdde8d906 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1,6 +1,5 @@ define([ 'jquery', - '/bower_components/chainpad-crypto/crypto.js', '/bower_components/textpatcher/TextPatcher.js', '/common/toolbar3.js', 'json.sortify', @@ -12,7 +11,6 @@ define([ '/common/common-realtime.js', '/common/userObject.js', '/customize/application_config.js', - '/common/mergeDrive.js', '/common/sframe-chainpad-listmap.js', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', @@ -20,7 +18,6 @@ define([ 'less!/customize/src/less2/main.less', ], function ( $, - Crypto, TextPatcher, Toolbar, JSONSortify, @@ -32,7 +29,6 @@ define([ CommonRealtime, FO, AppConfig, - Merge, Listmap) { var Messages = Cryptpad.Messages; diff --git a/www/poll/app-drive.less b/www/poll/app-drive.less new file mode 100644 index 000000000..ea027d76e --- /dev/null +++ b/www/poll/app-drive.less @@ -0,0 +1,820 @@ +@import (once) "../../customize/src/less2/include/browser.less"; +@import (once) "../../customize/src/less2/include/toolbar.less"; +@import (once) "../../customize/src/less2/include/markdown.less"; +@import (once) '../../customize/src/less2/include/fileupload.less'; +@import (once) '../../customize/src/less2/include/alertify.less'; +@import (once) '../../customize/src/less2/include/leftside-menu.less'; +@import (once) "../../customize/src/less2/include/tools.less"; +@import (once) "../../customize/src/less2/include/limit-bar.less"; + +.toolbar_main(); +.fileupload_main(); +.alertify_main(); +.limit-bar_main(); + +@drive_hover: #eee; +@drive_hover-light: lighten(@drive_hover, 20%); +@drive_info-box-bg: #d2e1f2; +@drive_info-box-border: #bbb; +@drive_table-header-fg: #555; +@drive_table-header-bg: #e8e8e8; +@drive_mobile-tree-border-col: #ccc; + +@drive_content-fg: @colortheme_sidebar-right-fg; +@drive_content-bg: @colortheme_sidebar-right-bg; +@drive_content-bg-ro: darken(@drive_content-bg, 10%); + + +/* PAGE */ + +display: flex; +flex-flow: column; +max-height: 100%; +min-height: auto; + +.cp-unselectable { + .tools_unselectable(); +} + +/* local mixins */ +.drive_fileIcon { + li { + display: inline-block; + margin: 10px 10px; + width: 140px; + height: 140px; + text-align: center; + vertical-align: top; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 5px; + padding-bottom: 5px; + + &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { + border: 1px solid #CCC; + } + .cp-app-drive-element-name { + width: 100%; + height: 48px; + margin: 8px 0; + display: inline-block; + //align-items: center; + //justify-content: center; + overflow: hidden; + //text-overflow: ellipsis; + word-wrap: break-word; + } + .cp-app-drive-element-truncated { + display: block; + position: absolute; + bottom: 0px; + left: 0; right: 0; + text-align: center; + } + img.cp-app-drive-content-icon { + height: 48px; + max-height: none; + max-width: none; + margin: 8px 0; + } + .fa { + display: block; + margin: auto; + font-size: 48px; + margin: 8px 0; + text-align: center; + &.listonly { + display: none; + } + } + } +} + +img.cp-app-drive-icon { + max-width: 20px; + max-height: 16px; +} + +.cp-app-drive-container { + flex: 1; + overflow: auto; + width: 100%; + display: flex; + flex-flow: row; + @media screen and (max-width: @browser_media-medium-screen) { + display: block; + #cp-app-drive-toolbar { + .path .element { + display: none; + } + } + #cp-app-drive-tree { + resize: none; + width: 100%; + max-width: unset; + max-height: unset; + border-bottom: 1px solid @drive_mobile-tree-border-col; + .cp-app-drive-tree-category { + margin-top: 0.5em; + } + } + } +} + +div:focus { + outline: none; +} + +.fa { + font-family: FontAwesome; +} + +ul { + list-style: none; + padding-left: 0px; // Remove the default padding +} + +li { + padding: 0px 5px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cp-app-drive-context { + display: none; + position: absolute; + z-index: 500; + li { + padding: 0; + font-size: @colortheme_app-font-size; + a { + cursor: pointer; + } + } +} + +.cp-app-drive-element-droppable { + background-color: #FE9A2E; + color: #222; +} + +.cp-app-drive-element-selected { + background: #666 !important; + color: #eee; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @colortheme_sidebar-left-fg; + } +} + +.cp-app-drive-element-selected-tmp { + border: 1px dotted #bbb; + background: #AAA; + color: #ddd; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @colortheme_sidebar-left-fg; + } +} + +span { + &.fa-folder, &.fa-folder-open { + //color: #FEDE8B; + //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; + } +} + +/* TREE */ + + +#cp-app-drive-tree { + font-size: @colortheme_app-font-size; + //border-right: 1px solid #ccc; + box-sizing: border-box; + background: @colortheme_sidebar-left-bg; + overflow: auto; + resize: horizontal; + width: auto; + white-space: nowrap; + max-width: 500px; + min-width: 200px; + padding: 0px; + color: @colortheme_sidebar-left-fg; + display: flex; + flex-flow: column; + max-height: 100%; + .cp-app-drive-tree-categories-container { + flex: 1; + max-width: 500px; + overflow: auto; + } + img.cp-app-drive-icon { + margin-bottom: 3px; + margin-left: -2px; + } + .cp-app-drive-tree-docs { + margin-top: 20px; + //padding: 0 0 0 20px; + padding: 0; + cursor: auto; + &li, li { + padding: 0; + &.cp-app-drive-element-collapsed ul { + display: none; + } + input { + width: ~"calc(100% - 30px)"; + padding: 0 10px; + border: 0; + color: lighten(@colortheme_sidebar-left-fg, 40%); + } + & > span.cp-app-drive-element-row { + overflow: hidden; + text-overflow: ellipsis; + //min-width: ~"calc(100% + 5px)"; + .leftside-menu-category_main(); + width: ~"calc(100% + 5px)"; + margin: 0; + margin-bottom: -6px; + display: inline-block; + cursor: pointer; + margin-left: -5px; + padding-left: 5px; + } + & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover { + } + } + } + span.cp-app-drive-element { + cursor: pointer; + } + .cp-app-drive-tree-category { + margin: 0; + margin-top: 15px; + .cp-app-drive-tree-root { + &> .fa { + min-width: 30px; + cursor: pointer; + } + } + li { + padding: 0; + .cp-app-drive-element-row { + display: block; + padding-left: 20px; + .leftside-menu-category_main(); + margin: 0; + .fa { + width: 25px; + } + } + } + } + .cp-app-drive-tree-category:last-child { + margin-bottom: 20px; + } + .limit-container { + margin-top: 0; + } + #cp-app-drive-tree-search { + text-align: center; + padding: 0; + position: relative; + input { + background: lighten(@colortheme_drive-bg, 8%); + color: @colortheme_drive-color; + .tools_placeholder-color(@colortheme_drive-color); + outline-width: 0px; + border-radius: 0; + width: 100%; + //border: 1px solid #ccc; + border: 0; + border-right: 1px solid lighten(@colortheme_drive-bg, 16%); + //border-right: 0; + height: @variables_bar-height; + padding: 0 5px; + padding-left: 45px; + &:focus { + outline-width: 0px; + } + } + .cp-app-drive-tree-search-con { + color: @colortheme_drive-color; + position: absolute; + left: 20px; // TODO align with drive categories + top: 8px; + } + } + .fa.cp-app-drive-icon-expcol { + margin-left: -10px; + font-size: 14px; + position: absolute; + left: -20px; + top: 10px; + width: 11px !important; + height: 11px !important; + padding: 0; + margin: 0; + background: white; + z-index: 10; + cursor: default; + &:before { + position:relative; + top: -1px; + } + } + .cp-app-drive-tree-docs { + .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { + position: relative; + top:0; + left: -10px; + } + .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { + margin-left: -5px; + } + .cp-app-drive-tree-root { + &> .cp-app-drive-element-row { + padding-left: 20px; + } + &> ul { + padding-left: 30px; + } + } + } + + // Expand/collapse lines + .cp-app-drive-tree-docs ul { + margin: 0px 0px 0px 10px; + list-style: none; + padding-left: 10px; + li { + position: relative; + &:before { + position: absolute; + left: -15px; + top: -11px; + content: ''; + display: block; + border-left: 1px solid @colortheme_sidebar-left-branch; + height: ~"calc(1em + 11px)"; + border-bottom: 1px solid @colortheme_sidebar-left-branch; + width: 15px; + } + &:after { + position: absolute; + left: -15px; + bottom: -7px; + content: ''; + display: block; + border-left: 1px solid @colortheme_sidebar-left-branch; + height: 100%; + } + &.cp-app-drive-tree-root { + margin: 0px 0px 0px -10px; + &:before { + display: none; + } + &:after { + display: none; + } + } + &:last-child:after { + display: none; + } + } + } +} + +/* CONTENT */ +#cp-app-drive-content-container { + display: flex; + flex-flow: column; + flex: 1; + // Needed to avoid the folder's path to overflows + // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout + min-width: 0; +} +#cp-app-drive-content { + box-sizing: border-box; + background: @drive_content-bg; + color: @drive_content-fg; + overflow: auto; + flex: 1; + display: flex; + flex-flow: column; + position: relative; + .cp-app-drive-content-select-box { + display: none; + background-color: rgba(100, 100, 100, 0.7); + position: absolute; + z-index: 50; + } + &.cp-app-drive-readonly { + background: @drive_content-bg-ro; + } + h1 { + padding-left: 10px; + margin-top: 10px; + } + .cp-app-drive-content-info-box { + line-height: 2em; + padding: 0.25em 0.75em; + margin: 1em; + background: @drive_info-box-bg; + span { + cursor: pointer; + float: right; + margin-top: 0.5em; + } + } + li { + cursor: default; + &:not(.cp-app-drive-element-header) { + &:hover { + &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { + background-color: @drive_hover; + } + } + } + } + #cp-app-drive-content-folder { + li { + &.cp-app-drive-search-result { + border-bottom: 1px solid @drive_info-box-border; + display: block; + &:hover { + background-color: initial; + } + table { + width: 100%; + .cp-app-drive-search-label2 { + width: 150px; + font-size: 15px; + text-align: right; + padding-right: 15px; + } + .cp-app-drive-search-opendir { + a { + cursor: pointer; + color: #41b7d8; + &:hover { + color: #014c8c; + text-decoration: underline; + } + } + } + .cp-app-drive-search-path { + font-style: italic; + direction: rtl; + .cp-app-drive-path-element { + display: inline-block; + margin-right: 5px; + } + } + .cp-app-drive-search-title { + font-weight: bold; + cursor: pointer; + &:hover { + background-color: @drive_hover; + } + } + .cp-app-drive-search-col2 { + width: 250px; + } + td.cp-app-drive-search-icon { + width: 50px; + font-size: 40px; + } + } + } + } + } + .cp-app-drive-element { + .cp-app-drive-element-truncated { display: none; } + } + div.cp-app-drive-content-grid { + padding: 20px; + .drive_fileIcon; + li { + &.cp-app-drive-element { + position: relative; + } + input { + width: 100%; + margin-top: 5px; + } + .cp-app-drive-element-state { + position: absolute; + top: 3px; + right: 3px; + .fa { + margin:0; + font-size: 18px; + } + } + } + .cp-app-drive-element-list { + display: none; + } + .cp-app-drive-new-ghost { + cursor: pointer; + opacity: 0.5; + padding: 0; + &:hover { + opacity: 0.7; + } + .fa { + cursor: pointer; + font-size: 90px; + margin-top: 5px; + margin-bottom: 0; + } + } + } + + .cp-app-drive-content-list { + .cp-app-drive-element-grid { + display: none; + } + // Make it act as a table! + padding-left: 20px; + ul { + display: table; + width: 100%; + padding: 0px 10px; + } + li { + display: table-row; + &> span { + padding: 0 5px; + display: table-cell; + } + &:not(.cp-app-drive-element-header) { + height: @variables_bar-height; + line-height: @variables_bar-height; + } + &.cp-app-drive-element-header { + cursor: default; + color: @drive_table-header-fg; + span { + &:not(.fa) { + text-align: left; + } + &.sortasc, &.sortdesc { + float: right; + } + } + &> span { + padding: 15px 5px; + &.cp-app-drive-sort-active { + font-weight: bold; + } + &.cp-app-drive-sort-clickable { + cursor: pointer; + &:hover { + background: @drive_table-header-bg; + } + } + } + } + } + .cp-app-drive-element { + span { + overflow: hidden; + white-space: nowrap; + box-sizing: border-box; + &.cp-app-drive-element-state { + .fa:not(:last-child) { + margin-right: 5px; + } + } + &.cp-app-drive-content-icon, &.cp-app-drive-element-state { + width: 30px; + } + &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime { + width: 175px; + } + &.cp-app-drive-element-title { + width: 250px; + @media screen and (max-width: 1200px) { + display: none; + } + } + &.cp-app-drive-element-folders, &.cp-app-drive-element-files { + width: 150px; + } + } + } + } +} + +#cp-app-drive-content-folder { + padding-right: 10px; + flex: 1; +} + +#cp-app-drive-new-ghost-dialog.cp-modal-container { + .drive_fileIcon; + + li:not(.cp-app-drive-element-selected):hover { + border: 1px solid white; + } + .cp-modal { + display: flex; + flex-flow: column; + li, li .fa { + cursor: pointer; + } + &> p { + margin: 50px; + } + &> div { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + overflow-y: auto; + .cp-app-drive-new-upload { + break-after: always; + page-break-after: always; + } + } + } + + @media screen and (max-height: @browser_media-not-big) { + .cp-modal { + & > p { + display: none; + } + & > div { + align-content: unset; + li { + height: 40px; + width: 90%; + display: flex; + align-items: center; + .fa { + font-size: 32px; + } + .cp-app-drive-new-name { + height: auto; + } + } + } + } + } +} + + +/* Toolbar */ + +#cp-app-drive-toolbar { + background: lighten(@colortheme_drive-bg, 8%); + color: @colortheme_drive-color; + //height: 30px; + //display: flex; + //flex-flow: row; + z-index: 100; + box-sizing: border-box; + height: @variables_bar-height; + padding: 0; + display: flex; + flex-flow: row; + + * { + outline-width: 0; + &:focus { + outline-width: 0; + } + } + + .history { + float: right; + .cp-toolbar-drawer-element { + display: none; + } + } + + .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside { + display: inline-block; + margin: 0; + padding: 0; + .fa { + margin: 0; + } + button { + height: @variables_bar-height; + padding: 0 10px; + border: none; + border-radius: 0; + box-sizing: border-box; + background: transparent; + font-size: @colortheme_app-font-size; + color: @colortheme_drive-color; + transition: all 0.15s; + .drawer { + display: none; + } + .fa, span { + font-size: @colortheme_app-font-size; + } + &:hover { + background: @colortheme_drive-bg; + } + &.cp-app-drive-toolbar-active { + display: none; + } + } + } + .cp-app-drive-toolbar-rightside { + float: right; + & > * { + float: right; + } + #cp-app-drive-toolbar-contextbuttons { + display: inline-block; + height: 100%; + } + padding-left: 10px; + } + .cp-app-drive-toolbar-leftside { + & > span { + height: 100%; + margin: 0; + } + button { + padding: 0 10px; + .fa { + margin-right: 5px; + } + .cp-dropdown-button-title { + display: inline-flex; + height: @variables_bar-height; + align-items: center; + span:not(.fa) { + line-height: 23px; + } + } + } + } + + button { + font: @colortheme_app-font; + span { + font: @colortheme_app-font; + } + .fa, &.fa { + font-family: FontAwesome; + } + } + /* The container
- needed to position the dropdown content */ + .cp-dropdown-container { + margin: 2px 2px; + line-height: 1em; + position: relative; + display: inline-block; + } + .cp-dropdown-content { + margin-right: 2px; + } + + .cp-app-drive-path { + flex: 1; + width: 100%; + height: @variables_bar-height; + line-height: @variables_bar-height; + cursor: default; + width: auto; + overflow: hidden; + white-space: nowrap; + direction: rtl; + max-width: 100%; + text-align: left; + .cp-app-drive-path-element { + display: inline-block; + height: @variables_bar-height; + line-height: @variables_bar-height; + font-size: @colortheme_app-font-size; + padding: 0 5px; + border: 0; + background: darken(@colortheme_drive-bg, 10%); + color: @colortheme_drive-color; + box-sizing: border-box; + transition: all 0.15s; + &.cp-app-drive-path-separator { + color: #ccc; + } + &.cp-app-drive-path-lickable { + cursor: pointer; + &:hover { + background: darken(@colortheme_drive-bg, 15%); + } + } + } + } +} + + + diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less new file mode 100644 index 000000000..fd751249d --- /dev/null +++ b/www/poll/app-poll.less @@ -0,0 +1,477 @@ +@import (once) "../../customize/src/less2/include/browser.less"; +@import (once) "../../customize/src/less2/include/toolbar.less"; +@import (once) "../../customize/src/less2/include/markdown.less"; +@import (once) '../../customize/src/less2/include/fileupload.less'; +@import (once) '../../customize/src/less2/include/alertify.less'; +@import (once) '../../customize/src/less2/include/tokenfield.less'; + +.toolbar_main(); +.fileupload_main(); +.alertify_main(); +.tokenfield_main(); + +@poll-fore: #555; +@poll-th-bg: #aaa; +@poll-th-user-bg: #999; +@poll-td-bg: #aaa; +@poll-editing: #88b8cc; +@poll-placeholder: #666; +@poll-border-color: #555; +@poll-cover-color: #000; +@poll-fg: #000; +@poll-option-yellow: #ff5; +@poll-option-gray: #ccc; + +.bottom-left(@s: 5px) { border-bottom-left-radius: @s; } +.top-left(@s: 5px) { border-top-left-radius: @s; } + +display: flex; +flex-flow: column; +overflow-x: hidden; + +#cp-app-poll-content { + display: flex; + flex: 1; + #cp-app-poll-form { + flex: 1; + overflow-y: auto; + } +} + +/*.cp-toolbar-container h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cp-toolbar-container { + display: block; +}*/ + +.cp-app-poll-table-text-cell input[type="text"] { + width: 400px; +} + +input[type="text"], textarea { + background-color: white; + color: black; + border: 0; +} + +input[type="text"][disabled], textarea[disabled] { + background-color: transparent; + border: 0px; +} + +// The placeholder color only seems to effect Safari when not set + +input[type="text"]::placeholder { + color: @poll-placeholder; +} + +table#cp-app-poll-table { + margin: 0px; +} +#cp-app-poll-table-container { + position: relative; + padding: 29px; + padding-right: 79px; +} +#cp-app-poll-table-container button { + height: 2rem; + display: none; +} +#cp-app-poll-publish { + display: none; +} +#cp-app-poll-action-publish, #cp-app-poll-action-admin { + margin-top: 15px; + margin-bottom: 15px; +} +#cp-app-poll-create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#cp-app-poll-create-option { + width: 50px; +} +#cp-app-poll-table-scroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(~"30% - 50px + 31px"); + max-width: 70%; + width: auto; + display: inline-block; +} +#cp-app-poll-description { + padding: 15px; + margin: auto; + + min-width: 80%; + width: 80%; + min-height: 7em; + font-size: 20px; + font-weight: bold; + border: 1px solid black; + +} +#cp-app-poll-description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} + +#cp-app-poll-help { + width: 80%; + margin: auto; +} +div.cp-app-poll-upper { + width: 80%; + margin: auto; + + & > * { + margin-right: 1em; + } +} + +// from cryptpad.less + +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid @poll-border-color; + * { + box-sizing: border-box; + } + 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: @colortheme_cp-green; + text-decoration: none; + cursor: pointer; + } + + } + &:nth-child(odd) { + background-color: @colortheme_light-base; + } + th:first-of-type { + border-left: 0px; + } + th { + box-sizing: border-box; + border: 1px solid @poll-border-color; + } + th, td { + color: @poll-fore; + + .cp-app-poll-table-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; + } + } +} + +div.cp-app-poll-realtime { + display: block; + max-height: 100%; + max-width: 100%; + + input { + &[type="text"] { + height: 1em; + margin: 0px; + } + } + > textarea { + width: 50%; + height: 15vh; + } + + padding: 0px; + margin: 0px; + + table { + border-collapse: collapse; + width: ~"calc(100% - 1px)"; + .cp-app-poll-table-editing { + background-color: @poll-editing; + } + tr { + td:first-child { + position:absolute; + left: 29px; + top: auto; + width: ~"calc(30% - 50px)"; + } + td { + padding: 0px; + margin: 0px; + + div.cp-app-poll-table-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; + } + } + } + + &.cp-app-poll-table-checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; + + div.cp-app-poll-table-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="number"] { + &:not(.editable) { + display: none; + + ~ .cp-app-poll-table-cover { + display: block; + font-weight: bold; + + color: @poll-cover-color; + + &:after { + height: 100%; + } + + display: block; + &.yes { + background-color: @colortheme_cp-green; + } + + &.uncommitted { + background: #ddd; + } + + &.mine { + display: none; + } + } + } + } + } + + input[type="number"][value="0"] { + ~ .cp-app-poll-table-cover { + background-color: @colortheme_cp-red; + &:after { content: "✖"; } + } + } + input[type="number"][value="1"] { + ~ .cp-app-poll-table-cover { + background-color: @colortheme_cp-green; + &:after { content: "✔"; } + } + } + input[type="number"][value="2"] { + ~ .cp-app-poll-table-cover { + background-color: @poll-option-yellow; + &:after { content: "~"; } + } + } + input[type="number"][value="3"] { + ~ .cp-app-poll-table-cover { + background-color: @poll-option-gray; + &:after { content: "?"; } + } + } + } + } + } + } + + input { + &[type="text"] { + height: auto; + width: 80%; + } + } + span { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + } + thead { + td { + padding: 0px 5px; + background: @poll-th-bg; + border-radius: 20px 20px 0 0; + //text-align: center; + &:nth-of-type(2) { + background: @poll-th-user-bg; + .cp-app-poll-table-lock { + cursor: default; + } + } + input { + &[type="text"] { + width: 100%; + box-sizing: border-box; + padding: 1px 5px; + &[disabled] { + color: @poll-fg; + border: 1px solid transparent; + } + } + } + } + } + + tbody { + td:not(.cp-app-poll-table-editing) { + .cp-app-poll-table-text-cell { + background: @poll-td-bg; + } + } + .cp-app-poll-table-text-cell { + //border-radius: 20px 0 0 20px; + input[type="text"] { + width: ~"calc(100% - 50px)"; + padding: 0 0.5em; + } + .cp-app-poll-table-edit { + float:right; + margin: 0 10px 0 0; + } + .cp-app-poll-table-remove { + float: left; + margin: 0 0 0 10px; + } + } + tr:not(:first-child) { + td:not(:first-child) { + label { + border-top: 1px solid @poll-border-color; + } + } + } + } + .cp-app-poll-table-edit { + color: @poll-cover-color; + cursor: pointer; + float: left; + margin-left: 10px; + } + + .cp-app-poll-table-lock { + margin-left: ~"calc(50% - 0.5em)"; + cursor: pointer; + width: 1em; + text-align: center; + } + .cp-app-poll-table-remove { + float: right; + margin-right: 10px; + } + + thead { + tr { + th { + input[type="text"][disabled] { + background-color: transparent; + color: @poll-fore; + font-weight: bold; + } + .cp-app-poll-table-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: @colortheme_cp-green; + border: 1px solid @colortheme_cp-green; + padding: 15px; + cursor: pointer; + } + + #adduser { .top-left; } + #addoption { .bottom-left; } +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; +} + diff --git a/www/poll/index.html b/www/poll/index.html new file mode 100644 index 000000000..e3f7eacc4 --- /dev/null +++ b/www/poll/index.html @@ -0,0 +1,38 @@ + + + + CryptPad + + + + + + + +