mirrors
/
donphan
mirror of https://github.com/Siphonay/mastodon
1
0
Fork 0
Code Releases Activity

[Glitch] Improve polls: option lengths & redesign 

Port 37b3985bfa 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 2e337d850f
commit b367dd713e
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 ( 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>
); );
} }

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

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

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

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