me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Improve polls: option lengths & redesign

Browse source 
Port abbc0c6a87 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Sasha Sorokin 2020-04-02 22:10:55 +07:00 committed by Thibaut Girka
parent 660a3d2b7a
commit 56dba219d1
3 changed files with 40 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/javascript/flavours/glitch/components/poll.js
View file

@ -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>
);
}

2
app/javascript/flavours/glitch/features/compose/components/poll_form.js
View file

@ -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

40
app/javascript/flavours/glitch/styles/polls.scss
View file

@ -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;