Fix form polls UI with lots of answers

pull/1/head
yflory 4 years ago
parent 360204df30
commit fc38d8fef8

@ -509,6 +509,14 @@
& > div { & > div {
display: flex; display: flex;
} }
.cp-form-poll-body {
flex-flow: column;
max-height: 200px;
overflow: auto;
& > div {
display: flex;
}
}
.cp-poll-cell { .cp-poll-cell {
width: 100px; width: 100px;
height: 40px; height: 40px;
@ -523,6 +531,15 @@
} }
} }
.cp-poll-answer-name { .cp-poll-answer-name {
padding: 0 5px;
display: flex;
:last-child {
flex: 1;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.cp-avatar { .cp-avatar {
.avatar_main(30px); .avatar_main(30px);
margin-right: 10px; margin-right: 10px;
@ -536,8 +553,20 @@
} }
&.cp-form-poll-switch { &.cp-form-poll-switch {
flex-flow: row; flex-flow: row;
.cp-avatar {
.avatar_main(20px);
}
& > div { & > div {
flex-flow: column; flex-flow: column;
&.cp-form-poll-body {
flex-flow: row;
max-width: 500px;
max-height: unset;
scroll-snap-type: x mandatory;
& > div {
flex-flow: column;
}
}
} }
.cp-poll-cell:not(.cp-poll-switch) { .cp-poll-cell:not(.cp-poll-switch) {
&:first-child { &:first-child {

@ -704,6 +704,7 @@ define([
} }
// Add answers // Add answers
var bodyEls = [];
if (Array.isArray(answers)) { if (Array.isArray(answers)) {
answers.forEach(function (answerObj) { answers.forEach(function (answerObj) {
var answer = answerObj.results; var answer = answerObj.results;
@ -724,9 +725,11 @@ define([
avatar, avatar,
h('span', name) h('span', name)
])); ]));
lines.push(h('div', els)); bodyEls.push(h('div', els));
}); });
} }
var body = h('div.cp-form-poll-body', bodyEls);
lines.push(body);
var $s = $(switchAxis).click(function () { var $s = $(switchAxis).click(function () {
$s.closest('.cp-form-type-poll').toggleClass('cp-form-poll-switch'); $s.closest('.cp-form-type-poll').toggleClass('cp-form-poll-switch');
@ -1438,7 +1441,7 @@ define([
addLine.unshift(h('div.cp-poll-cell', nameInput)); addLine.unshift(h('div.cp-poll-cell', nameInput));
lines.push(h('div', addLine)); lines.push(h('div', addLine));
var tag = h('div.cp-form-type-poll', lines); var tag = h('div', h('div.cp-form-type-poll', lines));
var $tag = $(tag); var $tag = $(tag);
var cursorGetter; var cursorGetter;

Loading…
Cancel
Save