infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix table rendering in polls description

Browse Source
pull/1/head
yflory 6 years ago
parent 1c5847dd01
commit c4c1fcb080
2 changed files with 262 additions and 256 deletions
Show Stats Download Patch File Download Diff File

516
www/poll/app-poll.less
Unescape Escape View File

@ -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; tr td:nth-last-child(2) {
right: 100px;
}
} }
}
table { table {
border-collapse: collapse; border-collapse: collapse;
width: ~"calc(100% - 1px)"; width: ~"calc(100% - 1px)";
.cp-app-poll-table-editing { .cp-app-poll-table-editing {
background-color: @poll-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 { .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 {
&[type="number"] {
&:not(.editable) {
display: none;
~ .cp-app-poll-table-cover { label {
line-height: 28px; background-color: transparent;
display: block; display: block;
font-weight: bold; position: absolute;
height: 100%; top: 0px;
display: block; left: 0px;
height: 100%;
width: 100%;
}
color: @poll-cover-color; input {
&[type="number"] {
&:not(.editable) {
display: none;
&:after { ~ .cp-app-poll-table-cover {
line-height: 28px;
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 {
height: 52px;
tr {
height: 52px;
} }
td { thead {
padding: 0px 5px; height: 52px;
background: @poll-th-bg; tr {
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;
}
.cp-app-poll-table-edit {
float:right;
margin: 2px 10px 0 0;
}
.cp-app-poll-table-remove {
float: left;
margin: 2px 0 0 10px;
}
} }
} tr:not(:first-child) {
tr:not(:first-child) { td:not(:first-child) {
td:not(:first-child) { label {
label { border-top: 1px solid @poll-border-color;
border-top: 1px solid @poll-border-color; }
} }
} }
} tr:not(:last-child) {
tr:not(:last-child) { &:hover {
&:hover { td:first-child {
td:first-child { background-color: @poll-highlighted;
background-color: @poll-highlighted; }
} }
} }
} }
} .cp-app-poll-table-edit {
.cp-app-poll-table-edit { //color: @poll-cover-color;
//color: @poll-cover-color; cursor: pointer;
cursor: pointer; float: left;
float: left; margin-left: 10px;
margin-left: 10px; }
}
thead { thead {
tr { tr {
th { th {
input[type="text"][disabled] { input[type="text"][disabled] {
background-color: transparent; background-color: transparent;
color: @poll-fore; color: @poll-fore;
font-weight: bold; font-weight: bold;
} }
.cp-app-poll-table-remove { .cp-app-poll-table-remove {
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
}
} }
} }
} }
} tbody {
tbody { tr {
tr { td {
td {
}
} }
} }
} tfoot {
tfoot { display: none;
display: none; }
} }
} }
#cp-app-poll-nocomments { #cp-app-poll-nocomments {
@ -669,4 +673,4 @@
justify-content: center; justify-content: center;
} }
} }

2
www/slide/app-slide.less
Unescape Escape View File

@ -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%;

Write Preview
Loading…
Cancel
Save