Skip to content

E
edx-platform
Commit 4d7cef8d by Galen Frechette
Options

redesigns course item on home page and find courses page, refactors its… 

redesigns course item on home page and find courses page, refactors its implimentation and makes vrious other design improvements
parent 27e6c215
Showing with 856 additions and 467 deletions
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png

21.9 KB | W: | H:

lms/static/images/harvard_bw.png

21.7 KB | W: | H:

lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
lms/static/images/harvard_bw.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png

1.89 KB | W: | H:

lms/static/images/mit_bw.png

1.81 KB | W: | H:

lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
lms/static/images/mit_bw.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/sass/_base.scss
......@@ -21,8 +21,9 @@ html, body {
h1, h2, h3, h4, h5, h6 {
color: $base-font-color;
font: normal 1.6rem/2rem $serif;
font: normal 1.4rem/2rem $serif;
margin: 0px;
-webkit-font-smoothing: antialiased;
}
p {
......@@ -39,9 +40,10 @@ a:link, a:visited {
color: $blue;
font: normal 1rem/1.8rem $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: lighten($blue, 10%);
color: $base-font-color;
}
}
......
lms/static/sass/_base_extends.scss
......@@ -6,6 +6,14 @@
width: 100%;
}
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
......
lms/static/sass/_dashboard.scss
......@@ -107,7 +107,7 @@
}
}
.courses {
.my-courses {
@include box-sizing(border-box);
margin: 0px;
padding-left: 270px;
......@@ -164,8 +164,287 @@
}
}
.course {
.my-course {
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
@include border-radius(3px);
@include box-sizing(border-box);
float: left;
font-size: 0em;
margin-right: flex-gutter();
min-height: 120px;
margin-bottom: 25px;
overflow: hidden;
position: relative;
width: flex-grid(12);
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
padding: 10px;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade {
background: rgba(0,0,0, 0.3);
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%;
}
}
.info {
left: 130px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
width: 100%;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.2rem/1.6rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
&:hover {
opacity: 0.9;
}
> * {
height: 18px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.end-date {
border-left: 1px solid rgb(200,200,200);
right: 0px;
padding-left: 15px;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px;
right: 140px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
}
}
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
.meta {
opacity: 0.9;
}
}
}
}
}
lms/static/sass/_find_courses.scss
.find-courses {
header {
header.search-intro {
background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
......
lms/static/sass/_index.scss
......@@ -9,7 +9,7 @@
width: flex-grid(12);
.video-wrapper {
left: 0px;
right: 0px;
position: absolute;
top: 0px;
......@@ -36,15 +36,15 @@
.welcome {
@include box-sizing(border-box);
float: right;
float: left;
font-size: 0em;
width: flex-grid(12);
padding-left: 600px;
padding-right: 600px;
padding-top: 20px;
h1 {
color: $lighter-base-font-color;
font: normal 2.4rem/3rem $sans-serif;
font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
......@@ -99,109 +99,181 @@
}
}
.university-partners {
background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0)));
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
margin-bottom: 60px;
@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
rgba(245,245,245, 1) 50%,
rgba(245,245,245, 0) 100%));
border-top: 1px solid rgb(210,210,210);
border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 0px;
overflow: hidden;
padding: 10px 0px;
position: relative;
width: flex-grid(12);
&::before {
@extend .faded-hr-divider-medium;
content: "";
display: block;
}
&::after {
@extend .faded-hr-divider-medium;
content: "";
display: block;
}
.partners {
font-size: 0em;
margin: 0 auto;
width: 420px;
padding: 15px 0px;
text-align: center;
a {
li.partner {
@include inline-block;
margin-right: 40px;
opacity: 0.7;
margin-right: 20px;
padding-right: 20px;
position: relative;
vertical-align: middle;
&::before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 100px;
right: 0px;
position: absolute;
top: 0px;
width: 1px;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 100px;
right: 1px;
position: absolute;
top: 0px;
width: 1px;
}
&.mit {
padding: 0 35px 0 20px;
}
&:last-child {
margin-right: 0px;
padding-right: 0px;
&::before {
display: none;
}
&::after {
display: none;
}
}
}
a {
opacity: 0.7;
@include transition(all, 0.25s, ease-in-out);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
opacity: 0;
width: 200px;
position: absolute;
@include transition(all, 0.25s, ease-in-out);
top: 50%;
z-index: 1;
}
.name {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
left: 0px;
position: absolute;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
bottom: -60px;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
width: 100%;
z-index: 2;
}
img {
max-width: 140px;
position: relative;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
z-index: 2;
}
&:hover {
opacity: 0.9;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
position: absolute;
top: 50%;
z-index: 1;
opacity: 1;
}
}
}
.name {
@include inline-block;
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
position: relative;
z-index: 2;
vertical-align: middle;
}
.name {
bottom: 30px;
}
img {
@include inline-block;
max-width: 100px;
vertical-align: middle;
position: relative;
z-index: 2;
img {
top: -120px;
}
}
}
}
}
.highlighted-courses {
@include border-radius(4px);
border-bottom: 1px solid rgb(210,210,210);
@include box-sizing(border-box);
@include clearfix;
margin-bottom: 40px;
margin-bottom: 60px;
width: flex-grid(12);
.course {
@include box-sizing(border-box);
float: left;
width: flex-grid(6);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
> h2 {
background: rgb(245,245,245);
border: 1px solid rgb(220,220,220);
border-top: none;
@include border-bottom-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
color: $lighter-base-font-color;
letter-spacing: 1px;
padding: 15px 10px;
text-align: center;
text-transform: uppercase;
}
&:nth-child(odd) {
margin-right: flex-gutter();
}
.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%));
}
}
.more-info {
margin-bottom: 60px;
width: flex-grid(12);
h2 {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif;
letter-spacing: 1px;
margin-bottom: 30px;
padding-bottom: 10px;
margin-bottom: 20px;
}
.news {
......@@ -211,9 +283,9 @@
> article {
background: rgb(240,240,240);
@include inline-block;
height: 300px;
height: 150px;
margin-right: flex-gutter();
width: flex-grid(4);
width: flex-grid(3);
&:last-child {
margin-right: 0px;
......
lms/static/sass/_shared_footer.scss
footer {
background: rgb(240,240,240);
padding: 20px 0px 0px;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 40px;
width: flex-grid(12);
&.fixed-bottom {
position: absolute;
bottom: 0px;
max-width: 100%;
position: absolute;
}
nav {
border-top: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
@include clearfix;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
padding: 20px 10px 0;
width: flex-grid(12);
a.logo {
@include box-sizing(border-box);
display: block;
.copyright {
float: left;
height: 100%;
margin: 3px 15px 0px 0px;
}
padding-top: 2px;
ol {
float: left;
font-size: 0em;
margin-top: 6px;
a.logo {
@include box-sizing(border-box);
@include inline-block;
float: left;
height: 100%;
margin-right: 14px;
margin-top: 1px;
padding-right: 15px;
position: relative;
vertical-align: middle;
&.social {
float: right;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -2px;
width: 1px;
}
li {
border: none;
padding: 0px 5px;
img {
position: relative;
z-index: 2;
}
}
a:hover {
opacity: 0.7;
}
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
@include inline-block;
margin: 0 auto;
padding-top: 4px;
text-align: center;
vertical-align: middle;
a {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
margin-left: 5px;
text-decoration: underline;
}
}
}
ol {
float: right;
font-size: 0em;
li {
border-left: 1px solid rgb(200,200,200);
//border-right: 1px solid rgb(200,200,200);
@include inline-block;
list-style: none;
padding: 0px 15px;
position: relative;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -5px;
width: 1px;
}
a:link, a:visited {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
padding: 5px 0px;
padding: 6px 0px;
}
}
}
}
.copyright {
height: 50px;
margin-top: 80px;
width: 100%;
hr {
@extend .faded-hr-divider-light;
border: none;
margin: 0px;
position: relative;
z-index: 2;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
top: -1px;
}
}
&.social {
border: none;
margin: 0 0 0 5px;
padding: 0;
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin: 0 auto;
padding-top: 15px;
text-align: center;
max-width: 1200px;
&::after {
display: none;
}
a {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin-left: 5px;
a {
padding: 0 0 0 10px;
@include transition(all, 0.1s, linear);
&:hover {
opacity: 0.7;
}
}
}
}
}
}
......
lms/static/sass/bourbon/_bourbon.scss
......@@ -7,7 +7,6 @@
@import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade";
@import "functions/transition-property-name";
// CSS3 Mixins
@import "css3/animation";
......@@ -22,7 +21,6 @@
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/prefixer";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
......@@ -31,9 +29,7 @@
// Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
@import "addons/font-face";
@import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/timing-functions";
lms/static/sass/bourbon/addons/_button.scss
......@@ -34,11 +34,6 @@
@include pill($base-color);
}
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
......@@ -67,16 +62,15 @@
@include border-radius (3px);
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline-block;
display: inline;
font-size: 11px;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: 7px 18px;
text-decoration: none;
padding: 6px 18px 7px;
text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box;
&:hover:not(:disabled) {
&:hover {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
......@@ -92,7 +86,7 @@
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
&:active:not(:disabled) {
&:active {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
......@@ -139,16 +133,16 @@
@include border-radius(5px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline-block;
display: inline;
font-size: 14px;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: 8px 20px;
padding: 7px 20px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
&:hover:not(:disabled) {
&:hover {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
......@@ -168,7 +162,7 @@
$fourth-stop-hover 100%);
}
&:active:not(:disabled) {
&:active {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true {
......@@ -210,18 +204,17 @@
@include border-radius(16px);
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
color: $color;
display: inline-block;
display: inline;
font-size: 11px;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: 5px 16px;
padding: 3px 16px 5px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box;
&:hover:not(:disabled) {
&:hover {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
......@@ -249,7 +242,7 @@
-webkit-background-clip: padding-box;
}
&:active:not(:disabled) {
&:active {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
......@@ -271,3 +264,4 @@
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
lms/static/sass/bourbon/addons/_font-face.scss deleted 100644 → 0
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
\ No newline at end of file
lms/static/sass/bourbon/addons/_hide-text.scss deleted 100644 → 0
@mixin hide-text {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
// A CSS image replacement method that does not require the use of text-indent.
//
// Examples
//
// .ir {
// @include hide-text;
// }
lms/static/sass/bourbon/addons/_position.scss
......@@ -12,31 +12,19 @@
position: $position;
@if $top == auto {
top: $top;
}
@else if not(unitless($top)) {
@if not(unitless($top)) {
top: $top;
}
@if $right == auto {
right: $right;
}
@else if not(unitless($right)) {
@if not(unitless($right)) {
right: $right;
}
@if $bottom == auto {
bottom: $bottom;
}
@else if not(unitless($bottom)) {
@if not(unitless($bottom)) {
bottom: $bottom;
}
@if $left == auto {
left: $left;
}
@else if not(unitless($left)) {
@if not(unitless($left)) {
left: $left;
}
}
lms/static/sass/bourbon/css3/_animation.scss
......@@ -11,7 +11,9 @@
$full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
@include prefixer(animation, $full);
-webkit-animation: $full;
-moz-animation: $full;
animation: $full;
}
// Individual Animation Properties
......@@ -24,7 +26,9 @@
$full: compact($name-1, $name-2, $name-3, $name-4,
$name-5, $name-6, $name-7, $name-8, $name-9);
@include prefixer(animation-name, $full);
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
}
......@@ -37,7 +41,9 @@
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
@include prefixer(animation-duration, $full);
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
}
......@@ -51,7 +57,9 @@
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
@include prefixer(animation-timing-function, $full);
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
}
......@@ -65,7 +73,9 @@
$full: compact($value-1, $value-2, $value-3, $value-4,
$value-5, $value-6, $value-7, $value-8, $value-9);
@include prefixer(animation-iteration-count, $full);
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
}
......@@ -79,7 +89,9 @@
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
@include prefixer(animation-direction, $full);
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
}
......@@ -93,7 +105,9 @@
$full: compact($state-1, $state-2, $state-3, $state-4,
$state-5, $state-6, $state-7, $state-8, $state-9);
@include prefixer(animation-play-state, $full);
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
}
......@@ -106,7 +120,9 @@
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
@include prefixer(animation-delay, $full);
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
}
......@@ -121,5 +137,35 @@
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
@include prefixer(animation-fill-mode, $full);
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
}
// Deprecated
@mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name);
$length-of-time: length($time);
$length-of-motion: length($motion);
@if $length-of-name > 1 {
@include animation-name(zip($name));
} @else {
@include animation-name( $name);
}
@if $length-of-time > 1 {
@include animation-duration(zip($time));
} @else {
@include animation-duration( $time);
}
@if $length-of-motion > 1 {
@include animation-timing-function(zip($motion));
} @else {
@include animation-timing-function( $motion);
}
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
}
lms/static/sass/bourbon/css3/_appearance.scss
@mixin appearance ($value) {
@include prefixer(appearance, $value, webkit, moz, ms, o);
-webkit-appearance: $value;
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
}
lms/static/sass/bourbon/css3/_background-size.scss
......@@ -7,5 +7,9 @@
$full: compact($length-1, $length-2, $length-3, $length-4,
$length-5, $length-6, $length-7, $length-8, $length-9);
@include prefixer(background-size, $full, webkit, moz, ms, o);
-webkit-background-size: $full;
-moz-background-size: $full;
-ms-background-size: $full;
-o-background-size: $full;
background-size: $full;
}
lms/static/sass/bourbon/css3/_border-radius.scss
@mixin border-radius ($radii) {
@include prefixer(border-radius, $radii);
-webkit-border-radius: $radii;
-moz-border-radius: $radii;
-ms-border-radius: $radii;
-o-border-radius: $radii;
border-radius: $radii;
}
@mixin border-top-left-radius($radii) {
-moz-border-radius-topleft: $radii;
@include prefixer(border-top-left-radius, $radii);
-webkit-border-top-left-radius: $radii;
-moz-border-top-left-radius: $radii;
-moz-border-radius-topleft: $radii;
-ms-border-top-left-radius: $radii;
-o-border-top-left-radius: $radii;
border-top-left-radius: $radii;
}
@mixin border-top-right-radius($radii) {
-moz-border-radius-topright: $radii;
@include prefixer(border-top-right-radius, $radii);
-webkit-border-top-right-radius: $radii;
-moz-border-top-right-radius: $radii;
-moz-border-radius-topright: $radii;
-ms-border-top-right-radius: $radii;
-o-border-top-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-left-radius($radii) {
-moz-border-radius-bottomleft: $radii;
@include prefixer(border-bottom-left-radius, $radii);
-webkit-border-bottom-left-radius: $radii;
-moz-border-bottom-left-radius: $radii;
-moz-border-radius-bottomleft: $radii;
-ms-border-bottom-left-radius: $radii;
-o-border-bottom-left-radius: $radii;
border-bottom-left-radius: $radii;
}
@mixin border-bottom-right-radius($radii) {
@include prefixer(border-bottom-right-radius, $radii);
-webkit-border-bottom-right-radius: $radii;
-moz-border-bottom-right-radius: $radii;
-moz-border-radius-bottomright: $radii;
-ms-border-bottom-right-radius: $radii;
-o-border-bottom-right-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-top-radius($radii) {
......
lms/static/sass/bourbon/css3/_box-shadow.scss
......@@ -8,5 +8,7 @@
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
@include prefixer(box-shadow, $full);
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
box-shadow: $full;
}
lms/static/sass/bourbon/css3/_box-sizing.scss
@mixin box-sizing ($box) {
// content-box | border-box | inherit
@include prefixer(box-sizing, $box);
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
}
lms/static/sass/bourbon/css3/_columns.scss
@mixin columns($arg: auto) {
// <column-count> || <column-width>
@include prefixer(columns, $arg);
-webkit-columns: $arg;
-moz-columns: $arg;
columns: $arg;
}
@mixin column-count($int: auto) {
// auto || integer
@include prefixer(column-count, $int);
-webkit-column-count: $int;
-moz-column-count: $int;
column-count: $int;
}
@mixin column-gap($length: normal) {
// normal || length
@include prefixer(column-gap, $length);
-webkit-column-gap: $length;
-moz-column-gap: $length;
column-gap: $length;
}
@mixin column-fill($arg: auto) {
// auto || length
@include prefixer(columns-fill, $arg);
-webkit-columns-fill: $arg;
-moz-columns-fill: $arg;
columns-fill: $arg;
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg);
-webkit-column-rule: $arg;
-moz-column-rule: $arg;
column-rule: $arg;
}
@mixin column-rule-color($color) {
@include prefixer(column-rule-color, $color);
-webkit-column-rule-color: $color;
-moz-column-rule-color: $color;
column-rule-color: $color;
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style);
-webkit-column-rule-style: $style;
-moz-column-rule-style: $style;
column-rule-style: $style;
}
@mixin column-rule-width ($width: none) {
@include prefixer(column-rule-width, $width);
-webkit-column-rule-width: $width;
-moz-column-rule-width: $width;
column-rule-width: $width;
}
@mixin column-span($arg: none) {
// none || all
@include prefixer(column-span, $arg);
-webkit-column-span: $arg;
-moz-column-span: $arg;
column-span: $arg;
}
@mixin column-width($length: auto) {
// auto || length
@include prefixer(column-width, $length);
-webkit-column-width: $length;
-moz-column-width: $length;
column-width: $length;
}
lms/static/sass/bourbon/css3/_flex-box.scss
......@@ -16,37 +16,52 @@
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
@include prefixer(box-orient, $orient);
-webkit-box-orient: $orient;
-moz-box-orient: $orient;
box-orient: $orient;
}
@mixin box-pack($pack: start) {
// start|end|center|justify
@include prefixer(box-pack, $pack);
-webkit-box-pack: $pack;
-moz-box-pack: $pack;
box-pack: $pack;
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
@include prefixer(box-align, $align);
-webkit-box-align: $align;
-moz-box-align: $align;
box-align: $align;
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
@include prefixer(box-direction, $direction);
-webkit-box-direction: $direction;
-moz-box-direction: $direction;
box-direction: $direction;
}
@mixin box-lines($lines: single) {
// single|multiple
@include prefixer(box-lines, $lines);
-webkit-box-lines: $lines;
-moz-box-lines: $lines;
box-lines: $lines;
}
@mixin box-ordinal-group($int: 1) {
@include prefixer(box-ordinal-group, $int);
@mixin box-ordinal-group($integer: 1) {
-webkit-box-ordinal-group: $integer;
-moz-box-ordinal-group: $integer;
box-ordinal-group: $integer;
}
@mixin box-flex($value: 0.0) {
@include prefixer(box-flex, $value);
-webkit-box-flex: $value;
-moz-box-flex: $value;
box-flex: $value;
}
@mixin box-flex-group($int: 1) {
@include prefixer(box-flex-group, $int);
@mixin box-flex-group($integer: 1) {
-webkit-box-flex-group: $integer;
-moz-box-flex-group: $integer;
box-flex-group: $integer;
}
lms/static/sass/bourbon/css3/_inline-block.scss
// Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
......
lms/static/sass/bourbon/css3/_linear-gradient.scss
......@@ -3,8 +3,6 @@
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$deprecated-pos1: left top,
$deprecated-pos2: left bottom,
$fallback: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
......@@ -27,7 +25,7 @@
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full);
background-image: -ms-linear-gradient($pos, $full);
......
lms/static/sass/bourbon/css3/_prefixer.scss deleted 100644 → 0
@mixin prefixer ($property, $value,
$webkit: true,
$moz: true,
$ms: false,
$o: false,
$spec: true) {
@if $webkit { -webkit-#{$property}: $value; }
@if $moz { -moz-#{$property}: $value; }
@if $ms { -ms-#{$property}: $value; }
@if $o { -o-#{$property}: $value; }
@if $spec { #{$property}: $value; }
}
lms/static/sass/bourbon/css3/_radial-gradient.scss
// Requires Sass 3.1+
@mixin radial-gradient($G1, $G2,
@mixin radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$pos: 50% 50%,
$shape-size: ellipse cover,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 460,
$fallback: false) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
background-image: -moz-radial-gradient($pos, $shape-size, $full);
background-image: -ms-radial-gradient($pos, $shape-size, $full);
......
lms/static/sass/bourbon/css3/_transform.scss
@mixin transform($property: none) {
// none | <transform-function>
@include prefixer(transform, $property, webkit, moz, ms, o);
-webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit, moz, ms, o);
-webkit-transform-origin: $axes;
-moz-transform-origin: $axes;
-ms-transform-origin: $axes;
-o-transform-origin: $axes;
transform-origin: $axes;
}
lms/static/sass/bourbon/css3/_transition.scss
......@@ -3,18 +3,38 @@
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
@mixin transition ($prop-1: all 0.15s ease-out 0,
$prop-2: false, $prop-3: false,
$prop-4: false, $prop-5: false,
$prop-6: false, $prop-7: false,
$prop-8: false, $prop-9: false)
{
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
@include prefixer(transition, $full, webkit, moz, ms, o);
}
// Detect # of args passed into each variable
$length-of-property: length($property);
$length-of-duration: length($duration);
$length-of-timing-function: length($timing-function);
$length-of-delay: length($delay);
@if $length-of-property > 1 {
@include transition-property(zip($property)); }
@else {
@include transition-property( $property);
}
@if $length-of-duration > 1 {
@include transition-duration(zip($duration)); }
@else {
@include transition-duration( $duration);
}
@if $length-of-timing-function > 1 {
@include transition-timing-function(zip($timing-function)); }
@else {
@include transition-timing-function( $timing-function);
}
@if $length-of-delay > 1 {
@include transition-delay(zip($delay)); }
@else {
@include transition-delay( $delay);
}
}
@mixin transition-property ($prop-1: all,
......@@ -26,11 +46,11 @@
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
-webkit-transition-property: transition-property-names($full, 'webkit');
-moz-transition-property: transition-property-names($full, 'moz');
-ms-transition-property: transition-property-names($full, 'ms');
-o-transition-property: transition-property-names($full, 'o');
transition-property: transition-property-names($full, false);
-webkit-transition-property: $full;
-moz-transition-property: $full;
-ms-transition-property: $full;
-o-transition-property: $full;
transition-property: $full;
}
@mixin transition-duration ($time-1: 0,
......@@ -42,7 +62,11 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
@include prefixer(transition-duration, $full, webkit, moz, ms, o);
-webkit-transition-duration: $full;
-moz-transition-duration: $full;
-ms-transition-duration: $full;
-o-transition-duration: $full;
transition-duration: $full;
}
@mixin transition-timing-function ($motion-1: ease,
......@@ -55,7 +79,11 @@
$motion-6, $motion-7, $motion-8, $motion-9);
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
-webkit-transition-timing-function: $full;
-moz-transition-timing-function: $full;
-ms-transition-timing-function: $full;
-o-transition-timing-function: $full;
transition-timing-function: $full;
}
@mixin transition-delay ($time-1: 0,
......@@ -67,6 +95,10 @@
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
@include prefixer(transition-transition-delay, $full, webkit, moz, ms, o);
-webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
-o-transition-delay: $full;
transition-delay: $full;
}
lms/static/sass/bourbon/css3/_user-select.scss
@mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit, moz, ms);
-webkit-user-select: $arg;
-moz-user-select: $arg;
-ms-user-select: $arg;
user-select: $arg;
}
lms/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss
// Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************//
@function deprecated-webkit-gradient($type,
$deprecated-pos1, $deprecated-pos2,
$full,
$deprecated-radius1: false, $deprecated-radius2: false) {
@function deprecated-webkit-gradient($type, $full) {
$gradient-list: ();
$gradient: false;
$full-length: length($full);
......@@ -17,28 +14,23 @@
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma);
}
@else {
@if $i == $full-length {
$percentage: 100%;
}
@else {
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
}
$color-stop: color-stop(unquote($percentage), $gradient);
$gradient-list: join($gradient-list, $color-stop, comma);
}
}
@if $type == radial {
$gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
$gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
}
@else if $type == linear {
$gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
$gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
}
@return $gradient;
}
lms/static/sass/bourbon/functions/_radial-gradient.scss
// This function is required and used by the background-image mixin.
@function radial-gradient($G1, $G2,
@function radial-gradient($pos, $shape-size,
$G1, $G2,
$G3: false, $G4: false,
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false,
$pos: 50% 50%,
$shape-size: ellipse cover,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 50,
$fallback: false) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
$G9: false, $G10: false) {
$type: radial;
$gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
......@@ -60,3 +12,4 @@
@return $type-gradient;
}
lms/static/sass/bourbon/functions/_transition-property-name.scss deleted 100644 → 0
// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
\ No newline at end of file
lms/static/sass/bourbon/lib/bourbon.rb
require "bourbon/generator"
module Bourbon
if defined?(Rails) && defined?(Rails::Engine)
if defined?(Rails)
class Engine < ::Rails::Engine
require 'bourbon/engine'
end
......
lms/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
......@@ -4,9 +4,8 @@ module Bourbon::SassExtensions::Functions::Compact
def compact(*args)
sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List)
list = args.first
args = list.value
sep = list.separator
args = args.first.value
sep = args.first.separator
end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end
......
lms/templates/course.html
......@@ -2,27 +2,55 @@
%for course in courses:
<article class="course">
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
</div>
<div class="inner-wrapper">
<header class="course-preview">
<a href="#">
<hgroup>
<h2>${course.title}</h2>
<p>${course.institution}</p>
</hgroup>
<div href="" class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<hgroup>
<h2>${course.title}</h2>
<p>${",".join(course.instructors)} &mdash; ${course.institution}</p>
<p>${course.id}</p>
</hgroup>
<div class="edit">Register</div>
<section class="meta">
<div class="dates">
<p>Starts: <time>6/10/12</time></p>
<p>Ends: <time>9/23/12</time></p>
</div>
</section>
<div class="meta-info">
<p class="university">HarvardX</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/history.png')}">
</div>
<div class="desc">
<p>An advanced intorduction to analog circuits.</p>
</div>
</section>
</a>
<p><a href="courses/${course.id}/info">Hackish temp link to courseware</a></p>
</div>
</article>
%endfor
<!--
-<article class="course">
- <a href="/course_info">
- <div class="cover">
- <div class="shade"></div>
- <div class="arrow"></div>
- <img src="${static.url('images/history.png')}" />
- </div>
- <section class="info">
- <hgroup>
- <h2>${course.title}</h2>
- <p>${",".join(course.instructors)} &mdash; ${course.institution}</p>
- <p>${course.id}</p>
- <p><a href="courses/${course.id}/info">courseware</a></p>
- </hgroup>
- <div class="edit">Register</div>
- <section class="meta">
- <div class="dates">
- <p>Starts: <time>6/10/12</time></p>
- <p>Ends: <time>9/23/12</time></p>
- </div>
- </section>
- </section>
- </a>
-</article>
-->
lms/templates/courses.html
......@@ -3,7 +3,7 @@
<%namespace name='static' file='static_content.html'/>
<section class="find-courses">
<header>
<header class="search-intro">
<div class="inner-wrapper">
<img src="${static.url('images/edx_bw.png')}" />
<h1>Explore courses from universities around the world.</h1>
......
lms/templates/dashboard.html
......@@ -31,7 +31,7 @@
</header>
</section>
<section class="courses">
<section class="my-courses">
<nav class="course-toggle">
<ol class="filters">
<li class="selected">
......@@ -49,7 +49,7 @@
</ol>
</nav>
<article class="course">
<article class="my-course">
<a href="/info">
<div class="cover">
<div class="shade"></div>
......@@ -79,7 +79,7 @@
</a>
</article>
<article class="course">
<article class="my-course">
<a href="/info">
<div class="cover">
<div class="shade"></div>
......@@ -109,7 +109,7 @@
</a>
</article>
<article class="course">
<article class="my-course">
<a href="/info">
<div class="cover">
<div class="shade"></div>
......
lms/templates/footer.html
......@@ -2,9 +2,12 @@
<footer>
<nav>
<a href="/" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<section class="copyright">
<a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
<ol>
<li>
<a href="/courses">Find Courses</a>
......@@ -18,22 +21,11 @@
<li>
<a href="#">Jobs</a>
</li>
</ol>
<ol class="social">
<li>
<li class="social">
<a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/facebook.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/twitter.png')}" /></a>
</li>
</ol>
</nav>
<section class="copyright">
<hr>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
</footer>
lms/templates/index.html
......@@ -28,20 +28,33 @@
</header>
<section class="university-partners">
<section class="partners">
<a href="/university_profile.html">
<img src="${static.url('images/mit_bw.png')}" />
<div class="name">MITx</div>
</a>
<a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
</a>
</section>
<ol class="partners">
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley_bw.png')}" />
<div class="name">BerkeleyX</div>
</a>
</li>
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/mit_bw.png')}" />
<div class="name">MITx</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
</a>
</li>
</ol>
</section>
<section class="courses">
<%include file="course.html" />
<section class="highlighted-courses">
<h2>Explore courses from edX universities</h2>
<section class="courses">
<%include file="course.html" />
</section>
</section>
<section class="more-info">
......@@ -50,6 +63,7 @@
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</section>
</section>
......
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