diff options
Diffstat (limited to 'app')
3 files changed, 40 insertions, 30 deletions
diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js index 62965df94..46fd1e8c0 100644 --- a/app/javascript/flavours/glitch/components/poll.js +++ b/app/javascript/flavours/glitch/components/poll.js @@ -127,15 +127,7 @@ class Poll extends ImmutablePureComponent { return ( <li key={option.get('title')}> - {showResults && ( - <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}> - {({ width }) => - <span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} /> - } - </Motion> - )} - - <label className={classNames('poll__text', { selectable: !showResults })}> + <label className={classNames('poll__option', { selectable: !showResults })}> <input name='vote-options' type={poll.get('multiple') ? 'checkbox' : 'radio'} @@ -157,12 +149,26 @@ class Poll extends ImmutablePureComponent { /> )} {showResults && <span className='poll__number'> - {!!voted && <Icon id='check' className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />} {Math.round(percent)}% </span>} - <span dangerouslySetInnerHTML={{ __html: titleEmojified }} /> + <span + className='poll__option__text' + dangerouslySetInnerHTML={{ __html: titleEmojified }} + /> + + {!!voted && <span className='poll__voted'> + <Icon id='check' className='poll__voted__mark' title={intl.formatMessage(messages.voted)} /> + </span>} </label> + + {showResults && ( + <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}> + {({ width }) => + <span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} /> + } + </Motion> + )} </li> ); } diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_form.js b/app/javascript/flavours/glitch/features/compose/components/poll_form.js index 2dce54418..57fac10ac 100644 --- a/app/javascript/flavours/glitch/features/compose/components/poll_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.js @@ -62,7 +62,7 @@ class Option extends React.PureComponent { return ( <li> - <label className='poll__text editable'> + <label className='poll__option editable'> <span className={classNames('poll__input', { checkbox: isPollMultiple })} /> <AutosuggestInput diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index f00aac2ee..44338338f 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -14,20 +14,18 @@ } &__chart { - position: absolute; - top: 0; - left: 0; - height: 100%; - display: inline-block; border-radius: 4px; - background: darken($ui-primary-color, 14%); + display: block; + background: darken($ui-primary-color, 5%); + height: 5px; + min-width: 1%; &.leading { background: $ui-highlight-color; } } - &__text { + &__option { position: relative; display: flex; padding: 6px 0; @@ -35,6 +33,13 @@ cursor: default; overflow: hidden; + &__text { + display: inline-block; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: calc(100% - 45px - 25px); + } + input[type=radio], input[type=checkbox] { display: none; @@ -119,19 +124,18 @@ &__number { display: inline-block; - width: 52px; + width: 45px; font-weight: 700; - padding: 0 10px; - padding-left: 8px; - text-align: right; - margin-top: auto; - margin-bottom: auto; - flex: 0 0 52px; + flex: 0 0 45px; } - &__vote__mark { - float: left; - line-height: 18px; + &__voted { + padding: 0 5px; + display: inline-block; + + &__mark { + font-size: 18px; + } } &__footer { @@ -208,7 +212,7 @@ display: flex; align-items: center; - .poll__text { + .poll__option { flex: 0 0 auto; width: calc(100% - (23px + 6px)); margin-right: 6px; |