mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-28 03:34:27 +08:00
b92b803cbc
Created first in own fork here: https://github.com/elRicharde/discourse/pull/1 Poll option list items had no layout container, allowing @mention pills to overlap the option marker or checkbox. This change makes poll options flex rows so marker and content are always laid out side by side. CSS only, no behavior or markup changes. Repro: Create a poll with options that include @mentions (mention pills). In the cooked topic view, the option marker/checkbox can overlap the mention pill. Fix: Make poll option list items a flex row so the marker/checkbox and the option content are laid out side by side with consistent spacing. Screenshots show the overlap before the change. Screenshot 2026-02-08 093307 Screenshot 2026-02-08 093403 image --------- Co-authored-by: Derek Rushforth <derekrushforth@users.noreply.github.com>
623 lines
13 KiB
SCSS
Vendored
623 lines
13 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
:root {
|
|
--poll-bar-color: var(--primary-medium);
|
|
--poll-bar-color--chosen: var(--tertiary);
|
|
}
|
|
|
|
div.poll-outer {
|
|
div.poll {
|
|
margin: 1em 0;
|
|
border: 1px solid var(--content-border-color);
|
|
display: grid;
|
|
grid-template-areas: "poll" "info" "buttons";
|
|
|
|
@include viewport.from(sm) {
|
|
grid-template-columns: 1fr 10em;
|
|
grid-template-areas: "poll info" "buttons buttons";
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
li[data-poll-option-id] {
|
|
color: var(--primary);
|
|
padding: 0.5em 0;
|
|
word-break: break-word;
|
|
|
|
button {
|
|
background-color: transparent;
|
|
border: none;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
button svg {
|
|
flex: 0 0 auto;
|
|
margin-top: 0.15em;
|
|
}
|
|
|
|
.option-text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.ranked-choice-poll-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
|
|
.ranked-choice-poll-option {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
display: none;
|
|
}
|
|
|
|
.discourse-poll-ranked_choice-results {
|
|
.tabs {
|
|
&.nav-items {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
|
|
.nav-btn {
|
|
background-color: var(--secondary);
|
|
border: none;
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.active {
|
|
.nav-btn {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rank {
|
|
display: inline-block;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.poll-results-ranked_choice-subtitle-rounds {
|
|
margin: 0.25em 0 0.67rem;
|
|
}
|
|
}
|
|
|
|
img {
|
|
// Hacky way to stop images without width/height
|
|
// from causing abrupt unintended scrolling
|
|
&:not([width], .emoji),
|
|
&:not([height], .emoji) {
|
|
width: 200px !important;
|
|
height: 200px !important;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.poll-info {
|
|
box-sizing: border-box;
|
|
grid-area: info;
|
|
display: flex;
|
|
line-height: var(--line-height-medium);
|
|
color: var(--primary-medium);
|
|
|
|
@include viewport.until(sm) {
|
|
border-top: 1px solid var(--content-border-color);
|
|
flex-direction: row-reverse;
|
|
|
|
&_counts,
|
|
&_instructions {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
gap: 0 1em;
|
|
padding: var(--space-2);
|
|
border-left: 1px solid var(--content-border-color);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&_counts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 0.25em 0;
|
|
|
|
@include viewport.from(sm) {
|
|
justify-content: center;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&-count {
|
|
gap: 0.25em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
|
|
.info-label,
|
|
.info-number {
|
|
display: inline;
|
|
margin-right: 0.25em;
|
|
text-align: center;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
&:not(:last-child) {
|
|
margin-right: 0.75em;
|
|
}
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.info-label,
|
|
.info-number {
|
|
margin: 0;
|
|
}
|
|
|
|
+ .poll-info_counts-count {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
gap: 0 0.33em;
|
|
margin: 0.5em;
|
|
|
|
.info-number,
|
|
.info-label {
|
|
font-size: var(--font-up-1);
|
|
min-width: 0;
|
|
white-space: normal;
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
+ .poll-info_instructions:not(:empty) {
|
|
margin-top: 1.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&_instructions {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-self: start;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
padding-top: 1.25em;
|
|
|
|
&:not(:empty) {
|
|
border-top: 1px solid var(--content-border-color);
|
|
}
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
padding-right: 1em;
|
|
height: 100%;
|
|
flex: 1 1 auto;
|
|
|
|
&:not(:empty) {
|
|
border-right: 1px solid var(--content-border-color);
|
|
}
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
&:not(:last-child) {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
&:not(:first-child:last-child) {
|
|
// only applied when there are multiple items
|
|
.d-icon {
|
|
width: 15%;
|
|
}
|
|
|
|
span {
|
|
width: 85%;
|
|
}
|
|
}
|
|
|
|
&:first-child:last-child {
|
|
// when there's a single item, it looks better centered
|
|
display: inline;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
font-size: var(--font-down-1);
|
|
margin-top: 0.2em;
|
|
}
|
|
}
|
|
|
|
.info-text {
|
|
margin: 0.25em 0;
|
|
display: block;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
.info-label {
|
|
font-size: var(--font-up-2);
|
|
}
|
|
|
|
.info-number {
|
|
font-size: var(--font-up-6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.poll-container {
|
|
box-sizing: border-box;
|
|
grid-area: poll;
|
|
padding: 1em;
|
|
width: 100%;
|
|
overflow: visible;
|
|
align-self: center;
|
|
|
|
li {
|
|
cursor: pointer;
|
|
font-size: var(--font-up-1);
|
|
}
|
|
|
|
.poll-results-number-rating {
|
|
font-size: var(--font-up-5);
|
|
}
|
|
}
|
|
|
|
.poll-title {
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.poll-buttons {
|
|
box-sizing: border-box;
|
|
grid-area: buttons;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em;
|
|
width: 100%;
|
|
padding: 1em;
|
|
border-top: 1px solid var(--content-border-color);
|
|
|
|
button {
|
|
white-space: nowrap;
|
|
align-self: start;
|
|
|
|
.d-button-label {
|
|
@include ellipsis;
|
|
}
|
|
|
|
@include viewport.until(md) {
|
|
flex: 1 1 0;
|
|
|
|
&:first-child:last-child {
|
|
// if there's only one button,
|
|
// don't expand the width
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
&.toggle-results:first-child {
|
|
// don't expand the back button
|
|
flex: 0 1 auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
&:first-child:last-child,
|
|
&.cast-votes {
|
|
// ok to expand button width on smaller screens
|
|
flex: 1 1 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.poll-voters:not(:empty) {
|
|
min-height: 30px;
|
|
margin-bottom: 0.25em;
|
|
|
|
li {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.poll-voters-toggle-expand {
|
|
margin-top: 0.25em;
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
.spinner {
|
|
margin-top: 0.25em;
|
|
}
|
|
}
|
|
|
|
.poll-buttons-dropdown,
|
|
.export-results,
|
|
.toggle-status,
|
|
.show-breakdown,
|
|
.show-tally,
|
|
.show-percentage {
|
|
// we want these controls to be separated
|
|
// from voting controls
|
|
margin-left: auto;
|
|
}
|
|
|
|
.results {
|
|
> li {
|
|
cursor: default;
|
|
padding: 0.25em 0;
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.option {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.percentage,
|
|
.absolute {
|
|
float: right;
|
|
color: var(--primary-medium);
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.bar-back {
|
|
background: var(--poll-bar-background);
|
|
}
|
|
|
|
.bar {
|
|
height: 0.75em;
|
|
background: var(--poll-bar-color);
|
|
}
|
|
|
|
.chosen .bar {
|
|
background: var(--poll-bar-color--chosen);
|
|
}
|
|
}
|
|
|
|
.pie-chart-legends {
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin-top: 0.5em;
|
|
|
|
.legend {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
margin-left: 1em;
|
|
font-size: var(--font-down-0);
|
|
|
|
.swatch {
|
|
margin-right: 0.5em;
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.poll-grouped-pies-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.poll-results-chart {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
&[data-poll-type="number"] {
|
|
li[data-poll-option-id] {
|
|
display: inline-block;
|
|
width: 3.25em;
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-editor-preview {
|
|
.poll {
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
li[data-poll-option-id]::before {
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
border: 2px solid var(--primary);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: "";
|
|
}
|
|
|
|
&[data-poll-type="multiple"],
|
|
&[data-poll-type="ranked_choice"] {
|
|
[data-poll-option-id] {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&[data-poll-type="multiple"] {
|
|
li[data-poll-option-id]::before {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
&[data-poll-type="ranked_choice"] {
|
|
li[data-poll-option-id] {
|
|
position: relative;
|
|
|
|
&::before {
|
|
mask-image: svg-uri(
|
|
'<svg width="0.75em" height="0.75em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>'
|
|
);
|
|
z-index: 1;
|
|
width: 0.75em;
|
|
margin-right: 0.75em;
|
|
left: 0.2em;
|
|
background: var(--primary-high);
|
|
border-radius: var(--d-button-border-radius);
|
|
border: none;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 1.125em;
|
|
width: 1.125em;
|
|
background: var(--primary-low);
|
|
border-radius: var(--d-button-border-radius);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hides 0 vote count in crawler and print view
|
|
body.crawler {
|
|
.poll {
|
|
.poll-info,
|
|
.poll-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ProseMirror {
|
|
.poll {
|
|
border: 1px solid var(--content-border-color);
|
|
border-radius: var(--d-border-radius);
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
p {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
li::before {
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
border: 2px solid var(--primary);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
width: 12px;
|
|
height: 12px;
|
|
content: "";
|
|
}
|
|
|
|
&[data-poll-type="multiple"],
|
|
&[data-poll-type="ranked_choice"] {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&[data-poll-type="multiple"] {
|
|
li::before {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
&[data-poll-type="ranked_choice"] {
|
|
li {
|
|
position: relative;
|
|
|
|
&::before {
|
|
mask-image: svg-uri(
|
|
'<svg width="0.75em" height="0.75em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>'
|
|
);
|
|
z-index: 1;
|
|
width: 0.75em;
|
|
margin-right: 0.75em;
|
|
left: 0.2em;
|
|
background: var(--primary-high);
|
|
border-radius: var(--d-button-border-radius);
|
|
border: none;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 1.125em;
|
|
width: 1.125em;
|
|
background: var(--primary-low);
|
|
border-radius: var(--d-button-border-radius);
|
|
}
|
|
}
|
|
}
|
|
}
|
