Merge pull request #17214 from edx/alasdair/LEARNER-3429-learner-analytics-dashboard-styles

LEARNER-3429 Learner Analytics Dashboard Style updates
This commit is contained in:
AlasdairSwan
2018-01-18 12:01:24 -05:00
committed by GitHub
3 changed files with 43 additions and 30 deletions

View File

@@ -8,8 +8,9 @@ class Discussions extends React.Component {
}
getComparisons() {
const experiments = window.experimentVariables || {};
const {content_authored, profileImages} = this.props;
const content_average = 7;
const content_average = experiments.learnerAnalyticsDiscussionAverage || 4;
let average_percent = 1;
let authored_percent = 0;

View File

@@ -3,6 +3,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import CircleChart from './CircleChart';
import CircleChartLegend from './CircleChartLegend';
import GradeTable from './GradeTable';
@@ -104,7 +105,11 @@ export function LearnerAnalyticsDashboard(props) {
<Discussions {...discussion_info} profileImages={profile_images} />
</div>
</div>
<div className="analytics-group sidebar">
<div className={classNames(
'analytics-group',
'sidebar',
{'week-streak': week_streak > 0}
)}>
<h2 className="group-heading">Timing</h2>
<h3 className="section-heading">Course due dates</h3>
<DueDates dates={schedule} assignmentCounts={assignmentCounts} />

View File

@@ -19,30 +19,34 @@ $trophy-gold: #f39c12;
.sidebar {
position: relative;
&::before {
content: '';
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
background: {
image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
repeat: no-repeat;
position: center;
&.week-streak {
&::before {
content: '';
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
background: {
image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
position: center;
repeat: no-repeat;
size: cover;
}
}
}
&::after {
content: '';
width: 151px;
height: 192px;
position: absolute;
bottom: 0;
right: 0;
background: {
image: url('#{$static-path}/images/learner_analytics_dashboard/streak-trophy.png');
repeat: no-repeat;
position: bottom right;
&::after {
content: '';
width: 151px;
height: 192px;
position: absolute;
bottom: 0;
right: 0;
background: {
image: url('#{$static-path}/images/learner_analytics_dashboard/streak-trophy.png');
repeat: no-repeat;
position: bottom right;
}
}
}
}
@@ -339,8 +343,10 @@ $trophy-gold: #f39c12;
@include media-breakpoint-up(md) {
.sidebar {
&::before {
background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-1140x768.jpg');
&.week-streak {
&::before {
background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-1140x768.jpg');
}
}
}
@@ -374,8 +380,10 @@ $trophy-gold: #f39c12;
@include media-breakpoint-up(xl) {
.sidebar {
&::before {
background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
&.week-streak {
&::before {
background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
}
}
}
@@ -396,4 +404,3 @@ $trophy-gold: #f39c12;
}
}
}