Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ECOM-7386 Added a program progress circle to program details page

Browse Source
This commit is contained in:
AlasdairSwan
2017-03-27 15:24:24 -04:00
parent 64372dd53e
commit a466b437f6
20 changed files with 762 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lms/static/sass/_build-learner-dashboard.scss
View File

@@ -6,5 +6,6 @@
@import 'elements/course-card';
@import 'elements/program-card';
@import 'elements-v2/icons';
@import 'elements/progress-circle';
@import 'views/program-details';
@import 'views/program-list';

66
lms/static/sass/elements/_progress-circle.scss Normal file
View File

@@ -0,0 +1,66 @@
$progress-title-color: $blue-d1 !default;
$progress-complete-color: $blue-u1 !default;
$progress-incomplete-color: $gray-l3 !default;
$progress-complete-number-color: $blue-d1 !default;
$progress-incomplete-number-color: $gray !default;
$progress-number-label-color: palette(grayscale, base) !default;
.program-progress {
width: 300px;
margin: 0 auto 30px;
@media(min-width: $bp-screen-md) {
margin-left: 0;
}
}
.progress-heading {
color: $progress-title-color;
text-align: center;
margin-bottom: 0;
font: {
size: 1.1em;
weight: 700;
}
}
.progress-circle-wrapper {
position: relative;
margin-top: -20px;
width: 300px;
height: 300px;
.progress-label {
position: absolute;
width: 100%;
top: 92px;
text-align: center;
}
.numbers {
font-size: 3em;
color: $progress-incomplete-number-color;
.complete {
color: $progress-complete-number-color;
}
}
.label {
font: {
size: 1.1em;
weight: 600;
}
color: $progress-number-label-color;
}
}
.progress-circle {
.complete {
stroke: $progress-complete-color;
}
.incomplete {
stroke: $progress-incomplete-color;
}
}

236
lms/static/sass/views/_program-details.scss
View File

