[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 (
|
return (
|
||||||
<li key={option.get('title')}>
|
<li key={option.get('title')}>
|
||||||
{showResults && (
|
<label className={classNames('poll__option', { selectable: !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 })}>
|
|
||||||
<input
|
<input
|
||||||
name='vote-options'
|
name='vote-options'
|
||||||
type={poll.get('multiple') ? 'checkbox' : 'radio'}
|
type={poll.get('multiple') ? 'checkbox' : 'radio'}
|
||||||
|
@ -157,12 +149,26 @@ class Poll extends ImmutablePureComponent {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{showResults && <span className='poll__number'>
|
{showResults && <span className='poll__number'>
|
||||||
{!!voted && <Icon id='check' className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
|
|
||||||
{Math.round(percent)}%
|
{Math.round(percent)}%
|
||||||
</span>}
|
</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>
|
</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>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -62,7 +62,7 @@ class Option extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li>
|
<li>
|
||||||
<label className='poll__text editable'>
|
<label className='poll__option editable'>
|
||||||
<span className={classNames('poll__input', { checkbox: isPollMultiple })} />
|
<span className={classNames('poll__input', { checkbox: isPollMultiple })} />
|
||||||
|
|
||||||
<AutosuggestInput
|
<AutosuggestInput
|
||||||
|
|
|
@ -14,20 +14,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__chart {
|
&__chart {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: darken($ui-primary-color, 14%);
|
display: block;
|
||||||
|
background: darken($ui-primary-color, 5%);
|
||||||
|
height: 5px;
|
||||||
|
min-width: 1%;
|
||||||
|
|
||||||
&.leading {
|
&.leading {
|
||||||
background: $ui-highlight-color;
|
background: $ui-highlight-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__option {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
|
@ -35,6 +33,13 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
overflow: hidden;
|
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=radio],
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -119,19 +124,18 @@
|
||||||
|
|
||||||
&__number {
|
&__number {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 52px;
|
width: 45px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 0 10px;
|
flex: 0 0 45px;
|
||||||
padding-left: 8px;
|
|
||||||
text-align: right;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: auto;
|
|
||||||
flex: 0 0 52px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__vote__mark {
|
&__voted {
|
||||||
float: left;
|
padding: 0 5px;
|
||||||
line-height: 18px;
|
display: inline-block;
|
||||||
|
|
||||||
|
&__mark {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
|
@ -208,7 +212,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.poll__text {
|
.poll__option {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: calc(100% - (23px + 6px));
|
width: calc(100% - (23px + 6px));
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
|
|
Loading…
Reference in New Issue