Fix table rendering in polls description
This commit is contained in:
yflory
parent
1c5847dd01
commit
c4c1fcb080
@ -1,8 +1,9 @@
|
|||||||
@import (reference) '../../customize/src/less2/include/tools.less';
|
@import (reference) '../../customize/src/less2/include/tools.less';
|
||||||
@import (reference) '../../customize/src/less2/include/avatar.less';
|
@import (reference) '../../customize/src/less2/include/avatar.less';
|
||||||
@import (reference) "../../customize/src/less2/include/framework.less";
|
@import (reference) "../../customize/src/less2/include/framework.less";
|
||||||
|
@import (reference) "../../customize/src/less2/include/markdown.less";
|
||||||
|
|
||||||
&.cp-app-poll {
|
&.cp-app-poll {
|
||||||
|
|
||||||
.framework_main(
|
.framework_main(
|
||||||
@bg-color: @colortheme_poll-bg,
|
@bg-color: @colortheme_poll-bg,
|
||||||
@ -212,27 +213,28 @@
|
|||||||
|
|
||||||
// from cryptpad.less
|
// from cryptpad.less
|
||||||
|
|
||||||
table {
|
#cp-app-poll-table-container {
|
||||||
border-collapse: collapse;
|
table {
|
||||||
border-spacing: 0;
|
border-collapse: collapse;
|
||||||
margin: 20px;
|
border-spacing: 0;
|
||||||
}
|
|
||||||
tbody {
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
tr {
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
tbody {
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
.tools_unselectable();
|
.tools_unselectable();
|
||||||
border-right: 1px solid @poll-border-color;
|
border-right: 1px solid @poll-border-color;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -256,303 +258,305 @@
|
|||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
||||||
.cp-app-poll-table-scrolled {
|
#cp-app-poll-table-container {
|
||||||
tr td:last-child {
|
.cp-app-poll-table-scrolled {
|
||||||
right: 0;
|
tr td:last-child {
|
||||||
}
|
right: 0;
|
||||||
tr td:nth-last-child(2) {
|
|
||||||
right: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: ~"calc(100% - 1px)";
|
|
||||||
.cp-app-poll-table-editing {
|
|
||||||
background-color: @poll-editing;
|
|
||||||
}
|
|
||||||
.cp-app-poll-table-uncommitted {
|
|
||||||
.cp-app-poll-table-cover {
|
|
||||||
background-color: @poll-uncommitted-cell !important;
|
|
||||||
}
|
}
|
||||||
div.cp-app-poll-table-text-cell {
|
tr td:nth-last-child(2) {
|
||||||
|
right: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: ~"calc(100% - 1px)";
|
||||||
|
.cp-app-poll-table-editing {
|
||||||
|
background-color: @poll-editing;
|
||||||
|
}
|
||||||
|
.cp-app-poll-table-uncommitted {
|
||||||
|
.cp-app-poll-table-cover {
|
||||||
|
background-color: @poll-uncommitted-cell !important;
|
||||||
|
}
|
||||||
|
div.cp-app-poll-table-text-cell {
|
||||||
|
background-color: @poll-uncommitted-bg !important;
|
||||||
|
color: @poll-uncommitted-text !important;
|
||||||
|
}
|
||||||
|
text-align: center;
|
||||||
background-color: @poll-uncommitted-bg !important;
|
background-color: @poll-uncommitted-bg !important;
|
||||||
color: @poll-uncommitted-text !important;
|
color: @poll-uncommitted-text !important;
|
||||||
}
|
}
|
||||||
text-align: center;
|
tr {
|
||||||
background-color: @poll-uncommitted-bg !important;
|
height: 28px;
|
||||||
color: @poll-uncommitted-text !important;
|
/* Options */
|
||||||
}
|
td:first-child {
|
||||||
tr {
|
position:absolute;
|
||||||
height: 28px;
|
left: 0;
|
||||||
/* Options */
|
top: auto;
|
||||||
td:first-child {
|
width: 25%;
|
||||||
position:absolute;
|
}
|
||||||
left: 0;
|
/* Uncommitted column */
|
||||||
top: auto;
|
td:nth-last-child(2) {
|
||||||
width: 25%;
|
position: absolute;
|
||||||
}
|
top: auto;
|
||||||
/* Uncommitted column */
|
width: 100px;
|
||||||
td:nth-last-child(2) {
|
min-width: unset !important;
|
||||||
position: absolute;
|
height: auto !important;
|
||||||
top: auto;
|
}
|
||||||
width: 100px;
|
/* Results */
|
||||||
min-width: unset !important;
|
td:last-child {
|
||||||
height: auto !important;
|
color: @poll-th-fg;
|
||||||
}
|
position:absolute;
|
||||||
/* Results */
|
top: auto;
|
||||||
td:last-child {
|
margin-left: 100px;
|
||||||
color: @poll-th-fg;
|
width: 100px;
|
||||||
position:absolute;
|
min-width: unset !important;
|
||||||
top: auto;
|
background-color: @poll-th-bg;
|
||||||
margin-left: 100px;
|
}
|
||||||
width: 100px;
|
td {
|
||||||
min-width: unset !important;
|
|
||||||
background-color: @poll-th-bg;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
div.cp-app-poll-table-text-cell {
|
|
||||||
height: 28px;
|
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
div.cp-app-poll-table-text-cell {
|
||||||
.cp-app-poll-table-remove {
|
height: 28px;
|
||||||
order: 1;
|
padding: 0px;
|
||||||
}
|
margin: 0px;
|
||||||
.cp-app-poll-table-edit {
|
display: flex;
|
||||||
order: 3;
|
align-items: center;
|
||||||
}
|
.cp-app-poll-table-remove {
|
||||||
input {
|
order: 1;
|
||||||
min-width: 0;
|
}
|
||||||
order: 2;
|
.cp-app-poll-table-edit {
|
||||||
flex: 1;
|
order: 3;
|
||||||
height: 24px;
|
}
|
||||||
border: 0px;
|
input {
|
||||||
margin: 2px;
|
min-width: 0;
|
||||||
&[disabled] {
|
order: 2;
|
||||||
background-color: transparent;
|
flex: 1;
|
||||||
color: @poll-td-fg;
|
height: 24px;
|
||||||
//font-weight: bold;
|
border: 0px;
|
||||||
|
margin: 2px;
|
||||||
|
&[disabled] {
|
||||||
|
background-color: transparent;
|
||||||
|
color: @poll-td-fg;
|
||||||
|
//font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.cp-app-poll-table-checkbox-cell {
|
&.cp-app-poll-table-checkbox-cell {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
height: 100%;
|
|
||||||
min-width: 100px;
|
|
||||||
|
|
||||||
div.cp-app-poll-table-checkbox-contain {
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
min-width: 100px;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
label {
|
div.cp-app-poll-table-checkbox-contain {
|
||||||
background-color: transparent;
|
display: inline-block;
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
input {
|
label {
|
||||||
&[type="number"] {
|
background-color: transparent;
|
||||||
&:not(.editable) {
|
display: block;
|
||||||
display: none;
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
~ .cp-app-poll-table-cover {
|
input {
|
||||||
line-height: 28px;
|
&[type="number"] {
|
||||||
display: block;
|
&:not(.editable) {
|
||||||
font-weight: bold;
|
display: none;
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
color: @poll-cover-color;
|
~ .cp-app-poll-table-cover {
|
||||||
|
line-height: 28px;
|
||||||
&:after {
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
display: block;
|
||||||
|
|
||||||
|
color: @poll-cover-color;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"][value="0"] {
|
input[type="number"][value="0"] {
|
||||||
~ .cp-app-poll-table-cover {
|
~ .cp-app-poll-table-cover {
|
||||||
background-color: @colortheme_cp-red;
|
background-color: @colortheme_cp-red;
|
||||||
&:after { content: "✖"; }
|
&:after { content: "✖"; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
input[type="number"][value="1"] {
|
||||||
input[type="number"][value="1"] {
|
~ .cp-app-poll-table-cover {
|
||||||
~ .cp-app-poll-table-cover {
|
background-color: @colortheme_cp-green;
|
||||||
background-color: @colortheme_cp-green;
|
&:after { content: "✔"; }
|
||||||
&:after { content: "✔"; }
|
}
|
||||||
}
|
}
|
||||||
}
|
input[type="number"][value="2"] {
|
||||||
input[type="number"][value="2"] {
|
~ .cp-app-poll-table-cover {
|
||||||
~ .cp-app-poll-table-cover {
|
background-color: @poll-option-yellow;
|
||||||
background-color: @poll-option-yellow;
|
&:after { content: "~"; }
|
||||||
&:after { content: "~"; }
|
}
|
||||||
}
|
}
|
||||||
}
|
input[type="number"][value="3"] {
|
||||||
input[type="number"][value="3"] {
|
~ .cp-app-poll-table-cover {
|
||||||
~ .cp-app-poll-table-cover {
|
background-color: @poll-option-gray;
|
||||||
background-color: @poll-option-gray;
|
&:after { content: "?"; }
|
||||||
&:after { content: "?"; }
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
&[type="text"] {
|
&[type="text"] {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
span {
|
||||||
span {
|
.tools_unselectable();
|
||||||
.tools_unselectable();
|
}
|
||||||
}
|
thead {
|
||||||
thead {
|
|
||||||
height: 52px;
|
|
||||||
tr {
|
|
||||||
height: 52px;
|
height: 52px;
|
||||||
}
|
tr {
|
||||||
td {
|
|
||||||
padding: 0px 5px;
|
|
||||||
background: @poll-th-bg;
|
|
||||||
color: @poll-th-fg;
|
|
||||||
&:not(:last-child) {
|
|
||||||
border-right: 1px solid rgba(255,255,255,0.2);
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
height: 52px;
|
height: 52px;
|
||||||
line-height: 52px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
&:nth-last-child(2) {
|
td {
|
||||||
border-right: 1px solid @poll-border-color;
|
padding: 0px 5px;
|
||||||
}
|
background: @poll-th-bg;
|
||||||
&.cp-app-poll-table-own {
|
color: @poll-th-fg;
|
||||||
background: @poll-th-user-bg;
|
&:not(:last-child) {
|
||||||
.cp-app-poll-table-lock {
|
border-right: 1px solid rgba(255,255,255,0.2);
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
}
|
&:last-child {
|
||||||
.cp-app-poll-table-buttons {
|
height: 52px;
|
||||||
display: flex;
|
line-height: 52px;
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
span {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 1em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.cp-app-poll-table-bookmark {
|
&:nth-last-child(2) {
|
||||||
color: darken(@poll-th-fg, 30%);
|
border-right: 1px solid @poll-border-color;
|
||||||
&.cp-app-poll-table-bookmark-full {
|
}
|
||||||
color: @poll-th-fg;
|
&.cp-app-poll-table-own {
|
||||||
|
background: @poll-th-user-bg;
|
||||||
|
.cp-app-poll-table-lock {
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.cp-app-poll-table-buttons {
|
||||||
input {
|
display: flex;
|
||||||
&[type="text"] {
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
flex-wrap: wrap;
|
||||||
text-overflow: ellipsis;
|
align-items: center;
|
||||||
break-after: always;
|
span {
|
||||||
width: ~"calc(100% - 2px)"; // borders...
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
width: 1em;
|
||||||
padding: 1px 5px;
|
text-align: center;
|
||||||
margin: 1px;
|
}
|
||||||
&[disabled] {
|
.cp-app-poll-table-bookmark {
|
||||||
color: @poll-th-fg;
|
color: darken(@poll-th-fg, 30%);
|
||||||
|
&.cp-app-poll-table-bookmark-full {
|
||||||
|
color: @poll-th-fg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
&[type="text"] {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
break-after: always;
|
||||||
|
width: ~"calc(100% - 2px)"; // borders...
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1px 5px;
|
||||||
|
margin: 1px;
|
||||||
|
&[disabled] {
|
||||||
|
color: @poll-th-fg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
tbody {
|
||||||
td:first-child {
|
td:first-child {
|
||||||
background: @poll-td-bg;
|
background: @poll-td-bg;
|
||||||
color: @poll-td-fg;
|
color: @poll-td-fg;
|
||||||
}
|
|
||||||
td.cp-app-poll-table-winner {
|
|
||||||
background-color: @poll-winner;
|
|
||||||
&:last-child { font-weight: bold; }
|
|
||||||
}
|
|
||||||
.cp-app-poll-table-text-cell {
|
|
||||||
input[type="text"] {
|
|
||||||
width: ~"calc(100% - 50px)";
|
|
||||||
padding: 0 0.5em;
|
|
||||||
}
|
}
|
||||||
.cp-app-poll-table-edit {
|
td.cp-app-poll-table-winner {
|
||||||
float:right;
|
background-color: @poll-winner;
|
||||||
margin: 2px 10px 0 0;
|
&:last-child { font-weight: bold; }
|
||||||
}
|
}
|
||||||
.cp-app-poll-table-remove {
|
.cp-app-poll-table-text-cell {
|
||||||
float: left;
|
input[type="text"] {
|
||||||
margin: 2px 0 0 10px;
|
width: ~"calc(100% - 50px)";
|
||||||
}
|
padding: 0 0.5em;
|
||||||
}
|
|
||||||
tr:not(:first-child) {
|
|
||||||
td:not(:first-child) {
|
|
||||||
label {
|
|
||||||
border-top: 1px solid @poll-border-color;
|
|
||||||
}
|
}
|
||||||
}
|
.cp-app-poll-table-edit {
|
||||||
}
|
float:right;
|
||||||
tr:not(:last-child) {
|
margin: 2px 10px 0 0;
|
||||||
&:hover {
|
|
||||||
td:first-child {
|
|
||||||
background-color: @poll-highlighted;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cp-app-poll-table-edit {
|
|
||||||
//color: @poll-cover-color;
|
|
||||||
cursor: pointer;
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
tr {
|
|
||||||
th {
|
|
||||||
input[type="text"][disabled] {
|
|
||||||
background-color: transparent;
|
|
||||||
color: @poll-fore;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
.cp-app-poll-table-remove {
|
.cp-app-poll-table-remove {
|
||||||
cursor: pointer;
|
float: left;
|
||||||
font-size: 20px;
|
margin: 2px 0 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr:not(:first-child) {
|
||||||
|
td:not(:first-child) {
|
||||||
|
label {
|
||||||
|
border-top: 1px solid @poll-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr:not(:last-child) {
|
||||||
|
&:hover {
|
||||||
|
td:first-child {
|
||||||
|
background-color: @poll-highlighted;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.cp-app-poll-table-edit {
|
||||||
tbody {
|
//color: @poll-cover-color;
|
||||||
tr {
|
cursor: pointer;
|
||||||
td {
|
float: left;
|
||||||
|
margin-left: 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 {
|
||||||
tfoot {
|
tr {
|
||||||
display: none;
|
td {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tfoot {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#cp-app-poll-nocomments {
|
#cp-app-poll-nocomments {
|
||||||
@ -669,4 +673,4 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -351,7 +351,9 @@
|
|||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.markdown_main();
|
||||||
.markdown_preformatted-code;
|
.markdown_preformatted-code;
|
||||||
|
.markdown_gfm-table(#ddd);
|
||||||
|
|
||||||
ul, ol {
|
ul, ol {
|
||||||
min-width: 50%;
|
min-width: 50%;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user