[Glitch] Improve polls: option lengths & redesign
Port 37b3985bfa
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1310/head
parent
2e337d850f
commit
b367dd713e
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue