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

Implemented an upgrade verification sock.

Browse Source 
This sock sits at the bottom of both the home and the course content pages. It allows the user to click a 'Learn More' button to open a panel that allows the user to navigate to the upgrade checkout page. The sock is only shown for users that have not yet upgraded in a course that has a verification upgrade date that has not yet passed. Python tests cover the various course mode and upgrade dates.
This commit is contained in:
Harry Rein
2017-06-05 17:24:06 -04:00
parent 0b90c60b5f
commit bdf38ae00e
24 changed files with 573 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lms/static/sass/_build-course.scss
View File

@@ -68,3 +68,6 @@
// responsive
@import 'base/layouts'; // temporary spot for responsive course
// features
@import 'features/course-sock';

1
lms/static/sass/_build-lms-v2.scss
View File

@@ -27,3 +27,4 @@
@import 'features/bookmarks';
@import 'features/course-experience';
@import 'features/course-search';
@import 'features/course-sock';

5
lms/static/sass/features/_course-experience.scss
View File

@@ -107,6 +107,10 @@
border: 1px solid $lms-active-color;
}
}
&:last-child {
border-bottom: none;
}
}
}
}
@@ -186,4 +190,3 @@
}
}
}

180
lms/static/sass/features/_course-sock.scss Normal file
View File

@@ -0,0 +1,180 @@
.verification-sock {
display: inline-block;
position: relative;
width: 100%;
margin-top: $baseline;
max-width: $lms-max-width;
margin: $baseline auto 0;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
.action-toggle-verification-sock {
@include left(50%);
@include margin-left(-1 * $baseline * 15/2);
position: absolute;
top: (-1 * $baseline);
width: ($baseline * 15);
color: $button-bg-hover-color;
background-color: $success-color;
border-color: $success-color;
background-image: none;
box-shadow: none;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
&.active {
color: $success-color;
background-color: $button-bg-hover-color;
border-color: $success-color;
background-image: none;
box-shadow: none;
&:hover {
color: $button-bg-hover-color;
background-color: $success-color-hover;
border-color: $success-color-hover;
background-image: none;
box-shadow: none;
}
}
&:hover {
color: $button-bg-hover-color;
background-color: $success-color-hover;
border-color: $success-color-hover;
background-image: none;
box-shadow: none;
}
}
.verification-main-panel {
display: none;
overflow: hidden;
border-top: 1px solid $lms-border-color;
padding: ($baseline * 5/2) ($baseline * 2);
-webkit-transition: height ease-out;
transition: height ease-out;
.verification-desc-panel {
color: $black-t3;
position: relative;
@media (max-width: 960px) {
.mini-cert {
display: none;
border: 1px solid $black-t0;
}
}
.mini-cert {
@include right($baseline);
position: absolute;
top: $baseline;
width: ($baseline * 13);
}
h2 {
font-size: 1.5rem;
font-weight: 700;
}
h4 {
font-size: 1.25rem;
font-weight: 600;
}
.learner-story-container {
display: flex;
max-width: 630px;
.student-image {
margin: ($baseline / 4) $baseline 0 0;
height: ($baseline * 5/2);
width: ($baseline * 5/2);
}
.story-quote > .author{
display: block;
margin-top: ($baseline / 4);
font-weight: 600;
}
&:not(:first-child) {
margin-top: ($baseline * 2);
}
}
.action-upgrade-certificate {
position: absolute;
right: $baseline;
background-color: $success-color;
border-color: $success-color;
background-image: none;
box-shadow: none;
@media (max-width: 960px) {
& {
position: relative;
margin-top: ($baseline * 2);
}
}
@media (min-width: 960px) {
&.stuck-top {
bottom: auto;
top: $baseline * (52 / 5);
}
&.stuck-bottom {
top: auto;
bottom: $baseline * (-1 * 3/2);
}
&.attached {
@include right($baseline);
position: fixed;
bottom: $baseline;
top: auto;
}
}
&:hover {
background-color: $success-color-hover;
border-color: $success-color-hover;
}
}
}
}
}
// Overrides for the courseware page.
.view-courseware {
.verification-sock {
margin-top: 0;
border-top: none;
border-bottom: none;
.action-toggle-verification-sock {
top: (-1 * $baseline * 5/4);
&:not(.active) {
color: $button-bg-hover-color;
background-color: $success-color;
box-shadow: none;
border: 1px solid $success-color;
&:hover {
background-color: $success-color-hover;
}
}
}
.verification-main-panel {
border-top: 0;
border-bottom: 1px solid $lms-border-color;
}
}
}

