251 lines
5.0 KiB
SCSS
Raw Permalink Normal View History

.dashboard.dashboard-sentiment {
.charts {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
2025-03-13 14:25:38 +01:00
.admin-report {
grid-column: span 12;
}
}
}
@mixin report-container-box() {
border: 1px solid var(--primary-low);
border-radius: var(--d-border-radius);
padding: 1rem;
}
.admin-report.sentiment-analysis .body {
display: flex;
flex-flow: row wrap;
gap: 1rem;
.filters {
2025-03-13 14:25:38 +01:00
@include report-container-box;
order: 1;
width: 100%;
margin-left: 0;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5rem;
.control {
min-width: 200px;
}
.control:nth-of-type(-n + 4) {
flex: 1;
}
// Hides tag selector when showing subcategories selector
.control:nth-of-type(6):nth-last-of-type(3) {
display: none;
}
.control:last-child {
align-self: flex-end;
}
.control:has(.export-csv-btn) {
display: none;
}
}
.main {
flex: 100%;
display: flex;
flex-flow: row wrap;
order: 2;
align-items: flex-start;
max-height: 100vh;
}
}
.admin-report-sentiment-analysis {
2025-03-13 14:25:38 +01:00
@include report-container-box;
flex: 2;
display: flex;
gap: 2rem 1rem;
justify-content: space-evenly;
align-items: center;
flex-flow: row wrap;
padding-inline: 0;
padding-block: 1.5rem;
.admin-report-doughnut {
padding: 0.25rem;
}
&__chart-wrapper {
height: fit-content;
position: relative;
2025-03-17 05:14:53 +01:00
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
border-radius: var(--d-border-radius);
.doughnut-chart-title {
@include ellipsis;
margin: 0 auto;
margin-top: 1rem;
text-align: center;
}
&:hover {
box-shadow: var(--shadow-card);
transform: translateY(-0.5rem);
cursor: pointer;
}
}
&__selected-chart {
border: 1px solid var(--primary-low);
border-radius: var(--d-border-radius);
padding: 1rem;
.doughnut-chart-title {
font-size: var(--font-up-2);
margin: 0 auto;
text-align: center;
margin-top: 0.3rem;
padding-top: 2rem;
}
}
&__selected-chart-actions {
display: flex;
align-items: center;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--primary-low);
.share {
margin-left: auto;
.d-icon-check {
color: var(--success);
}
}
}
}
:root {
--d-sentiment-report-positive-rgb: 46, 204, 112;
--d-sentiment-report-neutral-rgb: 149, 166, 167;
--d-sentiment-report-negative-rgb: 231, 77, 60;
}
.admin-report-sentiment-analysis-details {
2025-03-13 14:25:38 +01:00
@include report-container-box;
flex: 1 1 300px;
min-width: 300px;
margin-left: 1rem;
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
height: 100%;
padding-top: 0;
&__filters {
border-bottom: 1px solid var(--primary-low);
margin-bottom: 1rem;
@include breakpoint("mobile-extra-large") {
.d-button-label {
display: none;
}
}
}
&__scores {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0.25rem;
list-style: none;
margin-left: 0;
background: var(--primary-very-low);
padding: 1rem;
border-radius: var(--d-border-radius);
.d-icon-face-smile {
color: rgb(var(--d-sentiment-report-positive-rgb));
}
.d-icon-face-meh {
color: rgb(var(--d-sentiment-report-neutral-rgb));
}
.d-icon-face-angry {
color: rgb(var(--d-sentiment-report-negative-rgb));
}
}
&__post-score {
border-radius: var(--d-border-radius);
background: var(--primary-very-low);
margin-top: 0.5rem;
padding: 0.25rem;
font-size: var(--font-down-1);
display: inline-block;
2025-03-13 14:25:38 +01:00
&[data-sentiment-score="positive"] {
color: rgb(var(--d-sentiment-report-positive-rgb));
background: rgba(var(--d-sentiment-report-positive-rgb), 0.1);
}
&[data-sentiment-score="neutral"] {
color: rgb(var(--d-sentiment-report-neutral-rgb));
background: rgba(var(--d-sentiment-report-neutral-rgb), 0.1);
}
&[data-sentiment-score="negative"] {
color: rgb(var(--d-sentiment-report-negative-rgb));
background: rgba(var(--d-sentiment-report-negative-rgb), 0.1);
}
}
&__post-list {
margin-top: 1rem;
2025-03-13 14:25:38 +01:00
.avatar-wrapper,
.avatar-link {
width: calc(48px * 0.75);
height: calc(48px * 0.75);
}
img.avatar {
width: 100%;
height: 100%;
}
}
}
.admin-reports.admin-contents .sentiment-analysis {
.horizontal-overflow-nav {
background: var(--secondary);
position: sticky;
top: 0;
padding-top: 1rem;
z-index: z("timeline");
}
}
.showing-sentiment-analysis-chart
.admin-report.sentiment-analysis
.body
.filters {
// Hide elements 2 - 6 when showing selected chart
// as they're not supported being changed in this view
.control:first-of-type {
flex: unset;
}
2025-03-13 14:25:38 +01:00
.control:nth-of-type(n + 2):nth-of-type(-n + 6) {
display: none;
}
}