diff --git a/customize.dist/src/less2/include/app-noscroll.less b/customize.dist/src/less2/include/app-noscroll.less index e30fa5f2d..00388dd05 100644 --- a/customize.dist/src/less2/include/app-noscroll.less +++ b/customize.dist/src/less2/include/app-noscroll.less @@ -11,10 +11,12 @@ } ::-webkit-scrollbar { width: 6px; + height: 6px; } ::-webkit-scrollbar-thumb { background-color: @cp_scrollbar-fg; width: 6px; + height: 6px; } height: 100%; width: 100%; diff --git a/www/form/app-form.less b/www/form/app-form.less index 5aa0c4d2c..e01686afd 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -276,6 +276,7 @@ } } div.cp-form-creator-content { + position: relative; .cp-form-block-type { margin-top: -35px; &.editable { @@ -924,8 +925,12 @@ display: flex; flex-flow: column; align-items: baseline; - .cp-radio { + .cp-radio, .cp-checkmark { display: inline-flex; + max-width: 100%; + } + .cp-checkmark-label { + overflow: auto; } } .cp-form-type-multiradio { @@ -938,6 +943,8 @@ vertical-align: middle; &:first-child { min-width: 200px; + max-width: 350px; + overflow: auto; } .cp-radio-mark { margin: auto; @@ -951,8 +958,11 @@ .cp-form-type-sort { cursor: grab; padding: 5px; + display: flex; + align-items: center; + overflow: auto; .cp-form-handle { - margin-right: 5px; + min-width: 12px; } .cp-form-sort-order { border: 1px solid @cryptpad_text_col; @@ -971,12 +981,14 @@ .cp-form-type-poll-container { overflow: auto; .cp-form-poll-hint { - margin-bottom: 10px; + position: absolute; } } .cp-form-type-poll { + margin-top: 32px; // cp-form-poll-hint is "absolute" display: inline-flex; flex-flow: column; + width: 100%; & > div { display: flex; } @@ -986,7 +998,6 @@ .cp-form-poll-body { flex-flow: column; max-height: 225px; - overflow: auto; & > div { display: flex; @@ -1000,9 +1011,7 @@ justify-content: center; margin-top:5px; margin-left:5px; - &:first-child { - width: 200px; - } + flex-shrink: 0; button { width: 100%; border-top: 0px; @@ -1048,6 +1057,9 @@ .cp-poll-time-day { flex-basis: 100px; border-bottom: 1px solid @cryptpad_text_col; + &:first-child { + border-color: @cp_form-bg1 !important; + } } &:not(.cp-form-poll-switch) { & > div { @@ -1055,14 +1067,38 @@ margin-bottom: 5px; } } - .cp-form-poll-body { - &::-webkit-scrollbar { - display: none; + + .cp-poll-cell { + &:first-child { + min-width: 200px; + background: #424242; + position: absolute; + margin-left: 0; + background: @cp_form-bg1; + } + &:nth-child(2) { + margin-left: 205px; } - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ } + + .cp-form-poll-option, .cp-poll-time-day, .cp-form-poll-choice { + flex-grow: 1; + flex-shrink: 0; + } + .cp-form-poll-option, .cp-poll-time-day { + span { + text-overflow: ellipsis; + max-width: 100%; + overflow: hidden; + line-height: 1.2; + hyphens: auto; + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + flex-flow: column; text-align: center; .cp-form-weekday-separator { @@ -1083,9 +1119,6 @@ flex-flow: column; &.cp-form-poll-body { flex-flow: row; - max-width: 550px; - max-height: unset; - scroll-snap-type: x mandatory; & > div { flex-flow: column; } @@ -1100,12 +1133,23 @@ } } .cp-form-poll-option, .cp-poll-switch { + span { + text-overflow: ellipsis; + max-width: 100%; + overflow: hidden; + max-height: 100%; + line-height: 1.2; + text-align: center; + } width: 200px; .cp-form-weekday-separator { margin-right: 5px; margin-left: 5px; } } + div.cp-poll-time-day-container { + width: auto !important; + } .cp-poll-time-day { flex-basis: 40px; border-right: none; diff --git a/www/form/inner.js b/www/form/inner.js index 29735ad1d..4450a03d1 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -725,7 +725,7 @@ define([ // Add an initial row to "time" values containing the days if (opts.type === "time") { - var days = [h('div.cp-poll-cell')]; + var days = [h('div.cp-poll-cell.cp-poll-time-day')]; var _days = {}; extractValues(opts.values).forEach(function (d) { var date = new Date(d); @@ -745,7 +745,8 @@ define([ h('span', day) ])); }); - lines.unshift(h('div', days)); + var w = 200 + 105*(opts.values.length || 1); + lines.unshift(h('div.cp-poll-time-day-container', {style: 'width:'+w+'px;'}, days)); } // Add answers