167 lines
3.4 KiB
SCSS
Raw Normal View History

.dashboard.dashboard-sentiment {
.charts {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
.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 {
@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;
}
.control:nth-of-type(n + 6) {
flex-basis: 49%;
align-self: flex-end;
}
// Hides tag selector when showing subcategories selector
.control:nth-of-type(6):nth-last-of-type(3) {
display: none;
}
}
.main {
flex: 100%;
display: flex;
order: 2;
gap: 1rem;
align-items: flex-start;
max-height: 100vh;
}
}
.admin-report-sentiment-analysis {
@include report-container-box();
flex: 2;
display: flex;
flex-flow: row wrap;
gap: 3rem;
.admin-report-doughnut {
max-width: 300px;
max-height: 300px;
padding: 0.25rem;
}
&__chart-wrapper {
transition: transform 0.25s ease, box-shadow 0.25s ease;
border-radius: var(--d-border-radius);
&:hover {
transform: translateY(-1rem);
box-shadow: var(--shadow-card);
cursor: pointer;
}
}
}
: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 {
@include report-container-box();
flex: 1;
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
height: 100%;
&__title {
font-size: var(--font-up-2);
}
&__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;
&[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 {
.avatar-wrapper,
.avatar-link {
width: calc(48px * 0.75);
height: calc(48px * 0.75);
}
img.avatar {
width: 100%;
height: 100%;
}
}
}