2023-11-08 10:50:37 -03:00
|
|
|
.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
|
|
|
|
2024-11-19 10:01:10 -03:00
|
|
|
.admin-report {
|
|
|
|
grid-column: span 12;
|
|
|
|
}
|
2023-11-08 10:50:37 -03:00
|
|
|
}
|
|
|
|
}
|
2025-02-20 09:14:10 -08:00
|
|
|
|
|
|
|
@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;
|
2025-02-20 09:14:10 -08:00
|
|
|
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;
|
|
|
|
}
|
2025-03-05 13:53:56 -08:00
|
|
|
|
2025-03-10 09:25:55 -07:00
|
|
|
.control:last-child {
|
|
|
|
align-self: flex-end;
|
|
|
|
}
|
|
|
|
|
2025-03-05 13:53:56 -08:00
|
|
|
.control:has(.export-csv-btn) {
|
|
|
|
display: none;
|
|
|
|
}
|
2025-02-20 09:14:10 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
.main {
|
|
|
|
flex: 100%;
|
|
|
|
display: flex;
|
2025-02-23 21:21:10 -08:00
|
|
|
flex-flow: row wrap;
|
2025-02-20 09:14:10 -08:00
|
|
|
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;
|
2025-02-20 09:14:10 -08:00
|
|
|
flex: 2;
|
|
|
|
display: flex;
|
2025-03-10 09:25:55 -07:00
|
|
|
gap: 2rem 1rem;
|
|
|
|
justify-content: space-evenly;
|
2025-03-05 13:53:56 -08:00
|
|
|
align-items: center;
|
2025-02-20 09:14:10 -08:00
|
|
|
flex-flow: row wrap;
|
2025-03-10 09:25:55 -07:00
|
|
|
padding-inline: 0;
|
|
|
|
padding-block: 1.5rem;
|
2025-02-20 09:14:10 -08:00
|
|
|
|
|
|
|
.admin-report-doughnut {
|
|
|
|
padding: 0.25rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__chart-wrapper {
|
2025-03-05 13:53:56 -08:00
|
|
|
height: fit-content;
|
|
|
|
position: relative;
|
2025-03-17 05:14:53 +01:00
|
|
|
transition:
|
|
|
|
transform 0.25s ease,
|
|
|
|
box-shadow 0.25s ease;
|
2025-03-05 13:53:56 -08:00
|
|
|
border-radius: var(--d-border-radius);
|
|
|
|
|
2025-02-25 07:47:30 -08:00
|
|
|
.doughnut-chart-title {
|
|
|
|
@include ellipsis;
|
|
|
|
margin: 0 auto;
|
2025-03-05 13:53:56 -08:00
|
|
|
margin-top: 1rem;
|
2025-02-25 07:47:30 -08:00
|
|
|
text-align: center;
|
|
|
|
}
|
2025-02-20 09:14:10 -08:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
box-shadow: var(--shadow-card);
|
2025-03-10 09:25:55 -07:00
|
|
|
transform: translateY(-0.5rem);
|
2025-02-20 09:14:10 -08:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
2025-02-23 21:21:10 -08:00
|
|
|
|
|
|
|
&__selected-chart {
|
|
|
|
border: 1px solid var(--primary-low);
|
|
|
|
border-radius: var(--d-border-radius);
|
|
|
|
padding: 1rem;
|
2025-02-25 07:47:30 -08:00
|
|
|
|
|
|
|
.doughnut-chart-title {
|
|
|
|
font-size: var(--font-up-2);
|
|
|
|
margin: 0 auto;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: 0.3rem;
|
|
|
|
padding-top: 2rem;
|
2025-03-05 13:53:56 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__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);
|
|
|
|
}
|
2025-02-25 07:47:30 -08:00
|
|
|
}
|
2025-02-23 21:21:10 -08:00
|
|
|
}
|
2025-02-20 09:14:10 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
: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;
|
2025-02-23 21:21:10 -08:00
|
|
|
flex: 1 1 300px;
|
|
|
|
min-width: 300px;
|
2025-03-05 13:53:56 -08:00
|
|
|
margin-left: 1rem;
|
2025-02-20 09:14:10 -08:00
|
|
|
display: flex;
|
|
|
|
flex-flow: column nowrap;
|
|
|
|
overflow-y: auto;
|
|
|
|
height: 100%;
|
2025-03-05 13:53:56 -08:00
|
|
|
padding-top: 0;
|
2025-02-20 09:14:10 -08:00
|
|
|
|
2025-02-23 21:21:10 -08:00
|
|
|
&__filters {
|
|
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
|
|
|
@include breakpoint("mobile-extra-large") {
|
|
|
|
.d-button-label {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2025-02-20 09:14:10 -08:00
|
|
|
&__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
|
|
|
|
2025-02-20 09:14:10 -08: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 {
|
2025-02-23 21:21:10 -08:00
|
|
|
margin-top: 1rem;
|
2025-03-13 14:25:38 +01:00
|
|
|
|
2025-02-20 09:14:10 -08:00
|
|
|
.avatar-wrapper,
|
|
|
|
.avatar-link {
|
|
|
|
width: calc(48px * 0.75);
|
|
|
|
height: calc(48px * 0.75);
|
|
|
|
}
|
|
|
|
|
|
|
|
img.avatar {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2025-03-05 13:53:56 -08:00
|
|
|
|
|
|
|
.admin-reports.admin-contents .sentiment-analysis {
|
|
|
|
.horizontal-overflow-nav {
|
|
|
|
background: var(--secondary);
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
padding-top: 1rem;
|
2025-03-10 09:25:55 -07:00
|
|
|
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
|
|
|
|
2025-03-10 09:25:55 -07:00
|
|
|
.control:nth-of-type(n + 2):nth-of-type(-n + 6) {
|
|
|
|
display: none;
|
2025-03-05 13:53:56 -08:00
|
|
|
}
|
|
|
|
}
|