4
lms/static/sass/partials/base/_variables.scss
View File

@@ -36,7 +36,7 @@ $fg-gutter: $gw-gutter !default;
$fg-max-columns: 12 !default;
$fg-max-width: 1400px !default;
$fg-min-width: 810px !default;
$lms-max-width: 1180px !default;
// ----------------------------
// #COLORS
@@ -218,7 +218,7 @@ $active-color: $blue !default;
$highlight-color: rgb(255,255,0) !default;
$alert-color: rgb(212, 64, 64) !default;
$success-color: rgb(0, 155, 0) !default;
$success-color-hover: rgb(0, 129, 0) !default;
// ----------------------------
// #COLORS- EDX-SPECIFIC

48
lms/static/sass/shared-v2/_variables.scss
View File

@@ -9,27 +9,38 @@
// ----------------------------
// #GRID
// ----------------------------
$lms-max-width: 1180px;
$lms-max-width: 1180px !default;
// ----------------------------
// #COLORS
// ----------------------------
$lms-gray: palette(grayscale, base);
$lms-background-color: palette(grayscale, x-back);
$lms-container-background-color: $white;
$lms-border-color: palette(grayscale, back);
$lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base);
$lms-preview-menu-color: #c8c8c8;
$white-transparent: rgba(255, 255, 255, 0);
$white-opacity-40: rgba(255, 255, 255, 0.4);
$white-opacity-60: rgba(255, 255, 255, 0.6);
$white-opacity-70: rgba(255, 255, 255, 0.7);
$white-opacity-80: rgba(255, 255, 255, 0.8);
$lms-gray: palette(grayscale, base) !default;
$lms-background-color: palette(grayscale, x-back) !default;
$lms-container-background-color: $white !default;
$lms-border-color: palette(grayscale, back) !default;
$lms-label-color: palette(grayscale, black) !default;
$lms-active-color: palette(primary, base) !default;
$lms-preview-menu-color: #c8c8c8 !default;
$success-color: palette(success, accent) !default;
$success-color-hover: palette(success, text) !default;
$light-grey-transparent: rgba(200,200,200, 0);
$light-grey-solid: rgba(200,200,200, 1);
$button-bg-hover-color: $white !default;
$white-transparent: rgba(255, 255, 255, 0) !default;
$white-opacity-40: rgba(255, 255, 255, 0.4) !default;
$white-opacity-60: rgba(255, 255, 255, 0.6) !default;
$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
$black: rgb(0,0,0) !default;
$black-t0: rgba($black, 0.125) !default;
$black-t1: rgba($black, 0.25) !default;
$black-t2: rgba($black, 0.5) !default;
$black-t3: rgba($black, 0.75) !default;
$light-grey-transparent: rgba(200,200,200, 0) !default;
$light-grey-solid: rgba(200,200,200, 1) !default;
// ----------------------------
// #TYPOGRAPHY
@@ -42,9 +53,10 @@ $font-bold: 700 !default;
// ----------------------------
// #ICONS
// ----------------------------
$lms-dark-icon-color: $white;
$lms-dark-icon-background-color: palette(grayscale, black);
// Icons
$lms-dark-icon-color: $white !default;
$lms-dark-icon-background-color: palette(grayscale, black) !default;
$site-status-color: rgb(182,37,103);
$site-status-color: rgb(182,37,103) !default;
$shadow-l1: rgba(0,0,0,0.1) !default;