mirror of
https://github.com/discourse/discourse.git
synced 2024-11-30 09:14:36 +08:00
cd4f251891
The poll breakdown modal replaces the grouped pie charts feature.
Includes:
* MODAL: Untangle `onSelectPanel`
Previously modal-tab component would call on click the onSelectPanel callback with itself (modal-tab) as `this` which severely limited its usefulness. Now showModal binds the callback to its controller.
"The PR includes a fix/change to d-modal (b7f6ec6) that hasn't been extracted to a separate PR because it's not currently possible to test a change like this in abstract, i.e. with dynamically created controllers/components in tests. The percentage/count toggle test for the poll breakdown feature is essentially a test for that d-modal modification."
117 lines
1.9 KiB
SCSS
117 lines
1.9 KiB
SCSS
.poll-breakdown-modal {
|
|
.modal-inner-container {
|
|
max-width: unset;
|
|
width: 90vw;
|
|
}
|
|
|
|
.modal-tabs {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.modal-body {
|
|
display: grid;
|
|
height: 80vh;
|
|
grid: auto-flow / 1fr 2fr;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.poll-breakdown-sidebar {
|
|
background: var(--primary-very-low);
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.poll-breakdown-title {
|
|
font-weight: 600;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.poll-breakdown-total-votes {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
margin-top: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.poll-breakdown-options {
|
|
display: grid;
|
|
list-style: none;
|
|
margin: 1.5rem 0 0 0;
|
|
}
|
|
|
|
.poll-breakdown-option {
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
column-gap: 0.66rem;
|
|
cursor: default;
|
|
display: grid;
|
|
grid-template-columns: 2.5rem 1fr;
|
|
row-gap: 0.1rem;
|
|
justify-content: start;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.poll-breakdown-option-color {
|
|
align-self: end;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
grid-column: 1;
|
|
height: 0.6rem;
|
|
justify-self: center;
|
|
width: 1.2rem;
|
|
}
|
|
|
|
.poll-breakdown-option-count {
|
|
align-self: start;
|
|
font-size: 0.9rem;
|
|
grid-column: 1;
|
|
justify-self: center;
|
|
}
|
|
|
|
.poll-breakdown-option-text {
|
|
grid-column: 2;
|
|
grid-row: 1/3;
|
|
}
|
|
|
|
.poll-breakdown-body {
|
|
box-sizing: border-box;
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
.poll-breakdown-body-header {
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.poll-breakdown-body-header-label {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.poll-breakdown-dropdown {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.poll-breakdown-charts {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(33.3%, 0.33fr));
|
|
}
|
|
|
|
.poll-breakdown-chart-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
margin-top: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.poll-breakdown-chart-label {
|
|
display: block;
|
|
text-align: center;
|
|
}
|