Skip to content

E
edx-platform
Commit c4bdfd9d by Galen Frechette
Options

wip course info/profile page

parent 11bf79a5
Showing with 301 additions and 69 deletions
lms/static/sass/_course_info.scss
......@@ -4,8 +4,8 @@
}
header.course-profile {
background: rgb(240,240,240);
@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
background: rgb(245,245,245);
//@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
......@@ -16,7 +16,7 @@
@include clearfix;
margin: 0 auto;
max-width: 1200px;
padding: 40px 0px 40px;
padding: 50px 0px 40px;
position: relative;
width: flex-grid(12);
......@@ -41,8 +41,6 @@
z-index: 2;
> hgroup {
//@include inline-block;
//padding: 0 30px;
position: relative;
hr {
......@@ -69,9 +67,9 @@
h1 {
font: bold 2.8rem/3.2rem $sans-serif;
margin-bottom: 0px;
@include inline-block;
margin-right: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
//text-align: center;
span {
color: $lighter-base-font-color;
......@@ -81,7 +79,7 @@
}
h2 {
//text-align: center;
@include inline-block;
a {
color: $lighter-base-font-color;
......@@ -94,31 +92,92 @@
}
}
}
.course-dates {
p {
color: $lighter-base-font-color;
@include inline-block;
font: 300 1.2rem/1.6rem $sans-serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase;
&:last-child {
margin: 0;
}
> span {
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-left: 5px;
}
}
}
}
.actions {
float: left;
padding-top: 5px;
position: relative;
width: flex-grid(4);
z-index: 2;
&:hover {
.register-wrapper {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
border-color: rgb(180,180,180);
}
}
.register-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
@include box-sizing(border-box);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
@include transition(all, 0.15s, linear);
padding: 10px;
a.register {
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
font: italic 1.2rem/1.6rem $serif;
margin-bottom: 10px;
padding: 10px 0px;
position: relative;
text-transform: uppercase;
text-align: center;
width: flex-grid(12);
z-index: 1;
}
}
.social-sharing {
background: rgb(230,230,230);
height: 40px;
padding: 0px 20px;
p {
background: rgb(245,245,245);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
border-top: 0;
@include border-bottom-radius(4px);
padding: 5px 10px;
margin: 0 auto;
color: $lighter-base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin: 0;
}
> span {
font: normal 1.2rem/1.6rem $sans-serif;
margin-right: 5px;
}
}
}
}
}
......@@ -131,8 +190,7 @@
border-bottom: 1px solid rgb(220,220,220);
@include box-sizing(border-box);
@include clearfix;
margin-bottom: 40px;
//text-align: center;
margin: 40px 0;
width: flex-grid(12);
&::after {
......@@ -142,14 +200,22 @@
}
a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color;
@include inline-block;
font: normal 1.2rem/1.6rem $sans-serif;
padding: 30px 20px;
margin: 0 15px;
padding: 0px 5px 15px;
text-align: center;
text-transform: uppercase;
&:first-child {
margin-left: 0px;
}
&:hover, &.active {
background: rgb(240,240,240);
border-color: $pink;
//background: rgb(240,240,240);
color: $base-font-color;
}
}
......@@ -175,8 +241,6 @@
width: flex-grid(8);
.inner-wrapper {
//padding: 0 60px;
> section {
&::after {
......@@ -242,25 +306,6 @@
background: rgb(245,245,245);
margin-bottom: 20px;
padding: 15px;
&.dates {
p {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 5px;
&:last-child {
border: none;
margin: 0;
padding: 0;
}
> span {
margin-left: 20px;
}
}
}
}
.media {
......@@ -273,11 +318,53 @@
.hero {
height: 180px;
overflow: hidden;
position: relative;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px;
&::after {
color: $base-font-color;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
top: 50%;
}
}
img {
min-width: 100%;
}
}
&:hover {
cursor: pointer;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
&::after {
color: $pink;
}
}
}
}
}
}
lms/static/sass/application.css
......@@ -3397,12 +3397,7 @@ nav.course-material {
.course-info .container {
margin-bottom: 60px; }
.course-info header.course-profile {
background: #f0f0f0;
background-image: -webkit-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: -moz-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: -ms-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: -o-linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background-image: linear-gradient(-90deg, #e6e6e6, #f5f5f5);
background: #f5f5f5;
-webkit-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5);
......@@ -3416,7 +3411,7 @@ nav.course-material {
zoom: 1;
margin: 0 auto;
max-width: 1200px;
padding: 40px 0px 40px;
padding: 50px 0px 40px;
position: relative;
width: 100%; }
.course-info header.course-profile .intro-inner-wrapper:before, .course-info header.course-profile .intro-inner-wrapper:after {
......@@ -3476,25 +3471,102 @@ nav.course-material {
width: 100%; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 {
font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 0px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 5px;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span {
color: #a0a0a0;
display: none;
font: 300 1.2rem/3rem "Open Sans", Verdana, Geneva, sans-serif; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a {
color: #a0a0a0;
font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover {
color: #1d9dd9; }
.course-info header.course-profile .intro-inner-wrapper .intro .course-dates p {
color: #a0a0a0;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase; }
.course-info header.course-profile .intro-inner-wrapper .intro .course-dates p:last-child {
margin: 0; }
.course-info header.course-profile .intro-inner-wrapper .intro .course-dates p > span {
color: #3c3c3c;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 5px; }
.course-info header.course-profile .intro-inner-wrapper .actions {
float: left;
padding-top: 5px;
position: relative;
width: 31.984%;
z-index: 2; }
.course-info header.course-profile .intro-inner-wrapper .actions a.register {
.course-info header.course-profile .intro-inner-wrapper .actions:hover .register-wrapper {
-webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
-moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
border-color: #b4b4b4; }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper {
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
border: 1px solid #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
padding: 10px; }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register {
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
......@@ -3530,12 +3602,13 @@ nav.course-material {
border-radius: 3px;
display: block;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-bottom: 10px;
padding: 10px 0px;
position: relative;
text-transform: uppercase;
text-align: center;
width: 100%; }
.course-info header.course-profile .intro-inner-wrapper .actions a.register:hover {
width: 100%;
z-index: 1; }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:hover {
cursor: pointer;
background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
......@@ -3544,13 +3617,43 @@ nav.course-material {
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.course-info header.course-profile .intro-inner-wrapper .actions a.register:active {
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:active {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing {
background: #e6e6e6;
height: 40px; }
padding: 0px 20px; }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p {
background: #f5f5f5;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
border: 1px solid #d2d2d2;
border-top: 0;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
padding: 5px 10px;
margin: 0 auto;
color: #a0a0a0;
font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0 0 5px 0;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p:last-child {
margin: 0; }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p > span {
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-right: 5px; }
.course-info .container {
zoom: 1; }
.course-info .container:before, .course-info .container:after {
......@@ -3564,7 +3667,7 @@ nav.course-material {
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
margin-bottom: 40px;
margin: 40px 0;
width: 100%; }
.course-info .container nav:before, .course-info .container nav:after {
content: "";
......@@ -3575,6 +3678,7 @@ nav.course-material {
content: "";
display: none; }
.course-info .container nav a {
border-bottom: 3px solid transparent;
color: #a0a0a0;
display: -moz-inline-box;
-moz-box-orient: vertical;
......@@ -3584,10 +3688,14 @@ nav.course-material {
*display: inline;
*vertical-align: auto;
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 30px 20px;
text-align: center; }
margin: 0 15px;
padding: 0px 5px 15px;
text-align: center;
text-transform: uppercase; }
.course-info .container nav a:first-child {
margin-left: 0px; }
.course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active {
background: #f0f0f0;
border-color: #b62568;
color: #3c3c3c; }
.course-info .container h2 {
color: #a0a0a0;
......@@ -3647,17 +3755,6 @@ nav.course-material {
background: #f5f5f5;
margin-bottom: 20px;
padding: 15px; }
.course-info .course-sidebar > section.dates p {
border-bottom: 1px solid #dcdcdc;
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 5px; }
.course-info .course-sidebar > section.dates p:last-child {
border: none;
margin: 0;
padding: 0; }
.course-info .course-sidebar > section.dates p > span {
margin-left: 20px; }
.course-info .course-sidebar .media {
border: 1px solid #c8c8c8;
-webkit-box-sizing: border-box;
......@@ -3668,9 +3765,57 @@ nav.course-material {
width: 100%; }
.course-info .course-sidebar .media .hero {
height: 180px;
overflow: hidden; }
overflow: hidden;
position: relative; }
.course-info .course-sidebar .media .hero .play-intro {
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px; }
.course-info .course-sidebar .media .hero .play-intro::after {
color: #3c3c3c;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
top: 50%; }
.course-info .course-sidebar .media .hero img {
min-width: 100%; }
.course-info .course-sidebar .media:hover {
cursor: pointer; }
.course-info .course-sidebar .media:hover .play-intro {
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4); }
.course-info .course-sidebar .media:hover .play-intro::after {
color: #b62568; }
html {
height: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment