mirror of
https://github.com/discourse/discourse.git
synced 2025-03-10 20:05:25 +08:00
e3b6be15b8
The "migration to Glimmer" has been broken out here from #27155 to make the review process less onerous and reduce change risk: * DEV: migrates most of the widget code to Glimmer in prep for IRV additions * NB This already incorporates significant amounts of review and feedback from the prior PR. * NB because there was significant additional feedback relating to older Poll code that I've improved with feedback, there are some additional changes here that are general improvements to the plugin and not specific to IRV nor Glimmer! * There should be no trace of IRV code here. Once this is finalised and merged we can continue to progress with #27155.
473 lines
10 KiB
SCSS
473 lines
10 KiB
SCSS
div.poll-outer {
|
|
div.poll {
|
|
margin: 1em 0;
|
|
border: 1px solid var(--primary-low);
|
|
display: grid;
|
|
grid-template-areas: "poll" "info" "buttons";
|
|
@include breakpoint("mobile-extra-large", min-width) {
|
|
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: var(--secondary);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
img {
|
|
// Hacky way to stop images without width/height
|
|
// from causing abrupt unintended scrolling
|
|
&:not([width]):not(.emoji),
|
|
&:not([height]):not(.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 breakpoint("mobile-extra-large") {
|
|
border-top: 1px solid var(--primary-low);
|
|
flex-direction: row-reverse;
|
|
&_counts,
|
|
&_instructions {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint("mobile-extra-large", min-width) {
|
|
gap: 0 1em;
|
|
padding: 1em;
|
|
border-left: 1px solid var(--primary-low);
|
|
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 breakpoint("mobile-extra-large", min-width) {
|
|
justify-content: center;
|
|
}
|
|
|
|
@include breakpoint("mobile-extra-large") {
|
|
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 breakpoint("mobile-extra-large") {
|
|
&:not(:last-child) {
|
|
margin-right: 0.75em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint("mobile-extra-large", min-width) {
|
|
&: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 breakpoint("mobile-extra-large", min-width) {
|
|
+ .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 breakpoint("mobile-extra-large", min-width) {
|
|
padding-top: 1.25em;
|
|
&:not(:empty) {
|
|
border-top: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
@include breakpoint("mobile-extra-large") {
|
|
padding-right: 1em;
|
|
height: 100%;
|
|
flex: 1 1 auto;
|
|
&:not(:empty) {
|
|
border-right: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
@include breakpoint("mobile-extra-large", min-width) {
|
|
&: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 breakpoint("mobile-extra-large", min-width) {
|
|
.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(--primary-low);
|
|
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(--primary-low);
|
|
|
|
button {
|
|
white-space: nowrap;
|
|
align-self: start;
|
|
.d-button-label {
|
|
@include ellipsis;
|
|
}
|
|
|
|
@include breakpoint("tablet") {
|
|
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 breakpoint("mobile-large") {
|
|
&: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 {
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
.spinner {
|
|
margin-top: 0.25em;
|
|
}
|
|
}
|
|
|
|
// .poll-buttons-dropdown {
|
|
// align-self: stretch;
|
|
// position: relative;
|
|
|
|
// .label {
|
|
// display: none;
|
|
// }
|
|
// .widget-dropdown {
|
|
// &.closed {
|
|
// :not(:first-child) {
|
|
// display: none;
|
|
// }
|
|
// }
|
|
// &.opened {
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// position: relative;
|
|
|
|
// overflow-y: visible;
|
|
// .widget-dropdown-body {
|
|
// display: block;
|
|
// position: absolute;
|
|
// z-index: 300;
|
|
// overflow-y: visible;
|
|
// transform: translate(-44px, 38px);
|
|
// .widget-dropdown-item {
|
|
// width: 100%;
|
|
// padding: 0;
|
|
// margin: 0;
|
|
// float: left;
|
|
// &:hover {
|
|
// color: var(--tertiary);
|
|
// background-color: var(--primary-low);
|
|
// }
|
|
// button {
|
|
// width: 100%;
|
|
// padding: 0.5em;
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// background-color: var(--secondary);
|
|
// &:hover {
|
|
// background-color: var(--primary-low);
|
|
// }
|
|
// border: none;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// &-header {
|
|
// height: 100%;
|
|
// .d-icon {
|
|
// margin: 0;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.poll-buttons-dropdown,
|
|
.export-results,
|
|
.toggle-status,
|
|
.show-breakdown {
|
|
// 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 {
|
|
float: right;
|
|
color: var(--primary-medium);
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.bar-back {
|
|
background: var(--primary-low);
|
|
}
|
|
|
|
.bar {
|
|
height: 0.75em;
|
|
background: var(--primary-medium);
|
|
}
|
|
|
|
.chosen .bar {
|
|
background: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
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"] {
|
|
li[data-poll-option-id]:before {
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hides 0 vote count in crawler and print view
|
|
body.crawler {
|
|
.poll {
|
|
.poll-info,
|
|
.poll-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|