diff --git a/customize.dist/main.css b/customize.dist/main.css index f34dacb58..99b5eea7f 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -318,58 +318,68 @@ tbody td:last-child { color: #FF0073; cursor: pointer !important; } -form.realtime { +form.realtime, +div.realtime { padding: 0px; margin: 0px; } -form.realtime > textarea { +form.realtime > textarea, +div.realtime > textarea { width: 50%; height: 15vh; } -form.realtime table { +form.realtime table, +div.realtime table { border-collapse: collapse; - width: calc(99%); + width: calc(100% - 1px); } -form.realtime table tr td:first-child { +form.realtime table tr td:first-child, +div.realtime table tr td:first-child { position: absolute; left: 29px; top: auto; - width: 400px; + width: calc(30% - 50px); } -form.realtime table tr td { +form.realtime table tr td, +div.realtime table tr td { padding: 0px; margin: 0px; } -form.realtime table tr td div.text-cell { +form.realtime table tr td div.text-cell, +div.realtime table tr td div.text-cell { padding: 0px; margin: 0px; height: 100%; - width: 400px; } -form.realtime table tr td div.text-cell input { +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] { +form.realtime table tr td div.text-cell input[disabled], +div.realtime table tr td div.text-cell input[disabled] { background-color: transparent; color: #fafafa; font-weight: bold; } -form.realtime table tr td.checkbox-cell { +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 { +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 { +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; @@ -378,82 +388,136 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain label { height: 100%; width: 100%; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { +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 { +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: #FF0073; color: #302B28; display: block; } -form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { +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 { +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 { +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 { +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 { +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 { +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"] { +form.realtime table input[type="text"], +div.realtime table input[type="text"] { height: 100%; - width: 70%; - border: 3px solid #302B28; + border: 1px solid #302B28; + width: 80%; +} +form.realtime table thead td, +div.realtime table thead td { + padding: 0px 5px; + background: #4c443f; + border-radius: 20px 20px 0 0; +} +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: white; + padding: 1px 5px; +} +form.realtime table tbody .text-cell, +div.realtime table tbody .text-cell { + background: #4c443f; +} +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 .edit { +form.realtime table .edit, +div.realtime table .edit { color: #46E981; cursor: pointer; - width: 10%; - font-size: 20px; -} -form.realtime table .edit:after { - content: '✐'; + float: left; + margin-left: 10px; + /*&:after { content: '✐'; }*/ + /*&.editable { display: none; }*/ } -form.realtime table .edit.editable { - display: none; +form.realtime table .remove, +div.realtime table .remove { + float: right; + margin-right: 10px; } -form.realtime table thead tr th input[type="text"][disabled] { +form.realtime table thead tr th input[type="text"][disabled], +div.realtime table thead tr th input[type="text"][disabled] { background-color: transparent; color: #fafafa; font-weight: bold; } -form.realtime table thead tr th .remove { +form.realtime table thead tr th .remove, +div.realtime table thead tr th .remove { cursor: pointer; font-size: 20px; } -form.realtime table tfoot tr { +form.realtime table tfoot tr, +div.realtime table tfoot tr { border: none; } -form.realtime table tfoot tr td { +form.realtime table tfoot tr td, +div.realtime table tfoot tr td { border: none; text-align: center; } -form.realtime table tfoot tr td .save { +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, -form.realtime #addoption { +div.realtime #adduser, +form.realtime #addoption, +div.realtime #addoption { color: #46E981; border: 1px solid #46E981; padding: 15px; cursor: pointer; } -form.realtime #adduser { +form.realtime #adduser, +div.realtime #adduser { border-top-left-radius: 5px; } -form.realtime #addoption { +form.realtime #addoption, +div.realtime #addoption { border-bottom-left-radius: 5px; } div.modal, diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index a54ac78f6..d0a783f3e 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -359,7 +359,7 @@ tbody { cursor: pointer !important; } -form.realtime { +form.realtime, div.realtime { > input { &[type="text"] { @@ -375,13 +375,13 @@ form.realtime { table { border-collapse: collapse; - width: calc(100% - 1px); + width: ~"calc(100% - 1px)"; tr { td:first-child { position:absolute; left: 29px; top: auto; - width: 400px; + width: ~"calc(30% - 50px)"; } td { padding: 0px; @@ -390,9 +390,7 @@ form.realtime { div.text-cell { padding: 0px; margin: 0px; - height: 100%; - - width: 400px; + height: 100%; input { width: 80%; @@ -473,17 +471,57 @@ form.realtime { input { &[type="text"] { height: 100%; - width: 70%; - border: 3px solid @base; + border: 1px solid @base; + width: 80%; + } + } + thead { + td { + padding: 0px 5px; + background: @less-light-base; + border-radius: 20px 20px 0 0; + input { + &[type="text"] { + width: 100%; + box-sizing: border-box; + &[disabled] { + color: white; + padding: 1px 5px; + } + } + } + } + } + + tbody { + .text-cell { + background: @less-light-base; + //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; + } } } .edit { color: @cp-green; cursor: pointer; - width: 10%; - font-size: 20px; - &:after { content: '✐'; } - &.editable { display: none; } + float: left; + margin-left: 10px; + /*&:after { content: '✐'; }*/ + /*&.editable { display: none; }*/ + } + + .remove { + float: right; + margin-right: 10px } thead { diff --git a/customize.dist/src/variables.less b/customize.dist/src/variables.less index 14e6de373..c6d555219 100644 --- a/customize.dist/src/variables.less +++ b/customize.dist/src/variables.less @@ -1,5 +1,6 @@ @base: #302B28; @light-base: lighten(@base, 20%); +@less-light-base: lighten(@base, 10%); @fore: #fafafa; @cp-green: #46E981; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 493bd69c9..e8948cafc 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -129,6 +129,12 @@ define(function () { out.wizardTitle = "Utiliser l'assistant pour créer votre sondage"; out.wizardConfirm = "Êtes-vous vraiment prêt à ajouter ces options au sondage ?"; + out.poll_publish_button = "Publier"; + out.poll_admin_button = "Administrer"; + out.poll_create_user = "Ajouter un utilisateur"; + out.poll_create_option = "Ajouter une option"; + out.poll_commit = "Valider"; + out.poll_closeWizardButton = "Fermer l'assistant"; out.poll_closeWizardButtonTitle = "Fermer l'assistant"; out.poll_wizardComputeButton = "Générer les options"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 8bde3fb00..65acfb831 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -131,6 +131,12 @@ define(function () { out.wizardTitle = "Use the wizard to create your poll"; out.wizardConfirm = "Are you really ready to add these options to your poll?"; + out.poll_publish_button = "Publish"; + out.poll_admin_button = "Admin"; + out.poll_create_user = "Add a new user"; + out.poll_create_option = "Add a new option"; + out.poll_commit = "Commit"; + out.poll_closeWizardButton = "Close wizard"; out.poll_closeWizardButtonTitle = "Close wizard"; out.poll_wizardComputeButton = "Compute Options"; diff --git a/www/poll/test/index.html b/www/poll/test/index.html index 6fef7493d..77345e52b 100644 --- a/www/poll/test/index.html +++ b/www/poll/test/index.html @@ -55,7 +55,7 @@ #tableContainer { position: relative; padding: 29px; - padding-right: 82px; + padding-right: 79px; } #tableContainer button { height: 2rem; @@ -67,8 +67,8 @@ #create-user { position: absolute; display: inline-block; - /*left: 0px; - top: 31px;*/ + /*left: 0px;*/ + top: 55px; width: 50px; overflow: hidden; } @@ -77,11 +77,20 @@ } #tableScroll { overflow-x: auto; - margin-left: 400px; + margin-left: calc(30% - 50px + 29px); max-width: 70%; width: auto; display: inline-block; } + #description[disabled] { + resize: none; + } + #description { + padding: 5px; + } + #commit { + width: 100%; + }
@@ -96,17 +105,17 @@ - - + + -