lib/scss/components/reports/_dashboard.scss
/* generic classes */
.blue {
color: $color-brand;
}
.light-blue-bg {
background-color: $color-brand-lighter;
}
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
justify-content: space-between !important;
}
.filter-label {
font-weight: bold;
margin: 0 0.563px 1rem 0;
color: $color-navigation-header-text;
text-transform: lowercase;
font-size: 1rem;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.warning-card {
margin-top: 1rem;
margin-bottom: 2rem;
&__container {
max-width: 359px;
height: 162px;
background: #ff5682;
border-radius: 10px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
&__content {
padding: 10px 10px 5px;
}
&__title {
font-weight: 700;
color: $color-white;
}
&__text {
color: $color-white;
}
&__button {
text-align: center;
white-space: nowrap;
margin-top: 10px;
a {
color: $color-theme-report-blue;
background-color: $color-white;
border: transparent;
border-radius: 5px;
text-transform: none;
font-size: 14px;
font-weight: 700;
padding: 0.4rem;
}
}
}
.word-cloud-card {
box-sizing: border-box;
border: 1px solid $color-theme-report-gray;
width: 100%;
height: 388px;
border-radius: 5px;
margin-bottom: 42px;
position: relative;
p {
position: absolute;
left: 1rem;
top: 1rem;
font-size: 18px;
line-height: 21px;
}
}
.report-container .conversation-balloon,
.report-container .conversation-dashboard.participants,
.report-container .conversation-dashboard.scatter,
.report-container .conversation-dashboard .charts,
.report-container .conversation-dashboard .word-cloud-card,
.report-container .clusters-section,
.report-container .conversation-dashboard .comments-container,
.report-container .conversation-dashboard .voting-container,
.report-container .conversation-dashboard .words-container,
.report-container .warning-card {
max-width: 61vw;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.report-container .conversation-dashboard.participants,
.report-container .conversation-dashboard.scatter,
.report-container .conversation-dashboard .charts,
.report-container .conversation-dashboard .word-cloud-card,
.report-container .clusters-section,
.report-container .conversation-dashboard .comments-container,
.report-container .conversation-dashboard .voting-container,
.report-container .conversation-dashboard .words-container,
.report-container .warning-card {
padding-left: 1.5rem !important;
}
.time-chart {
min-width: 380px;
width: 36vw;
svg {
margin: 1rem auto auto auto;
width: 95%;
}
&__date-picker {
display: flex;
.date-selector {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
flex-grow: 2;
}
#start-date,
#end-date {
min-width: 128px;
width: 128px;
font-size: 0.875rem;
margin: 0 4px 0 0;
border-color: $color-black;
color: $color-black-alternative;
border-radius: 0.313rem;
font-weight: bold;
height: 26px;
}
}
&__container {
position: relative;
top: 16px;
}
&--invalid-dates {
color: $color-theme-report-red;
display: none;
}
&--loading {
text-align: center;
display: none;
}
}
.votes-by-channel-chart {
min-width: 200px;
width: 23vw;
.filter-participation {
margin-top: 1rem;
align-items: baseline;
.filter-button,
.selected-button {
font-weight: bold;
font-size: 1.125rem;
}
.filter-label {
width: 100%;
}
.filter-button {
border: 1px solid $color-black;
border-radius: 5px;
color: $color-black;
background-color: $color-white;
line-height: 16px;
text-transform: capitalize;
padding: 0 0.5rem;
margin-right: 9px;
text-transform: lowercase;
}
.selected-button {
background-color: $color-black;
color: $color-white;
}
.filter-button:focus {
box-shadow: unset;
}
.filter-button:active {
box-shadow: unset;
}
}
}
.conversation-dashboard {
&__button {
a {
border-radius: 0.313rem;
text-transform: capitalize;
font-size: 1rem;
padding: 0.2rem 0.75rem;
height: 42px;
}
}
hr {
background-color: $color-black;
}
.title {
align-items: baseline;
margin: 0 0 40px 0;
h2 {
margin: unset;
}
span {
font-family: "Raleway";
}
}
.scatter,
.clusters-section,
.comments-container {
font-size: 1.5rem;
padding: 68px 0px 45px 0px;
span:nth-child(2) {
font-family: "Raleway";
}
}
.charts {
display: flex;
justify-content: space-between;
.voting-container {
padding: 1rem;
}
}
.chart {
box-sizing: border-box;
border: 1px solid $color-theme-report-gray;
border-radius: 5px;
height: 406px;
position: relative;
&__title {
font-size: 1.25rem;
line-height: 21px;
margin: unset;
display: flex;
text-transform: lowercase;
}
}
.charts,
.participants {
margin: 0px 0px 23px 0px;
}
.participants-card {
border: 1px solid $color-theme-report-gray;
border-radius: 0.5rem;
width: 100%;
padding: 0 22px 0 19px;
min-height: 75px;
&-container {
justify-content: space-between;
&-label {
margin: 0 37px 0 0;
padding: 22px 0 0 0;
font-size: 1.25rem;
}
&-count {
font-size: 2.25rem;
padding: 8px 0 0 0;
color: $color-black;
}
&-report-link {
padding: 16px 0 0 0;
}
}
}
.voting,
.comments {
justify-content: flex-start;
width: 100%;
margin: 0px 0 50px 0;
&-item {
display: block;
width: 100%;
max-width: 160px;
&-title,
&-value {
font-weight: bold;
}
&-title {
font-size: 1.25rem;
color: $color-brand;
}
&-value {
font-size: 2.25rem;
color: $color-black;
}
}
}
.comments {
height: 375px;
section {
display: flex;
width: 100%;
max-width: 837px;
}
}
.voting {
&-container {
section {
width: 100%;
max-width: 717px;
}
}
}
.cluster,
.comments {
display: flex;
flex-wrap: wrap;
h2,
&-col.title {
margin: 0;
}
&-col.title {
flex-grow: 1;
h2 {
width: 106px;
}
}
}
.clusters-section {
width: 100%;
display: flex;
&__title {
div {
max-width: 106px;
span {
text-align: left;
font-family: "Patua One", "sans-serif";
font-size: 1.5rem;
}
}
}
&__clusters {
width: calc(55vw - (106px + 280px));
text-align: center;
}
&__detail {
h2,
p {
color: $color-black;
}
p,
button {
font-family: "Raleway";
}
button {
border-radius: 0.5rem;
background-color: $color-black;
color: $color-white;
height: 42px;
text-transform: capitalize;
font-size: 1rem;
}
&--empty {
max-width: 60%;
}
&--filled {
h2 {
font-size: 1.5rem;
}
max-width: 280px;
}
&--null {
font-size: 2.25rem;
}
}
&__comment-percentage {
font-size: 2.25rem;
}
&__main-comment {
font-size: 1.25rem;
}
}
.scatter {
&-col {
flex-grow: 1;
}
&-col.scatters {
max-width: 600px;
}
#scatter-container {
max-width: 600px;
min-width: 280px;
width: 100%;
height: 400px;
}
&-col.title {
max-width: 300px;
display: flex;
flex-wrap: wrap;
text-align: left;
h2 {
width: 100%;
}
p {
color: $color-black;
font-family: "Raleway";
font-size: 1.25rem;
}
button {
border-radius: 0.5rem;
background-color: $color-black;
color: $color-white;
height: 42px;
text-transform: capitalize;
font-size: 1rem;
}
}
&-filters {
.inactive-filter {
border-color: $color-black !important;
background-color: $color-white !important;
color: $color-black !important;
}
}
&-without-groups {
background-color: $color-theme-grey;
width: 215px;
border-radius: 0.5rem;
padding: 6px 9px 6px 16px;
span {
font-weight: 600;
color: $color-white;
font-size: 1.25rem;
font-family: "Raleway";
}
}
}
#scatter-categories {
display: flex;
max-width: 230px;
flex-wrap: wrap;
margin: 1rem 0 0 0;
button {
height: unset;
font-size: 1.25rem;
padding: 0;
margin: 0 0.5rem 0.5rem 0;
border-color: $color-black;
padding: 0 0.5rem;
text-transform: lowercase;
}
}
}
.padding-top-0 {
padding-top: 30px !important;
}
@media (max-width: 375px) {
.time-chart,
.votes-by-channel-chart {
width: 100vw !important;
min-width: unset !important;
}
#channel-chart {
width: 265px !important;
}
}
@media (max-width: 559px) {
.conversation-dashboard__button {
a {
float: right;
}
}
.export-button {
display: none !important;
}
.voting-item,
.comments-item {
max-width: 115px !important;
}
.scatter-col.title.flex {
max-width: 100%;
}
.scatter-col.title.flex h2 {
margin: 0 0 28px 0;
}
.report-container .conversation-dashboard.voting,
.report-container .conversation-dashboard.scatter,
.report-container .conversation-dashboard.title,
.report-container .conversation-dashboard .word-cloud-card,
.report-container .clusters-section,
.report-container .comments-container,
.report-container .voting-container,
.report-container .participants-card-container,
.cluster-col.detail.detail-empty,
.report-container .conversation-dashboard .words-container {
width: 90% !important;
max-width: unset !important;
}
.report-container .conversation-balloon,
.report-container .conversation-dashboard .charts,
.report-container .conversation-dashboard.participants,
.report-container .warning-card {
width: 100% !important;
max-width: unset !important;
}
.conversation-dashboard.voting {
margin-bottom: 50px !important;
}
.time-chart,
.votes-by-channel-chart,
.conversation-dashboard .participants-card,
.word-cloud-card {
border: unset !important;
border-radius: unset !important;
}
.conversation-dashboard .charts .chart__title {
color: $color-brand;
margin: unset;
}
.clusters-section__title {
span {
width: 100% !important;
text-align: left;
font-family: "Patua One", "sans-serif";
font-size: 1.5rem;
}
}
.clusters-section__detail--filled {
margin: 36px 0 0 0;
hr {
display: none !important;
}
}
.participants-card {
padding: unset !important;
height: unset !important;
&-container-label {
padding: 27px 0 0px 0 !important;
}
}
.comments-container .conversation-dashboard.title {
margin: 0 0 24px 0 !important;
}
.time-chart,
.participants-card {
background-color: $color-theme-report-light-gray;
}
.votes-by-channel-chart {
margin: 25px 0 0 0;
.filter-participation {
display: flex;
.filter-button {
color: $color-navigation-header-text;
border-color: $color-navigation-header-text;
}
.selected-button {
background-color: $color-navigation-header-text;
color: $color-white;
}
}
}
hr {
display: block !important;
max-width: 298px;
margin: auto !important;
}
.report-container .conversation-dashboard.participants {
width: 100% !important;
}
.report-container .conversation-dashboard .participants-card-container {
margin: auto;
padding: unset !important;
}
#scatter-categories {
max-width: unset !important;
width: 100% !important;
button {
font-size: 0.8rem !important;
}
}
.report-container .warning-card {
width: 90% !important;
#persona-button {
margin-top: 1rem;
}
}
.vote-date-picker {
#start-date {
margin-bottom: 0.3rem !important;
}
}
.report-container .conversation-dashboard.participants,
.report-container .conversation-dashboard.scatter,
.report-container .conversation-dashboard .charts,
.report-container .conversation-dashboard .word-cloud-card,
.report-container .clusters-section,
.report-container .conversation-dashboard .comments-container,
.report-container .conversation-dashboard .voting-container,
.report-container .conversation-dashboard .words-container,
.report-container .warning-card {
padding-left: unset !important;
}
}
@media (max-width: 1366px) {
.votes-by-channel-chart {
.filter-participation {
.filter-button,
.selected-button {
font-size: 1rem;
}
}
}
.conversation-dashboard .scatter-col.scatters {
max-width: 400px;
}
.votes-by-channel-chart {
width: 22vw !important;
}
}
@media (max-width: 1200px) {
.time-chart,
.votes-by-channel-chart {
width: 100% !important;
}
.time-chart {
margin: 0 0 1rem 0;
}
}
@media (max-width: 559px) {
.conversation-dashboard .clusters-section__clusters {
margin: .1rem 0 .1rem 0;
width: 350px !important;
}
.conversation-dashboard .clusters-section__detail--filled {
max-width: 500px;
margin: auto;
}
.conversation-dashboard .clusters-section__detail--filled h2 {
max-width: 90vw;
margin: auto;
font-size: 1.25rem;
}
.conversation-dashboard .clusters-section__comment-percentage {
font-size: 1.5rem;
}
.conversation-dashboard .clusters-section__main-comment {
font-size: 0.875rem;
}
}