Files
element-web/res/css/views/messages/_MPollBody.pcss
David Langley be8a18964e Update polls UX to match EX Mobile and improve accessibility (#31245)
* Remove poll ended event UI.

* Add better aria labels for screen reader and change ui to match mobile UX.

- Checkmark and progress bar are only green if the poll is ended.
- Updated the Poll icon for open and ended state and added labels
- Right align total votes count and update text

* Update jest tests

* Fix total votes alignment

* Fix screenshots

* Update snapshot

* Update e2e tests

* fix more e2e tests

* Clean up CSS

* Add back text for undisclosed poll (total should be hidden)

* Update checkmark and progress colours to more closely match mobile

* Don't compute optionNumber on each render

* "Total votes" working doesn't really work with the current web behaviour

Web doesn't show the votes for undisclosed polls(mobile does). reverting and that behaviour change should be addressed in a different PR(or on mobile.).

* Fix e2e test

* Update screenshots

* Move positioning of total votes label back to the left side

as we are no longer changing the copy to match mobile

* Don't concatenate label

* Fix translation order

* Remove unneeded translations

* remove O(n^2) code

* fix snapshots

* Fix check style in poll option

* prettier
2025-12-05 19:56:04 +00:00

66 lines
1.7 KiB
Plaintext

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
$poll-max-width: 550px;
.mx_MPollBody {
margin-top: var(--cpd-space-2x);
min-width: 0; /* Override fieldset default min-width: min-content */
width: 100%; /* Ensure fieldset takes full available width */
border: none; /* Remove default fieldset border */
padding: 0; /* Remove default fieldset padding */
legend {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;
margin-bottom: var(--cpd-space-2x);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
display: flex;
align-items: center;
gap: var(--cpd-space-3x);
svg {
flex-shrink: 0;
color: var(--cpd-color-icon-primary);
}
.mx_MPollBody_edited {
color: $roomtopic-color;
font-size: $font-12px;
opacity: 0.6;
}
}
.mx_MPollBody_totalVotes {
display: flex;
flex-direction: inline;
justify-content: start;
color: $secondary-content;
font-size: $font-12px;
.mx_Spinner {
flex: 0;
margin-left: $spacing-8;
}
}
}
/* Prevent clicking a poll within a reply */
.mx_ReplyTile .mx_MPollBody {
pointer-events: none;
}
.mx_MPollBody_allOptions {
display: grid;
gap: $spacing-16;
margin-bottom: $spacing-8;
max-width: $poll-max-width;
}