Skip to content

E
edx-platform
Commit 33f95e2d by Galen Frechette
Options

minor fixes to dashboard and typography, adds layout to jobs page

parent 04c38bb5
Showing with 663 additions and 233 deletions
lms/static/sass/_base.scss
......@@ -26,6 +26,22 @@ h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
}
h1 {
color: $lighter-base-font-color;
font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
h2 {
color: $lighter-base-font-color;
font: normal 1.4rem/2rem $serif;
margin-bottom: 15px;
text-transform: uppercase;
}
p {
color: $base-font-color;
font: normal 1.3rem/2rem $serif;
......@@ -36,9 +52,23 @@ p + p {
margin-top: 20px;
}
p {
a:link, a:visited {
color: $blue;
font: normal 1.3rem/2rem $serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: $blue;
text-decoration: underline;
}
}
}
a:link, a:visited {
color: $blue;
font: normal 1rem/1.8rem $sans-serif;
font: normal 1.2rem/2rem $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
......
lms/static/sass/_base_extends.scss
......@@ -52,6 +52,7 @@
}
.horizontal-divider {
border: none;
@extend .faded-hr-divider;
position: relative;
......@@ -63,3 +64,15 @@
top: 1px;
}
}
.fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1)));
border: none;
}
.fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0)));
border: none;
}
lms/static/sass/_course_info.scss
......@@ -42,33 +42,14 @@
> hgroup {
position: relative;
hr {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 1)));
border: none;
height: 1px;
margin: 10px 0;
position: relative;
&::after {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0.6)));
bottom: -1px;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100%;
}
}
margin-bottom: 12px;
h1 {
color: $base-font-color;
font: bold 2.8rem/3.2rem $sans-serif;
@include inline-block;
margin-right: 5px;
margin: 0 5px 0 0;
letter-spacing: 0px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
span {
......@@ -80,6 +61,7 @@
h2 {
@include inline-block;
margin: 0;
a {
color: $lighter-base-font-color;
......@@ -97,19 +79,22 @@
p {
color: $lighter-base-font-color;
@include inline-block;
font: 300 1.2rem/1.6rem $sans-serif;
font: italic 1.2rem/1.6rem $serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase;
&:last-child {
margin: 0;
}
> span {
background: rgb(255,255,255);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-left: 5px;
padding: 2px 10px;
}
}
}
......@@ -117,6 +102,7 @@
.actions {
float: left;
margin-top: 5px;
position: relative;
width: flex-grid(4);
z-index: 2;
......@@ -124,18 +110,14 @@
&: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);
......@@ -156,14 +138,14 @@
padding: 0px 20px;
p {
background: rgb(245,245,245);
background: rgb(255,255,255);
@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;
padding: 3px 10px;
margin: 0 auto;
color: $lighter-base-font-color;
color: $base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
text-align: center;
......
lms/static/sass/_dashboard.scss
......@@ -3,9 +3,10 @@
margin: 40px 10px;
.sidebar {
background: rgb(240,240,240);
margin-right: flex-gutter();
position: absolute;
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
float: left;
width: 250px;
@media screen and (max-width: 768px) {
......@@ -108,7 +109,6 @@
}
.my-courses {
@include box-sizing(border-box);
margin: 0px;
padding-left: 270px;
......@@ -121,45 +121,31 @@
width: flex-grid(12);
}
nav.course-toggle {
background: rgb(230,230,230);
margin-bottom: 30px;
position: relative;
ol.filters {
@include clearfix;
li {
border-right: 1px solid rgb(200,200,200);
.empty-dashboard-message {
background: rgb(250,250,250);
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
padding: 40px 0px;
text-align: center;
p {
color: $lighter-base-font-color;
font-style: italic;
text-shadow: 0 1px rgba(255,255,255, 0.6);
a {
background: rgb(240,240,240);
@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%));
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
list-style: none;
float: left;
padding: 15px 10px;
width: 25%;
text-align: center;
&:last-child {
border: none;
}
&:hover {
background: rgb(220,220,220);
cursor: pointer;
}
&.selected {
background: rgb(220,220,220);
}
h2 {
font: normal 1rem/1.2rem $sans-serif;
text-transform: none;
}
span.count {
margin: 5px 0 0 0;
display: block;
}
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
@include inline-block;
margin-left: 5px;
padding: 5px 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
}
}
......@@ -273,7 +259,8 @@
}
h2 {
font: bold 1.2rem/1.6rem $sans-serif;
color: $base-font-color;
font: bold 1.4rem/1.6rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -282,9 +269,9 @@
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
h3 {
color: $lighter-base-font-color;
font: italic bold 1.2rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
......
lms/static/sass/_index.scss
......@@ -43,12 +43,7 @@
padding-top: 20px;
h1 {
color: $lighter-base-font-color;
font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
text-transform: uppercase;
text-align: left;
}
.intro {
......@@ -256,12 +251,12 @@
}
.courses {
background: rgb(245,245,245);
@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%,
rgba(255,255,255, 0.5) 20%,
rgba(255,255,255, 0) 50%,
rgba(255,255,255, 0.5) 80%,
rgba(255,255,255, 1) 100%));
//background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%,
//rgba(255,255,255, 0.5) 20%,
//rgba(255,255,255, 0) 50%,
//rgba(255,255,255, 0.5) 80%,
//rgba(255,255,255, 1) 100%));
}
}
......
lms/static/sass/_jobs.scss 0 → 100644
.jobs {
margin: 60px auto 120px;
h1 + hr {
margin-bottom: 80px;
}
.message {
@include clearfix;
margin-bottom: 60px;
padding-bottom: 60px;
position: relative;
hr {
bottom: 0px;
margin: 0px;
position: absolute;
width: 100%;
}
.photo {
background: rgb(255,255,255);
border: 1px solid rgb(210,210,210);
padding: 1px;
width: flex-grid(4);
img {
background: rgb(245,245,245);
display: block;
height: 200px;
width: 100%;
}
}
&.left {
.photo {
float: left;
margin-right: flex-gutter();
}
}
&.right {
h2, p {
text-align: right;
}
.photo {
float: right;
margin-left: flex-gutter();
}
}
&:last-child {
margin-bottom: 0px;
}
}
.jobs-wrapper {
@include clearfix;
float: left;
width: flex-grid(12);
> h2 {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 60px;
padding-bottom: 20px;
//text-align: center;
}
.jobs-sidebar {
@include box-sizing(border-box);
border-left: 1px solid rgb(220,220,220);
float: left;
padding-bottom: 20px;
padding-left: 20px;
width: flex-grid(3);
nav {
margin-bottom: 40px;
ol {
@include clearfix;
li {
float: left;
margin-right: flex-gutter();
width: flex-grid(12);
&:nth-child(4n) {
margin-right: 0px;
}
a {
display: block;
margin-left: -20px;
padding: 10px 0px 10px 20px;
position: relative;
text-transform: uppercase;
&::after {
@include background-image(linear-gradient(180deg, rgba(235,235,235, 0) 0%,
rgba(235,235,235, 1)));
bottom: 0px;
//content: "";
display: block;
height: 1px;
left: 0px;
position: absolute;
width: 100%;
}
&:hover {
background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
//rgba(245,245,245, 1) 80%,
//rgba(245,245,245, 1) 100%));
}
}
}
}
}
p + h2 {
margin-top: 40px;
}
}
.jobs-listing {
float: left;
margin-right: flex-gutter();
width: flex-grid(9);
.job {
border-bottom: 1px solid rgb(220,220,220);
padding: 40px 0px;
&:first-child {
padding-top: 0px;
}
&:last-child {
border: none;
padding-bottom: 0px;
}
.inner-wrapper {
}
h3 {
font-family: $sans-serif;
font-weight: bold;
margin-bottom: 15px;
}
}
}
}
}
lms/static/sass/_shared_list_of_courses.scss
......@@ -37,7 +37,6 @@
> a {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75)));
//@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.6), rgba(0,0,0, 0.8)));
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
border-bottom: 1px solid rgba(150,150,150, 0.7);
display: block;
......@@ -51,6 +50,7 @@
top: 0px;
h2 {
color: $base-font-color;
font: bold 1.2rem/1.6rem $sans-serif;
padding-top: 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......
lms/static/sass/_shared_modal.scss
......@@ -30,22 +30,30 @@
width: grid-width(6);
z-index: 10;
&::before {
@include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
bottom: 0;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
&.visible {
display: block;
}
&.video-modal {
//height: 360px;
left: 50%;
margin-left: -320px;
//margin-top: -180px;
//top: 50%;
width: 642px;
margin-left: -281px;
width: 562px;
.inner-wrapper {
height: 360px;
height: 315px;
padding: 0px;
width: 640px;
width: 560px;
}
}
......@@ -57,6 +65,7 @@
overflow: hidden;
padding-bottom: 30px;
position: relative;
z-index: 2;
header {
margin-bottom: 30px;
......
lms/static/sass/application.css
......@@ -316,6 +316,20 @@ h1, h2, h3, h4, h5, h6 {
margin: 0px;
-webkit-font-smoothing: antialiased; }
h1 {
color: #a0a0a0;
font: 300 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase; }
h2 {
color: #a0a0a0;
font: normal 1.4rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-bottom: 15px;
text-transform: uppercase; }
p {
color: #3c3c3c;
font: normal 1.3rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
......@@ -324,9 +338,37 @@ p {
p + p {
margin-top: 20px; }
p a:link, p a:visited {
color: #1d9dd9;
font: normal 1.3rem/2rem Georgia, Cambria, "Times New Roman", Times, serif;
text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-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; }
p a:link:hover, p a:visited:hover {
color: #1d9dd9;
text-decoration: underline; }
a:link, a:visited {
color: #1d9dd9;
font: normal 1rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif;
font: normal 1.2rem/2rem "Open Sans", Verdana, Geneva, sans-serif;
text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
......@@ -416,6 +458,7 @@ a:link, a:visited {
left: 1px; }
.horizontal-divider {
border: none;
position: relative; }
.horizontal-divider::after {
content: "";
......@@ -423,6 +466,22 @@ a:link, a:visited {
position: absolute;
top: 1px; }
.fade-right-hr-divider {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8);
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8);
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8);
background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8);
background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8);
border: none; }
.fade-left-hr-divider {
background-image: -webkit-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
background-image: -o-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
background-image: linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
border: none; }
.animation-title-appear {
-webkit-animation: title-appear 4.65s ease-out;
-moz-animation: title-appear 4.65s ease-out;
......@@ -1780,6 +1839,7 @@ header.app {
right: 60px;
top: 0px; }
.highlighted-courses .courses .course header.course-preview > a hgroup h2, .find-courses .courses .course header.course-preview > a hgroup h2 {
color: #3c3c3c;
font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
padding-top: 10px;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
......@@ -2076,16 +2136,29 @@ header.app {
top: 170px;
width: 485px;
z-index: 10; }
.modal::before {
background-image: -webkit-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -moz-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -ms-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -o-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
bottom: 0;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1; }
.modal.visible {
display: block; }
.modal.video-modal {
left: 50%;
margin-left: -320px;
width: 642px; }
margin-left: -281px;
width: 562px; }
.modal.video-modal .inner-wrapper {
height: 360px;
height: 315px;
padding: 0px;
width: 640px; }
width: 560px; }
.modal .inner-wrapper {
background: #f0f0f0;
-webkit-border-radius: 0px;
......@@ -2099,7 +2172,8 @@ header.app {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
overflow: hidden;
padding-bottom: 30px;
position: relative; }
position: relative;
z-index: 2; }
.modal .inner-wrapper header {
margin-bottom: 30px;
overflow: hidden;
......@@ -2331,12 +2405,7 @@ header.app {
padding-right: 600px;
padding-top: 20px; }
.home > header .welcome h1 {
color: #a0a0a0;
font: 300 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
text-transform: uppercase; }
text-align: left; }
.home > header .welcome .intro {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -2671,13 +2740,6 @@ header.app {
padding: 15px 10px;
text-align: center;
text-transform: uppercase; }
.home .highlighted-courses .courses {
background: #f5f5f5;
background-image: -webkit-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -moz-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -ms-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: -o-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%);
background-image: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); }
.home .more-info {
margin-bottom: 60px;
width: 100%; }
......@@ -2731,9 +2793,14 @@ header.app {
.dashboard:after {
clear: both; }
.dashboard .sidebar, .dashboard section.course-index {
background: #f0f0f0;
margin-right: 2.024%;
position: absolute;
background: #fafafa;
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
float: left;
width: 250px; }
@media screen and (max-width: 768px) {
.dashboard .sidebar, .dashboard section.course-index {
......@@ -2830,9 +2897,6 @@ header.app {
font-weight: normal;
text-transform: none; }
.dashboard .my-courses {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px;
padding-left: 270px; }
@media screen and (max-width: 768px) {
......@@ -2842,40 +2906,51 @@ header.app {
.dashboard .my-courses {
float: none;
width: 100%; } }
.dashboard .my-courses nav.course-toggle {
background: #e6e6e6;
margin-bottom: 30px;
position: relative; }
.dashboard .my-courses nav.course-toggle ol.filters {
zoom: 1; }
.dashboard .my-courses nav.course-toggle ol.filters:before, .dashboard .my-courses nav.course-toggle ol.filters:after {
content: "";
display: table; }
.dashboard .my-courses nav.course-toggle ol.filters:after {
clear: both; }
.dashboard .my-courses nav.course-toggle ol.filters li {
border-right: 1px solid #c8c8c8;
.dashboard .my-courses .empty-dashboard-message {
background: #fafafa;
border: 1px solid #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
padding: 40px 0px;
text-align: center; }
.dashboard .my-courses .empty-dashboard-message p {
color: #a0a0a0;
font-style: italic;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.dashboard .my-courses .empty-dashboard-message p a {
background: #f0f0f0;
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%);
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
float: left;
padding: 15px 10px;
width: 25%;
text-align: center; }
.dashboard .my-courses nav.course-toggle ol.filters li:last-child {
border: none; }
.dashboard .my-courses nav.course-toggle ol.filters li:hover {
background: #dcdcdc;
cursor: pointer; }
.dashboard .my-courses nav.course-toggle ol.filters li.selected {
background: #dcdcdc; }
.dashboard .my-courses nav.course-toggle ol.filters li h2 {
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-transform: none; }
.dashboard .my-courses nav.course-toggle ol.filters li span.count {
margin: 5px 0 0 0;
display: block; }
color: #3c3c3c;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-left: 5px;
padding: 5px 10px;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.dashboard .my-courses .my-course {
background: #fafafa;
border: 1px solid #dcdcdc;
......@@ -3073,7 +3148,8 @@ header.app {
.dashboard .my-courses .my-course .info > hgroup {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup h2 {
font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
color: #3c3c3c;
font: bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
......@@ -3099,9 +3175,9 @@ header.app {
transition-delay: 0;
text-overflow: ellipsis;
white-space: nowrap; }
.dashboard .my-courses .my-course .info > hgroup p {
color: #3c3c3c;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
.dashboard .my-courses .my-course .info > hgroup h3 {
color: #a0a0a0;
font: italic bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis;
......@@ -3446,30 +3522,10 @@ nav.course-material {
.course-info header.course-profile .intro-inner-wrapper .intro:after {
clear: both; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup {
position: relative; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup hr {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8);
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8);
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8);
background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8);
background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8);
border: none;
height: 1px;
margin: 10px 0;
position: relative; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup hr::after {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6));
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6));
bottom: -1px;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100%; }
position: relative;
margin-bottom: 12px; }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 {
color: #3c3c3c;
font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
......@@ -3478,7 +3534,8 @@ nav.course-material {
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 5px;
margin: 0 5px 0 0;
letter-spacing: 0px;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span {
color: #a0a0a0;
......@@ -3491,7 +3548,8 @@ nav.course-material {
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
*vertical-align: auto;
margin: 0; }
.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;
......@@ -3507,39 +3565,42 @@ nav.course-material {
zoom: 1;
*display: inline;
*vertical-align: auto;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase; }
margin-right: 20px; }
.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 {
background: white;
border: 1px solid #dcdcdc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
color: #3c3c3c;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 5px; }
margin-left: 5px;
padding: 2px 10px; }
.course-info header.course-profile .intro-inner-wrapper .actions {
float: left;
margin-top: 5px;
position: relative;
width: 31.984%;
z-index: 2; }
.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; }
box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); }
.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;
......@@ -3564,8 +3625,7 @@ nav.course-material {
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
padding: 10px; }
transition-delay: 0; }
.course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register {
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
......@@ -3624,7 +3684,7 @@ nav.course-material {
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing {
padding: 0px 20px; }
.course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p {
background: #f5f5f5;
background: white;
-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);
......@@ -3642,9 +3702,9 @@ nav.course-material {
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
padding: 5px 10px;
padding: 3px 10px;
margin: 0 auto;
color: #a0a0a0;
color: #3c3c3c;
font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin: 0 0 5px 0;
text-align: center;
......@@ -3817,6 +3877,121 @@ nav.course-material {
.course-info .course-sidebar .media:hover .play-intro::after {
color: #b62568; }
.jobs {
margin: 60px auto 120px; }
.jobs h1 + hr {
margin-bottom: 80px; }
.jobs .message {
zoom: 1;
margin-bottom: 60px;
padding-bottom: 60px;
position: relative; }
.jobs .message:before, .jobs .message:after {
content: "";
display: table; }
.jobs .message:after {
clear: both; }
.jobs .message hr {
bottom: 0px;
margin: 0px;
position: absolute;
width: 100%; }
.jobs .message .photo {
background: white;
border: 1px solid #d2d2d2;
padding: 1px;
width: 31.984%; }
.jobs .message .photo img {
background: #f5f5f5;
display: block;
height: 200px;
width: 100%; }
.jobs .message.left .photo {
float: left;
margin-right: 2.024%; }
.jobs .message.right h2, .jobs .message.right p {
text-align: right; }
.jobs .message.right .photo {
float: right;
margin-left: 2.024%; }
.jobs .message:last-child {
margin-bottom: 0px; }
.jobs .jobs-wrapper {
zoom: 1;
float: left;
width: 100%; }
.jobs .jobs-wrapper:before, .jobs .jobs-wrapper:after {
content: "";
display: table; }
.jobs .jobs-wrapper:after {
clear: both; }
.jobs .jobs-wrapper > h2 {
border-bottom: 1px solid #dcdcdc;
margin-bottom: 60px;
padding-bottom: 20px; }
.jobs .jobs-wrapper .jobs-sidebar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-left: 1px solid #dcdcdc;
float: left;
padding-bottom: 20px;
padding-left: 20px;
width: 23.482%; }
.jobs .jobs-wrapper .jobs-sidebar nav {
margin-bottom: 40px; }
.jobs .jobs-wrapper .jobs-sidebar nav ol {
zoom: 1; }
.jobs .jobs-wrapper .jobs-sidebar nav ol:before, .jobs .jobs-wrapper .jobs-sidebar nav ol:after {
content: "";
display: table; }
.jobs .jobs-wrapper .jobs-sidebar nav ol:after {
clear: both; }
.jobs .jobs-wrapper .jobs-sidebar nav ol li {
float: left;
margin-right: 2.024%;
width: 100%; }
.jobs .jobs-wrapper .jobs-sidebar nav ol li:nth-child(4n) {
margin-right: 0px; }
.jobs .jobs-wrapper .jobs-sidebar nav ol li a {
display: block;
margin-left: -20px;
padding: 10px 0px 10px 20px;
position: relative;
text-transform: uppercase; }
.jobs .jobs-wrapper .jobs-sidebar nav ol li a::after {
background-image: -webkit-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb);
background-image: -moz-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb);
background-image: -ms-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb);
background-image: -o-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb);
background-image: linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb);
bottom: 0px;
display: block;
height: 1px;
left: 0px;
position: absolute;
width: 100%; }
.jobs .jobs-wrapper .jobs-sidebar nav ol li a:hover {
background: #f5f5f5; }
.jobs .jobs-wrapper .jobs-sidebar p + h2 {
margin-top: 40px; }
.jobs .jobs-wrapper .jobs-listing {
float: left;
margin-right: 2.024%;
width: 74.494%; }
.jobs .jobs-wrapper .jobs-listing .job {
border-bottom: 1px solid #dcdcdc;
padding: 40px 0px; }
.jobs .jobs-wrapper .jobs-listing .job:first-child {
padding-top: 0px; }
.jobs .jobs-wrapper .jobs-listing .job:last-child {
border: none;
padding-bottom: 0px; }
.jobs .jobs-wrapper .jobs-listing .job h3 {
font-family: "Open Sans", Verdana, Geneva, sans-serif;
font-weight: bold;
margin-bottom: 15px; }
html {
height: 100%;
max-height: 100%; }
......
lms/static/sass/application.scss
......@@ -24,6 +24,8 @@
@import 'course';
@import 'find_courses';
@import 'course_info';
@import 'jobs';
@import 'about';
@import 'sass_old/courseware/courseware';
@import 'sass_old/courseware/sequence-nav';
......
lms/templates/dashboard.html
......@@ -33,22 +33,9 @@
</section>
<section class="my-courses">
<nav class="course-toggle">
<ol class="filters">
<li class="selected">
<h2>All <span class="count">3</span></h2>
</li>
<li>
<h2>Current <span class="count">3</span></h2>
</li>
<li>
<h2>Upcoming <span class="count">0</span></h2>
</li>
<li>
<h2>Completed <span class="count">0</span></h2>
</li>
</ol>
</nav>
<header>
<h2>My Current Courses</h2>
</header>
% if len(courses) > 0:
% for course in courses:
......@@ -57,13 +44,13 @@
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
<img src="${static.url('images/circuits.jpeg')}" />
</div>
<section class="info">
<hgroup>
<h2>${course.title}</h2>
% for instructor in course.instructors:
<p>${instructor}, ${course.institution}</p>
<h3>${course.institution}</h3>
% endfor
</hgroup>
<div class="edit">options</div>
......@@ -85,11 +72,9 @@
</article>
% endfor
% else:
<div class="find-courses-wrapper">
<section class="find-courses">
<a href="${reverse('courses')}" class="find-courses">Find Courses</a>
</section>
</div>
<section class="empty-dashboard-message">
<p>Looks like you aren't registered for any courses. You should take a minute and <a href="${reverse('courses')}" class="find-courses">Find some courses!</a></p>
</section>
% endif
<article class="my-course">
......
lms/templates/jobs.html
<%inherit file="main.html" />
<h1>Jobs</h1>
<section class="container jobs">
<h1>Want to change the future of education?</h1>
<hr class="horizontal-divider">
<section class="company-mission message left">
<div class="inner-wrapper">
<div class="photo">
<img src="">
</div>
<h2>Mission: Educate 1 billion people around the world</h2>
<p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
<p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
</div>
<hr class="fade-right-hr-divider">
</section>
<section class="our-culture message right">
<div class="photo">
<img src="">
</div>
<h2>What it's like to work here</h2>
<p>“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.</p>
<p>[fast-moving not-for-profit startup][institutional backing, funding, benefits, and stability][industry salaries]</p>
<hr class="fade-left-hr-divider">
</section>
<section class="benefits message left">
<div class="photo">
<img src="">
</div>
<h2>Mission: Educate 1 billion people around the world</h2>
<p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
<p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
</section>
<section class="jobs-wrapper">
<h2>We are currently looking for</h2>
<section class="jobs-listing">
<article id="edx-fellow" class="job">
<div class="inner-wrapper">
<h3>edX Fellow</h3>
<p>The edX fellows program is intended as an alternative to the traditional academic track for candidates with a strong focus on teaching. Fellows act as contact points for departments at MIT and Harvard, and help facilitate putting together on-line courses. </p>
<p>If you're interested in this position, send an e-mail to <a href="">fellow-jobs@edxonline.org</a></p>
</div>
</article>
<article id="content-engineer" class="job">
<div class="inner-wrapper">
<h3>Content Engineer</h3>
<p>Content engineers help create the technology for specific courses. The tasks include:</p>
<ul>
<li>
<p>Development of course-specific user-facing elements, such as the circuit editor and simulator that Chris Terman and Jacob White developed for 6.002x</p>
</li>
<li>
<p>Simple integration of course materials into courses</p>
</li>
<li>
<p>Developing programs to grade rich design questions, such as the ones developed by Gerald Sussman to allow basic design problems in 6.002x.</p>
</li>
</ul>
<p>Knowledge of Python, XML, and/or JavaScript is desired. Strong interest and background in pedagogy and education is desired as well.</p>
<p>If you're interested in this position, send an e-mail to <a href="">content-engineer@edxonline.org</a></p>
</div>
</article>
<article id="technology-team" class="job">
<div class="inner-wrapper">
<h3>Technology Team</h3>
<p>[Looking for both back-end and front-end developers. Strong backgrounds in machine learning, education, user interaction design, big data, or social network analysis are desirable, but team members do wear many hats. Best candidate would be a masterful hacker who went and did startups after finishing their Ph.D. We should find a way to make some positions that parallel fellows, and can leverage MIT/Harvard prestige]</p>
<p>If you're interested in this position, send an e-mail to <a href="">content-engineer@edxonline.org</a></p>
</div>
</article>
</section>
<section class="jobs-sidebar">
<h2>Positions</h2>
<nav>
<ol>
<li>
<a href="#edx-fellow">edX Fellow</a>
</li>
<li>
<a href="#content-engineer">Content Engineer</a>
</li>
<li>
<a href="#technology-team">Technology Team</a>
</li>
</ol>
</nav>
<h2>How to Apply</h2>
<p>E-mail your resume, coverletter and any other materials to <a href="#">careers@edxonline.org</a></p>
<h2>Our Location</h2>
<p>11 Cambridge Center, Cambridge MA USA</p>
</section>
</section>
</section>
lms/templates/navigation.html
......@@ -65,7 +65,4 @@
%if not user.is_authenticated():
<%include file="login_modal.html" />
<%include file="signup_modal.html" />
<section class="modal-overlay">
</section>
%endif
lms/templates/portal/course_about.html
......@@ -12,7 +12,6 @@
<section class="intro">
<hgroup>
<h1>${course.get_about_section("title")} <h2><a href="#">${course.get_about_section("university")}</a></h2></h1>
<hr>
</hgroup>
<div class="course-dates">
<p>Class Starts: <span class="start-date">7/12/12</span></p>
......@@ -53,13 +52,13 @@
<h2>Syllabus</h2>
<p>${course.get_about_section("syllabus")}</p>
<h3>Textbook</h3>
<h2>Textbook</h2>
${course.get_about_section("textbook")}
<h3>Frequently Asked Questions</h3>
${course.get_about_section("faq")}
<h2>Frequently Asked Questions</h2>
<p>${course.get_about_section("faq")}</p>
${course.get_about_section("more_info")}
<p>${course.get_about_section("more_info")}</p>
</section>
<section class="course-staff">
......@@ -98,7 +97,6 @@
<div class="play-intro"></div>
</div>
<%include file="../video_modal.html" />
${course.get_about_section("video")}
</div>
<section class="course-summary">
......
lms/templates/video_modal.html
......@@ -2,7 +2,7 @@
<section class="modal video-modal">
<div class="inner-wrapper">
<iframe width="640" height="360" src="http://www.youtube.com/embed/p2Q6BrNhdh8" frameborder="0" allowfullscreen></iframe>
${course.get_about_section("video")}
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
......
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