Fix form polls UI with lots of answers

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

@ -509,6 +509,14 @@
& > div {
display: flex;
}
.cp-form-poll-body {
flex-flow: column;
max-height: 200px;
overflow: auto;
& > div {
display: flex;
}
}
.cp-poll-cell {
width: 100px;
height: 40px;
@ -523,6 +531,15 @@
}
}
.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 {
.avatar_main(30px);
margin-right: 10px;
@ -536,8 +553,20 @@
}
&.cp-form-poll-switch {
flex-flow: row;
.cp-avatar {
.avatar_main(20px);
}
& > div {
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) {
&:first-child {

@ -704,6 +704,7 @@ define([
}
// Add answers
var bodyEls = [];
if (Array.isArray(answers)) {
answers.forEach(function (answerObj) {
var answer = answerObj.results;
@ -724,9 +725,11 @@ define([
avatar,
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 () {
$s.closest('.cp-form-type-poll').toggleClass('cp-form-poll-switch');
@ -1438,7 +1441,7 @@ define([
addLine.unshift(h('div.cp-poll-cell', nameInput));
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 cursorGetter;

Loading…
Cancel
Save