mirror of
https://github.com/element-hq/element-web
synced 2024-11-26 19:26:04 +03:00
Prevent text overlapping on poll options (#7187)
This commit is contained in:
Andy Balaam
GitHub
parent
d705fdd6e4
commit
359962af6c
3 changed files with 153 additions and 95 deletions
|
|
@ -57,15 +57,23 @@ limitations under the License.
|
|||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.mx_MPollBody_optionVoteCount {
|
||||
position: absolute;
|
||||
color: $secondary-content;
|
||||
right: 4px;
|
||||
font-size: $font-12px;
|
||||
.mx_StyledRadioButton_spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_MPollBody_optionDescription {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.mx_MPollBody_optionVoteCount {
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MPollBody_popularityBackground {
|
||||
width: calc(100% - 4px);
|
||||
width: calc(100% - 6px);
|
||||
height: 8px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
|
|
@ -197,11 +197,13 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
|
|||
checked={this.state.selected === answer.id}
|
||||
onChange={this.onOptionSelected}
|
||||
>
|
||||
<div className="mx_MPollBody_optionVoteCount">
|
||||
{ _t("%(count)s votes", { count: answerVotes }) }
|
||||
</div>
|
||||
<div className="mx_MPollBody_optionText">
|
||||
{ answer[TEXT_NODE_TYPE] }
|
||||
<div className="mx_MPollBody_optionDescription">
|
||||
<div className="mx_MPollBody_optionText">
|
||||
{ answer[TEXT_NODE_TYPE] }
|
||||
</div>
|
||||
<div className="mx_MPollBody_optionVoteCount">
|
||||
{ _t("%(count)s votes", { count: answerVotes }) }
|
||||
</div>
|
||||
</div>
|
||||
</StyledRadioButton>
|
||||
<div className="mx_MPollBody_popularityBackground">
|
||||
|
|
|
|||
|
|
@ -120,14 +120,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
1 vote
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Pizza
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Pizza
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
1 vote
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -178,14 +182,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Poutine
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Poutine
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -236,14 +244,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
3 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Italian
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Italian
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
3 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -294,14 +306,18 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
1 vote
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Wings
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Wings
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
1 vote
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -453,14 +469,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Pizza
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Pizza
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -511,14 +531,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Poutine
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Poutine
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -569,14 +593,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Italian
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Italian
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -627,14 +655,18 @@ exports[`MPollBody renders a poll with no votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Wings
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Wings
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -786,14 +818,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Pizza
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Pizza
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -844,14 +880,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Poutine
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Poutine
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
0 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -902,14 +942,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
2 votes
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Italian
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Italian
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
2 votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -960,14 +1004,18 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
|
|||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
className="mx_MPollBody_optionDescription"
|
||||
>
|
||||
1 vote
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Wings
|
||||
<div
|
||||
className="mx_MPollBody_optionText"
|
||||
>
|
||||
Wings
|
||||
</div>
|
||||
<div
|
||||
className="mx_MPollBody_optionVoteCount"
|
||||
>
|
||||
1 vote
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in a new issue