@@ -47,8 +47,8 @@
}
.crumb {
@include float(left);
position: relative;
float: left;
font-size: font-size(x-small);
line-height: line-height(x-small);
color: palette(grayscale, dark);
@@ -78,14 +78,18 @@
}
// CSS for April 2017 version of Program Details Page
.program-details {
.window-wrap {
background-color: $white;
}
}
.program-details-wrapper {
.wrapper-footer {
@include clearfix();
clear: both;
}
}
.program-details-wrapper {
.program-details-header {
background-color: $light-gray4;
display: flex;
@@ -93,14 +97,20 @@
font-family: 'Open Sans';
font-weight: normal;
flex-wrap: wrap;
padding-top: 40px;
padding-bottom: 35px;
margin-left: 10px;
margin-right: 10px;
padding: 40px 10px 35px;
@media(min-width: $bp-screen-md) {
margin-left: 30px;
margin-right: 80px;
padding: {
left: 30px;
right: 30px;
}
}
@media(min-width: $lms-max-width) {
padding: {
left: calc(((100% - 1180px) / 2) + 30px);
right: calc(((100% - 1180px) / 2) + 30px);
}
}
.hd-1 {
@@ -111,7 +121,7 @@
}
.program-details-icon {
margin-left: 3px;
@include margin-left(3px);
margin-top: 10px;
height: auto;
@@ -177,7 +187,7 @@
margin-top: auto;
margin-bottom: auto;
@media(min-width: $bp-screen-md) {
margin: 10px 0 0 0;
@include margin-right(10px 0 0 0);
}
}
@@ -187,8 +197,8 @@
width: 30%;
.orgs .org-logo {
@include margin-left(2.5%);
width: 46.5%;
margin-left: 2.5%;
height: auto;
}
}
@@ -197,26 +207,49 @@
width: 25%;
}
}
}
.program-details-content {
width: 100%;
margin-bottom: 30px;
padding: 30px 10px;
@media(min-width: $bp-screen-md) {
margin-left: 30px;
@include float(left);
padding: {
left: 30px;
right: 30px;
}
width: calc( 100% - 330px );
position: relative;
}
@media(min-width: $bp-screen-lg) {
width: calc( 100% - 510px );
max-width: 700px;
}
@media(min-width: $lms-max-width) {
@include margin-left(calc((100% - 1180px) / 2));
}
margin-left: 10px;
}
.course-list-heading {
font-family: "Open Sans";
font-weight: bold;
text-transform: uppercase;
color: palette(primary, dark);
font-size: 0.9375em;
line-height: normal;
margin-top: 10px;
margin-bottom: 0;
padding-bottom: 5px;
border-bottom: 3px solid $divider-color;
margin: {
top: 10px;
bottom: 20px;
}
.status {
margin-right: 7px;
@include margin-right(7px);
}
}
@@ -225,27 +258,9 @@
}
.course-list-headings {
width: 700px;
.divider {
margin-left: 0;
margin-bottom: 20px;
background-color: $divider-color;
margin-top: 5px;
height: 3px;
width: 315px;
@media(min-width: $bp-screen-sm) {
width: 550px;
}
@media(min-width: $bp-screen-md) {
width: 700px;
}
border: none;
}
.motivating-section {
@include margin-left(15px);
font-size: 0.9375em;
margin-left: 15px;
width: 310px;
@media(min-width: $bp-screen-sm) {
width: auto;
@@ -264,11 +279,7 @@
}
.program-heading {
@media(min-width: $bp-screen-md) {
width: 70%;
}
width: 90%;
margin-top: 40px;
width: 100%;
margin-bottom: 40px;
.program-heading-title {
@@ -313,17 +324,17 @@
/* IE11 CSS styles */
@media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
float: right;
@include float(right);
}
}
}
.select-choice {
@include margin-right(2px);
font-family: "Open Sans";
font-weight: bold;
font-size: 0.9375em;
color: palette(grayscale, base);
margin-top: 6px;
margin-right: 2px;
display: block;
@media(min-width: $bp-screen-md) {
@@ -339,21 +350,19 @@
}
}
.run-select {
@include margin-right(10px);
width: 95%;
@media(min-width: $bp-screen-sm) {
width: 300px;
}
height: 34px;
padding: 0;
margin-right: 10px;
}
}
.program-course-card {
@media(min-width: $bp-screen-md) {
width: 100%;
}
width: 100%;
padding: 15px;
margin-bottom: 10px;
@media(min-width: $bp-screen-md) {
@@ -363,12 +372,6 @@
.section {
display: flex;
justify-content: space-between;
margin-right: 40px;
margin-left: 15px;
@media(min-width: $bp-screen-sm) {
margin-left: 20px;
}
@media(min-width: $bp-screen-md) {
flex-wrap: wrap;
@@ -400,9 +403,12 @@
.course-meta-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
@media(min-width: $bp-screen-md) {
width: 100%;
flex-direction: row;
justify-content: space-between;
}
}
@@ -417,6 +423,10 @@
}
}
.course-certificate {
width: 100%;
}
.upgrade-message {
flex-wrap: wrap;
@@ -432,7 +442,7 @@
/* IE11 CSS styles */
@media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
float: right;
@include float(right);
}
}
@@ -495,6 +505,109 @@
font-size: 0.9375em;
}
}
}
}
.program-sidebar {
padding: 30px 10px;
@media(min-width: $bp-screen-md) {
@include float(right);
width: 300px;
padding-right: 30px;
position: relative;
}
@media(min-width: $bp-screen-lg) {
width: 450px;
.program-progress {
@include margin-left(50px);
}
}
@media(min-width: $lms-max-width) {
@include margin-right(calc((100% - 1180px) / 2));
}
}
.certificate-heading {
margin-bottom: 10px;
@media(min-width: $bp-screen-md) {
@include margin-right(30px);
}
@media(min-width: $bp-screen-lg) {
@include margin-left(10px);
@include margin-right(0);
}
}
.program-cert-link {
display: inline-block;
&:active,
&:focus,
&:hover {
.program-cert {
border-color: $blue-d1;
}
}
}
.program-cert {
width: 100%;
border: 1px solid $divider-color;
@media(min-width: $bp-screen-md) {
width: calc(100% - 30px);
}
@media(min-width: $bp-screen-lg) {
width: 100%;
}
}
.certificate-list {
@include margin(0, 0, 0, 10px);
list-style: none;
.certificate {
display: flex;
flex-direction: row;
padding: 5px 0 10px;
}
.certificate-link {
@include margin-left(20px);
color: $black;
font: {
size: 1.1em;
weight: 600;
}
@media(min-width: $bp-screen-md) {
font-size: 0.9em;
}
@media(min-width: $bp-screen-lg) {
font-size: 1.1em;
}
&:active,
&:focus,
&:hover {
.sample-cert {
border-color: $blue-d1;
}
}
}
.sample-cert {
width: 120px;
border: 3px solid $gray-l3;
border-radius: 5px;
.expired-notification {
display: inline-block;
@@ -511,7 +624,7 @@
}
.expired-icon {
float: left;
@include float(left);
color: palette(primary, dark);
}
@@ -520,5 +633,12 @@
padding-left: 10px;
}
@media(min-width: $bp-screen-md) {
width: 100px;
}
@media(min-width: $bp-screen-lg) {
width: 120px;
}
}
}