Skip to content

E
edx-platform
Commit 7a5d645b by Galen Frechette
Options

removes user avatar, imporves dashboard design

parent 7f4de5df
Showing with 491 additions and 690 deletions
lms/static/sass/_about.scss
.about { .container.about {
margin: 20px auto 120px; padding: 20px 0 120px;
> nav { > nav {
margin-bottom: 80px; margin-bottom: 80px;
...@@ -31,8 +31,6 @@ ...@@ -31,8 +31,6 @@
} }
.vision { .vision {
//display: none;
h1 + hr { h1 + hr {
margin-bottom: 80px; margin-bottom: 80px;
} }
......
lms/static/sass/_dashboard.scss
.dashboard { .dashboard {
@include clearfix; @include clearfix;
margin: 40px 10px; padding: 60px 0px 120px;
.sidebar { .profile-sidebar {
background: rgb(250,250,250); background: transparent;
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
float: left; float: left;
width: 250px; margin-right: flex-gutter();
width: flex-grid(3);
@media screen and (max-width: 768px) {
float: none;
margin: 0 0 30px 0;
position: static;
width: flex-grid(12);
}
header.profile { header.profile {
h1.user-name {
border: 1px solid rgb(200,200,200);
@include border-radius(4px);
@include box-sizing(border-box);
color: $base-font-color;
font: bold 1.4rem/1.6rem $sans-serif;
margin: 0px;
overflow: hidden;
padding: 15px 10px 17px;
text-wrap: nowrap;
text-overflow: ellipsis;
text-transform: none;
width: flex-grid(12);
}
.user-info { .user-info {
@include clearfix; @include clearfix;
padding: 10px; padding: 0px 10px;
.avatar { > ul {
background: rgb(220,220,220); background: rgb(250,250,250);
border: 1px solid rgb(180,180,180); border: 1px solid rgb(220,220,220);
@include border-radius(4px); border-top: none;
@include border-bottom-radius(4px);
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 0 15px 0; @include clearfix;
max-width: 100%; margin: 0px;
overflow: hidden; padding: 0px 10px 20px;
width: flex-grid(12);
@media screen and (max-width: 768px) {
margin: 0px;
margin-right: flex-gutter();
position: absolute;
width: 100px;
}
img {
@include border-radius(4px);
display: block;
max-width: 100%;
}
}
.info {
@media screen and (max-width: 768px) {
@include box-sizing(border-box);
float: left;
min-height: 100px;
padding-left: 110px;
width: 100%;
}
h2 {
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4));
font: bold 1.2rem/1.4rem $sans-serif;
margin-bottom: 15px;
overflow: hidden;
padding-bottom: 15px;
text-align: center;
text-wrap: nowrap;
text-overflow: ellipsis;
@media screen and (max-width: 768px) {
text-align: left;
}
}
> ul {
@include clearfix;
margin: 0px;
padding: 0 0 10px 0;
@media screen and (max-width: 768px) {
padding: 0px;
}
li {
list-style: none;
margin-bottom: 10px;
@media screen and (max-width: 768px) {
float: left;
margin-right: 10px;
}
&:last-child { li {
margin-bottom: 0px; list-style: none;
}
h3 { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: bold 1rem/1.2rem $sans-serif; font: 300 1.2rem/1.6rem $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.8); text-shadow: 0 1px rgba(255,255,255, 0.8);
span { span {
font-weight: normal; font-weight: 700;
text-transform: none; margin-left: 5px;
} text-transform: none;
} }
} }
} }
...@@ -109,29 +60,20 @@ ...@@ -109,29 +60,20 @@
} }
.my-courses { .my-courses {
float: left;
margin: 0px; margin: 0px;
padding-left: 270px; width: flex-grid(9);
@media screen and (max-width: 768px) {
padding: 0px;
}
@media only screen and (max-width: 768px) {
float: none;
width: flex-grid(12);
}
.empty-dashboard-message { .empty-dashboard-message {
background: rgb(250,250,250); border-top: 1px solid rgb(210,210,210);
border: 1px solid rgb(210,210,210); padding: 80px 0px;
@include border-radius(4px);
padding: 40px 0px;
text-align: center; text-align: center;
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font-style: italic; font-style: italic;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
-webkit-font-smoothing: antialiased;
a { a {
background: rgb(240,240,240); background: rgb(240,240,240);
...@@ -152,62 +94,46 @@ ...@@ -152,62 +94,46 @@
.my-course { .my-course {
background: rgb(250,250,250); background: rgb(250,250,250);
border: 1px solid rgb(220,220,220); @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(243,243,243)));
border: 1px solid rgb(190,190,190);
@include border-radius(3px); @include border-radius(3px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; @include clearfix;
font-size: 0em; font-size: 0em;
margin-right: flex-gutter(); margin-right: flex-gutter();
min-height: 120px;
margin-bottom: 25px; margin-bottom: 25px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:last-child { &:last-child {
margin-bottom: none; margin-bottom: none;
} }
> a {
@include clearfix;
display: block;
padding: 10px;
position: relative;
}
.cover { .cover {
background: rgb(225,225,225); background: rgb(225,225,225);
border: 1px solid rgb(150,150,150); background-size: cover;
@include border-radius(4px); background-position: center center;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); border-right: 1px solid rgb(150,150,150);
@include border-left-radius(3px);
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.6), 1px 0 0 0 rgba(255,255,255, 0.8));
float: left; float: left;
height: 100px; height: 120px;
margin: 0px; margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative; position: relative;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 100px; width: 200px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade { .shade {
background: rgba(0,0,0, 0.3); @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
rgba(0,0,0, 0.3) 100%));
@include border-radius(4px); @include border-radius(4px);
bottom: 0px; bottom: 0px;
content: ""; content: "";
display: block; display: block;
left: 0px; left: 0px;
opacity: 0;
position: absolute; position: absolute;
top: 0px; top: 0px;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
...@@ -215,194 +141,155 @@ ...@@ -215,194 +141,155 @@
} }
.arrow { .arrow {
border-top: 1px solid; border-top: 8px solid;
border-left: 1px solid; border-left: 8px solid;
border-color: rgb(255,255,255); border-color: rgba(0,0,0, 0.7);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6)); @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.8), -1px 0 1px 0 rgba(255,255,255, 0.8));
content: ""; content: "";
display: block; display: block;
height: 55px; height: 55px;
left: 40px; left: 50%;
margin-left: -10px;
margin-top: -30px;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 23px; top: 50%;
@include transform(rotate(-45deg)); @include transform(rotate(-45deg));
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 55px; width: 55px;
} }
img { &:hover {
@include border-radius(4px); .shade {
display: block; background: rgba(255,255,255, 0.1);
min-height: 100%; @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
min-width: 100%; rgba(0,0,0, 0.3) 100%));
width: 100%; }
} }
} }
.info { .info {
left: 130px; left: 201px;
padding: 0px 10px;
position: absolute; position: absolute;
right: 10px; right: 0px;
top: 10px; top: 0px;
z-index: 2; z-index: 2;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup { > hgroup {
border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-bottom: 20px;
padding: 15px 0px;
width: 100%; width: 100%;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 { h2 {
color: $base-font-color; @include inline-block;
font: bold 1.4rem/1.6rem $sans-serif; margin-bottom: 0px;
margin-bottom: 2px; vertical-align: middle;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6); a {
@include transition(color, 0.15s, linear); color: $base-font-color;
text-overflow: ellipsis; font: 800 1.6rem/2rem $sans-serif;
white-space: nowrap; text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: $blue;
text-decoration: underline;
}
}
} }
h3 { h3 {
color: $lighter-base-font-color; @include inline-block;
font: italic bold 1.2rem/1.6rem $sans-serif; margin-right: 10px;
overflow: hidden; vertical-align: middle;
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) { a {
display: none; background: rgba(255,255,255, 1);
} border: 1px solid rgb(180,180,180);
@include border-radius(3px);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
color: $lighter-base-font-color;
display: block;
font: italic 800 1.2rem/1.6rem $sans-serif;
padding: 5px 10px;
&:hover { &:hover {
background: rgb(255,255,255); color: $blue;
color: $blue; }
}
} }
} }
.meta { .meta {
border-top: 1px solid rgb(200,200,200); @include clearfix;
@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; position: relative;
@include transition(opacity, 0.15s, linear); @include transition(opacity, 0.15s, linear);
width: 100%; width: 100%;
&:hover { .course-work-icon {
opacity: 0.9; background: rgb(200,200,200);
} float: left;
font: 300 1.2rem/1.6rem $sans-serif;
> * { height: 22px;
height: 18px; width: 22px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
} }
.complete { .complete {
left: 0px; float: right;
padding-top: 2px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif; font: italic 1.2rem/1.4rem $serif;
@include inline-block; @include inline-block;
text-align: right; text-align: right;
text-shadow: 0 1px rgba(255,255,255, 0.6);
-webkit-font-smoothing: antialiased;
&:first-child { .completeness {
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; color: $base-font-color;
font-family: $sans-serif; font: 700 1.2rem/1.4rem $sans-serif;
margin-left: 3px; margin-right: 5px;
} }
} }
} }
.progress { .progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px; left: 40px;
right: 140px; position: absolute;
right: 110px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter { .meter {
background: rgb(230,230,230); background: rgb(245,245,245);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(160,160,160);
@include border-radius(3px); @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
@include box-sizing(border-box); @include box-sizing(border-box);
height: 100%; @include border-radius(4px);
height: 22px;
margin: 0 auto;
padding: 2px; padding: 2px;
width: 100%;
.meter-fill { .meter-fill {
@include border-radius(3px); background: rgb(120,120,120);
background: rgb(210,210,210); @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255, 0.15) 50%,
rgba(255,255,255, 0.15) 75%,
transparent 75%));
background-size: 40px 40px;
background-repeat: repeat-x;
border: 1px solid rgb(115,115,115);
@include border-radius(4px);
@include box-sizing(border-box);
content: "";
display: block;
height: 100%; height: 100%;
width: 60%; width: 60%;
} }
...@@ -412,8 +299,6 @@ ...@@ -412,8 +299,6 @@
} }
&:hover { &:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
.edit { .edit {
background: rgb(220,220,220); background: rgb(220,220,220);
......
lms/static/sass/_shared_list_of_courses.scss
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
h2 { h2 {
color: $base-font-color; color: $base-font-color;
font: bold 1.2rem/1.6rem $sans-serif; font: 800 1.2rem/1.6rem $sans-serif;
padding-top: 10px; padding-top: 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis; text-overflow: ellipsis;
......
lms/static/sass/application.css
...@@ -467,7 +467,7 @@ a:link, a:visited { ...@@ -467,7 +467,7 @@ a:link, a:visited {
.container:after { .container:after {
clear: both; } clear: both; }
.faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .course-info .container nav::after, .course-info .details .inner-wrapper > section::after, .course-info .details .course-staff .teacher::after, .about > nav::after { .faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .course-info .container nav::after, .course-info .details .inner-wrapper > section::after, .course-info .details .course-staff .teacher::after, .container.about > nav::after {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
...@@ -1971,7 +1971,7 @@ header.global { ...@@ -1971,7 +1971,7 @@ header.global {
top: 0px; } top: 0px; }
.highlighted-courses .courses .course header.course-preview > a hgroup h2, .find-courses .courses .course header.course-preview > a hgroup h2 { .highlighted-courses .courses .course header.course-preview > a hgroup h2, .find-courses .courses .course header.course-preview > a hgroup h2 {
color: #3c3c3c; color: #3c3c3c;
font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; font: 800 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
padding-top: 10px; padding-top: 10px;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.6);
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -2850,140 +2850,95 @@ header.global { ...@@ -2850,140 +2850,95 @@ header.global {
.dashboard { .dashboard {
zoom: 1; zoom: 1;
margin: 40px 10px; } padding: 60px 0px 120px; }
.dashboard:before, .dashboard:after { .dashboard:before, .dashboard:after {
content: ""; content: "";
display: table; } display: table; }
.dashboard:after { .dashboard:after {
clear: both; } clear: both; }
.dashboard .sidebar, .dashboard section.course-index { .dashboard .profile-sidebar {
background: #fafafa; background: transparent;
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; float: left;
width: 250px; } margin-right: 2.024%;
@media screen and (max-width: 768px) { width: 23.482%; }
.dashboard .sidebar, .dashboard section.course-index { .dashboard .profile-sidebar header.profile h1.user-name {
float: none; border: 1px solid #c8c8c8;
margin: 0 0 30px 0; -webkit-border-radius: 4px;
position: static; -moz-border-radius: 4px;
width: 100%; } } -ms-border-radius: 4px;
.dashboard .sidebar header.profile .user-info, .dashboard section.course-index header.profile .user-info { -o-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #3c3c3c;
font: bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin: 0px;
overflow: hidden;
padding: 15px 10px 17px;
text-wrap: nowrap;
text-overflow: ellipsis;
text-transform: none;
width: 100%; }
.dashboard .profile-sidebar header.profile .user-info {
zoom: 1; zoom: 1;
padding: 10px; } padding: 0px 10px; }
.dashboard .sidebar header.profile .user-info:before, .dashboard section.course-index header.profile .user-info:before, .dashboard .sidebar header.profile .user-info:after, .dashboard section.course-index header.profile .user-info:after { .dashboard .profile-sidebar header.profile .user-info:before, .dashboard .profile-sidebar header.profile .user-info:after {
content: ""; content: "";
display: table; } display: table; }
.dashboard .sidebar header.profile .user-info:after, .dashboard section.course-index header.profile .user-info:after { .dashboard .profile-sidebar header.profile .user-info:after {
clear: both; } clear: both; }
.dashboard .sidebar header.profile .user-info .avatar, .dashboard section.course-index header.profile .user-info .avatar { .dashboard .profile-sidebar header.profile .user-info > ul {
background: #dcdcdc; background: #fafafa;
border: 1px solid #b4b4b4; border: 1px solid #dcdcdc;
-webkit-border-radius: 4px; border-top: none;
-moz-border-radius: 4px; -webkit-border-bottom-left-radius: 4px;
-ms-border-radius: 4px; -moz-border-bottom-left-radius: 4px;
-o-border-radius: 4px; -moz-border-radius-bottomleft: 4px;
border-radius: 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;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0 0 15px 0;
max-width: 100%;
overflow: hidden; }
@media screen and (max-width: 768px) {
.dashboard .sidebar header.profile .user-info .avatar, .dashboard section.course-index header.profile .user-info .avatar {
margin: 0px;
margin-right: 2.024%;
position: absolute;
width: 100px; } }
.dashboard .sidebar header.profile .user-info .avatar img, .dashboard section.course-index header.profile .user-info .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
max-width: 100%; }
@media screen and (max-width: 768px) {
.dashboard .sidebar header.profile .user-info .info, .dashboard section.course-index header.profile .user-info .info {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
min-height: 100px;
padding-left: 110px;
width: 100%; } }
.dashboard .sidebar header.profile .user-info .info h2, .dashboard section.course-index header.profile .user-info .info h2 {
border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4);
font: bold 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
margin-bottom: 15px;
overflow: hidden;
padding-bottom: 15px;
text-align: center;
text-wrap: nowrap;
text-overflow: ellipsis; }
@media screen and (max-width: 768px) {
.dashboard .sidebar header.profile .user-info .info h2, .dashboard section.course-index header.profile .user-info .info h2 {
text-align: left; } }
.dashboard .sidebar header.profile .user-info .info > ul, .dashboard section.course-index header.profile .user-info .info > ul {
zoom: 1; zoom: 1;
margin: 0px; margin: 0px;
padding: 0 0 10px 0; } padding: 0px 10px 20px;
.dashboard .sidebar header.profile .user-info .info > ul:before, .dashboard section.course-index header.profile .user-info .info > ul:before, .dashboard .sidebar header.profile .user-info .info > ul:after, .dashboard section.course-index header.profile .user-info .info > ul:after { width: 100%; }
.dashboard .profile-sidebar header.profile .user-info > ul:before, .dashboard .profile-sidebar header.profile .user-info > ul:after {
content: ""; content: "";
display: table; } display: table; }
.dashboard .sidebar header.profile .user-info .info > ul:after, .dashboard section.course-index header.profile .user-info .info > ul:after { .dashboard .profile-sidebar header.profile .user-info > ul:after {
clear: both; } clear: both; }
@media screen and (max-width: 768px) { .dashboard .profile-sidebar header.profile .user-info > ul li {
.dashboard .sidebar header.profile .user-info .info > ul, .dashboard section.course-index header.profile .user-info .info > ul { list-style: none; }
padding: 0px; } } .dashboard .profile-sidebar header.profile .user-info > ul li p {
.dashboard .sidebar header.profile .user-info .info > ul li, .dashboard section.course-index header.profile .user-info .info > ul li {
list-style: none;
margin-bottom: 10px; }
@media screen and (max-width: 768px) {
.dashboard .sidebar header.profile .user-info .info > ul li, .dashboard section.course-index header.profile .user-info .info > ul li {
float: left;
margin-right: 10px; } }
.dashboard .sidebar header.profile .user-info .info > ul li:last-child, .dashboard section.course-index header.profile .user-info .info > ul li:last-child {
margin-bottom: 0px; }
.dashboard .sidebar header.profile .user-info .info > ul li h3, .dashboard section.course-index header.profile .user-info .info > ul li h3 {
color: #a0a0a0; color: #a0a0a0;
font: bold 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.8); } text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
.dashboard .sidebar header.profile .user-info .info > ul li h3 span, .dashboard section.course-index header.profile .user-info .info > ul li h3 span { .dashboard .profile-sidebar header.profile .user-info > ul li p span {
font-weight: normal; font-weight: 700;
margin-left: 5px;
text-transform: none; } text-transform: none; }
.dashboard .my-courses { .dashboard .my-courses {
float: left;
margin: 0px; margin: 0px;
padding-left: 270px; } width: 74.494%; }
@media screen and (max-width: 768px) {
.dashboard .my-courses {
padding: 0px; } }
@media only screen and (max-width: 768px) {
.dashboard .my-courses {
float: none;
width: 100%; } }
.dashboard .my-courses .empty-dashboard-message { .dashboard .my-courses .empty-dashboard-message {
background: #fafafa; border-top: 1px solid #d2d2d2;
border: 1px solid #d2d2d2; padding: 80px 0px;
-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; } text-align: center; }
.dashboard .my-courses .empty-dashboard-message p { .dashboard .my-courses .empty-dashboard-message p {
color: #a0a0a0; color: #a0a0a0;
font-style: italic; font-style: italic;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); } text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-font-smoothing: antialiased; }
.dashboard .my-courses .empty-dashboard-message p a { .dashboard .my-courses .empty-dashboard-message p a {
background: #f0f0f0; background: #f0f0f0;
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
...@@ -3017,19 +2972,26 @@ header.global { ...@@ -3017,19 +2972,26 @@ header.global {
text-shadow: 0 1px rgba(255, 255, 255, 0.6); } text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.dashboard .my-courses .my-course { .dashboard .my-courses .my-course {
background: #fafafa; background: #fafafa;
border: 1px solid #dcdcdc; background-image: -webkit-linear-gradient(-90deg, #fdfdfd, #f3f3f3);
background-image: -moz-linear-gradient(-90deg, #fdfdfd, #f3f3f3);
background-image: -ms-linear-gradient(-90deg, #fdfdfd, #f3f3f3);
background-image: -o-linear-gradient(-90deg, #fdfdfd, #f3f3f3);
background-image: linear-gradient(-90deg, #fdfdfd, #f3f3f3);
border: 1px solid #bebebe;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px; -ms-border-radius: 3px;
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
float: left; zoom: 1;
font-size: 0em; font-size: 0em;
margin-right: 2.024%; margin-right: 2.024%;
min-height: 120px;
margin-bottom: 25px; margin-bottom: 25px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
...@@ -3054,39 +3016,36 @@ header.global { ...@@ -3054,39 +3016,36 @@ header.global {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; } transition-delay: 0; }
@media only screen and (max-width: 768px) { .dashboard .my-courses .my-course:before, .dashboard .my-courses .my-course:after {
.dashboard .my-courses .my-course { content: "";
float: none; display: table; }
margin-right: 0px; .dashboard .my-courses .my-course:after {
width: 100%; } } clear: both; }
.dashboard .my-courses .my-course:last-child { .dashboard .my-courses .my-course:last-child {
margin-bottom: none; } margin-bottom: none; }
.dashboard .my-courses .my-course > a {
zoom: 1;
display: block;
padding: 10px;
position: relative; }
.dashboard .my-courses .my-course > a:before, .dashboard .my-courses .my-course > a:after {
content: "";
display: table; }
.dashboard .my-courses .my-course > a:after {
clear: both; }
.dashboard .my-courses .my-course .cover { .dashboard .my-courses .my-course .cover {
background: #e1e1e1; background: #e1e1e1;
border: 1px solid #969696; background-size: cover;
-webkit-border-radius: 4px; background-position: center center;
-moz-border-radius: 4px; border-right: 1px solid #969696;
-ms-border-radius: 4px; -webkit-border-top-left-radius: 3px;
-o-border-radius: 4px; -moz-border-top-left-radius: 3px;
border-radius: 4px; -moz-border-radius-topleft: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -ms-border-top-left-radius: 3px;
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -o-border-top-left-radius: 3px;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-ms-border-bottom-left-radius: 3px;
-o-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 1px 0 0 0 rgba(255, 255, 255, 0.8);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 1px 0 0 0 rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 1px 0 0 0 rgba(255, 255, 255, 0.8);
float: left; float: left;
height: 100px; height: 120px;
margin: 0px; margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative; position: relative;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
...@@ -3108,12 +3067,13 @@ header.global { ...@@ -3108,12 +3067,13 @@ header.global {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
width: 100px; } width: 200px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .cover {
display: none; } }
.dashboard .my-courses .my-course .cover .shade { .dashboard .my-courses .my-course .cover .shade {
background: rgba(0, 0, 0, 0.3); background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px; -ms-border-radius: 4px;
...@@ -3123,7 +3083,6 @@ header.global { ...@@ -3123,7 +3083,6 @@ header.global {
content: ""; content: "";
display: block; display: block;
left: 0px; left: 0px;
opacity: 0;
position: absolute; position: absolute;
top: 0px; top: 0px;
-webkit-transition-property: all; -webkit-transition-property: all;
...@@ -3148,19 +3107,21 @@ header.global { ...@@ -3148,19 +3107,21 @@ header.global {
transition-delay: 0; transition-delay: 0;
right: 0px; } right: 0px; }
.dashboard .my-courses .my-course .cover .arrow { .dashboard .my-courses .my-course .cover .arrow {
border-top: 1px solid; border-top: 8px solid;
border-left: 1px solid; border-left: 8px solid;
border-color: white; border-color: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), -1px 0 1px 0 rgba(255, 255, 255, 0.8);
-moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), -1px 0 1px 0 rgba(255, 255, 255, 0.8);
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), -1px 0 1px 0 rgba(255, 255, 255, 0.8);
content: ""; content: "";
display: block; display: block;
height: 55px; height: 55px;
left: 40px; left: 50%;
margin-left: -10px;
margin-top: -30px;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 23px; top: 50%;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
...@@ -3187,110 +3148,76 @@ header.global { ...@@ -3187,110 +3148,76 @@ header.global {
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
width: 55px; } width: 55px; }
.dashboard .my-courses .my-course .cover img { .dashboard .my-courses .my-course .cover:hover .shade {
-webkit-border-radius: 4px; background: rgba(255, 255, 255, 0.1);
-moz-border-radius: 4px; background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-ms-border-radius: 4px; background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
-o-border-radius: 4px; background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
border-radius: 4px; background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
display: block; background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); }
min-height: 100%;
min-width: 100%;
width: 100%; }
.dashboard .my-courses .my-course .info { .dashboard .my-courses .my-course .info {
left: 130px; left: 201px;
padding: 0px 10px;
position: absolute; position: absolute;
right: 10px; right: 0px;
top: 10px; top: 0px;
z-index: 2; } z-index: 2; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup { .dashboard .my-courses .my-course .info > hgroup {
border-bottom: 1px solid #d2d2d2;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
padding: 15px 0px;
width: 100%; } width: 100%; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info > hgroup {
margin: 0px; } }
.dashboard .my-courses .my-course .info > hgroup h2 { .dashboard .my-courses .my-course .info > hgroup h2 {
color: #3c3c3c; display: -moz-inline-box;
font: bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; -moz-box-orient: vertical;
margin-bottom: 2px; display: inline-block;
overflow: hidden; vertical-align: baseline;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); zoom: 1;
-webkit-transition-property: color; *display: inline;
-moz-transition-property: color; *vertical-align: auto;
-ms-transition-property: color; margin-bottom: 0px;
-o-transition-property: color; vertical-align: middle; }
transition-property: color; .dashboard .my-courses .my-course .info > hgroup h2 a {
-webkit-transition-duration: 0.15s; color: #3c3c3c;
-moz-transition-duration: 0.15s; font: 800 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif;
-ms-transition-duration: 0.15s; text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-o-transition-duration: 0.15s; text-overflow: ellipsis;
transition-duration: 0.15s; white-space: nowrap; }
-webkit-transition-timing-function: linear; .dashboard .my-courses .my-course .info > hgroup h2 a:hover {
-moz-transition-timing-function: linear; color: #1d9dd9;
-ms-transition-timing-function: linear; text-decoration: underline; }
-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;
text-overflow: ellipsis;
white-space: nowrap; }
.dashboard .my-courses .my-course .info > hgroup h3 { .dashboard .my-courses .my-course .info > hgroup h3 {
color: #a0a0a0; display: -moz-inline-box;
font: italic bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; -moz-box-orient: vertical;
overflow: hidden; display: inline-block;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); vertical-align: baseline;
text-overflow: ellipsis; zoom: 1;
white-space: nowrap; } *display: inline;
.dashboard .my-courses .my-course .info .edit, .dashboard .my-courses .my-course .info .register { *vertical-align: auto;
border: 1px solid #dcdcdc; margin-right: 10px;
background: #e6e6e6; vertical-align: middle; }
color: #a0a0a0; .dashboard .my-courses .my-course .info > hgroup h3 a {
display: block; background: white;
font: normal 12px/14px "Open Sans", Verdana, Geneva, sans-serif; border: 1px solid #b4b4b4;
padding: 6px 10px; -webkit-border-radius: 3px;
position: absolute; -moz-border-radius: 3px;
right: 0px; -ms-border-radius: 3px;
top: 0px; -o-border-radius: 3px;
-webkit-transition-property: all; border-radius: 3px;
-moz-transition-property: all; -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.6);
-ms-transition-property: all; -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.6);
-o-transition-property: all; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.6);
transition-property: all; color: #a0a0a0;
-webkit-transition-duration: 0.15s; display: block;
-moz-transition-duration: 0.15s; font: italic 800 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
-ms-transition-duration: 0.15s; padding: 5px 10px; }
-o-transition-duration: 0.15s; .dashboard .my-courses .my-course .info > hgroup h3 a:hover {
transition-duration: 0.15s; color: #1d9dd9; }
-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; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .edit, .dashboard .my-courses .my-course .info .register {
display: none; } }
.dashboard .my-courses .my-course .info .edit:hover, .dashboard .my-courses .my-course .info .register:hover {
background: white;
color: #1d9dd9; }
.dashboard .my-courses .my-course .info .meta { .dashboard .my-courses .my-course .info .meta {
border-top: 1px solid #c8c8c8; zoom: 1;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
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; position: relative;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
-moz-transition-property: opacity; -moz-transition-property: opacity;
...@@ -3313,101 +3240,93 @@ header.global { ...@@ -3313,101 +3240,93 @@ header.global {
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
width: 100%; } width: 100%; }
.dashboard .my-courses .my-course .info .meta:hover { .dashboard .my-courses .my-course .info .meta:before, .dashboard .my-courses .my-course .info .meta:after {
opacity: 0.9; } content: "";
.dashboard .my-courses .my-course .info .meta > * { display: table; }
height: 18px; .dashboard .my-courses .my-course .info .meta:after {
position: absolute; clear: both; }
top: 15px; } .dashboard .my-courses .my-course .info .meta .course-work-icon {
.dashboard .my-courses .my-course .info .meta p + p { background: #c8c8c8;
margin-top: 0px; } float: left;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
height: 22px;
width: 22px; }
.dashboard .my-courses .my-course .info .meta .complete { .dashboard .my-courses .my-course .info .meta .complete {
left: 0px; } float: right;
padding-top: 2px; }
.dashboard .my-courses .my-course .info .meta .complete p { .dashboard .my-courses .my-course .info .meta .complete p {
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; }
.dashboard .my-courses .my-course .info .meta .complete p span {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .dates p {
color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-align: right; }
.dashboard .my-courses .my-course .info .meta .dates p:first-child {
border-right: 1px solid #c8c8c8;
margin-right: 10px;
padding-right: 10px; }
.dashboard .my-courses .my-course .info .meta .dates p time {
color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; }
.dashboard .my-courses .my-course .info .meta .end-date {
border-left: 1px solid #c8c8c8;
right: 0px;
padding-left: 15px; }
@media only screen and (max-width: 320px) {
.dashboard .my-courses .my-course .info .meta .end-date {
display: none; } }
.dashboard .my-courses .my-course .info .meta .end-date p {
color: #a0a0a0; color: #a0a0a0;
font: normal 1rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
text-align: right; } display: -moz-inline-box;
.dashboard .my-courses .my-course .info .meta .end-date p time { -moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-align: right;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-font-smoothing: antialiased; }
.dashboard .my-courses .my-course .info .meta .complete p .completeness {
color: #3c3c3c; color: #3c3c3c;
font-family: "Open Sans", Verdana, Geneva, sans-serif; font: 700 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
margin-left: 3px; } margin-right: 5px; }
.dashboard .my-courses .my-course .info .meta .progress, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done { .dashboard .my-courses .my-course .info .meta .progress, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
left: 90px; left: 40px;
right: 140px; } position: absolute;
@media only screen and (max-width: 320px) { right: 110px; }
.dashboard .my-courses .my-course .info .meta .progress, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done {
right: 0px; } }
.dashboard .my-courses .my-course .info .meta .progress .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done .meter { .dashboard .my-courses .my-course .info .meta .progress .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some .meter, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done .meter, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done .meter {
background: #e6e6e6; background: #f5f5f5;
border: 1px solid #c8c8c8; border: 1px solid #a0a0a0;
-webkit-border-radius: 3px; -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
-moz-border-radius: 3px; -moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
-ms-border-radius: 3px; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
height: 100%; -webkit-border-radius: 4px;
padding: 2px; } -moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
height: 22px;
margin: 0 auto;
padding: 2px;
width: 100%; }
.dashboard .my-courses .my-course .info .meta .progress .meter .meter-fill, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none .meter .meter-fill, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none .meter .meter-fill, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some .meter .meter-fill, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some .meter .meter-fill, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done .meter .meter-fill, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done .meter .meter-fill { .dashboard .my-courses .my-course .info .meta .progress .meter .meter-fill, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-none .meter .meter-fill, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-none .meter .meter-fill, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-some .meter .meter-fill, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-some .meter .meter-fill, .dashboard .my-courses .my-course .info .meta nav.sequence-nav ol li a.progress-done .meter .meter-fill, nav.sequence-nav ol li .dashboard .my-courses .my-course .info .meta a.progress-done .meter .meter-fill {
-webkit-border-radius: 3px; background: #787878;
-moz-border-radius: 3px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
-ms-border-radius: 3px; background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
-o-border-radius: 3px; background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
border-radius: 3px; background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
background: #d2d2d2; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
background-size: 40px 40px;
background-repeat: repeat-x;
border: 1px solid #737373;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
display: block;
height: 100%; height: 100%;
width: 60%; } width: 60%; }
.dashboard .my-courses .my-course:hover { .dashboard .my-courses .my-course:hover .edit {
background: #f5f5f5; background: #dcdcdc;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); border-color: #bebebe; }
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); .dashboard .my-courses .my-course:hover .cover {
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); } opacity: 1; }
.dashboard .my-courses .my-course:hover .edit { .dashboard .my-courses .my-course:hover .cover .shade, .dashboard .my-courses .my-course:hover .cover .arrow {
background: #dcdcdc;
border-color: #bebebe; }
.dashboard .my-courses .my-course:hover .cover {
opacity: 1; } opacity: 1; }
.dashboard .my-courses .my-course:hover .cover .shade, .dashboard .my-courses .my-course:hover .cover .arrow { .dashboard .my-courses .my-course:hover .meta {
opacity: 1; } opacity: 0.9; }
.dashboard .my-courses .my-course:hover .meta {
opacity: 0.9; }
nav.course-material { nav.course-material {
background: #d2d2d2; background: #d2d2d2;
...@@ -4085,16 +4004,16 @@ nav.course-material { ...@@ -4085,16 +4004,16 @@ nav.course-material {
font-weight: bold; font-weight: bold;
margin-bottom: 15px; } margin-bottom: 15px; }
.about { .container.about {
margin: 20px auto 120px; } padding: 20px 0 120px; }
.about > nav { .container.about > nav {
margin-bottom: 80px; margin-bottom: 80px;
text-align: center; text-align: center;
width: 100%; } width: 100%; }
.about > nav::after { .container.about > nav::after {
content: ""; content: "";
display: block; } display: block; }
.about > nav a { .container.about > nav a {
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
color: #a0a0a0; color: #a0a0a0;
font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif; font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
...@@ -4129,55 +4048,55 @@ nav.course-material { ...@@ -4129,55 +4048,55 @@ nav.course-material {
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
text-transform: lowercase; } text-transform: lowercase; }
.about > nav a:hover, .about > nav a.active, .about > nav nav.sequence-nav ol li a.seq_video_active, nav.sequence-nav ol li .about > nav a.seq_video_active, .about > nav nav.sequence-nav ol li a.seq_other_active, nav.sequence-nav ol li .about > nav a.seq_other_active, .about > nav nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li .about > nav a.seq_vertical_active, .about > nav nav.sequence-nav ol li a.seq_problem_active, nav.sequence-nav ol li .about > nav a.seq_problem_active { .container.about > nav a:hover, .container.about > nav a.active, .container.about > nav nav.sequence-nav ol li a.seq_video_active, nav.sequence-nav ol li .container.about > nav a.seq_video_active, .container.about > nav nav.sequence-nav ol li a.seq_other_active, nav.sequence-nav ol li .container.about > nav a.seq_other_active, .container.about > nav nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li .container.about > nav a.seq_vertical_active, .container.about > nav nav.sequence-nav ol li a.seq_problem_active, nav.sequence-nav ol li .container.about > nav a.seq_problem_active {
border-color: #c8c8c8; border-color: #c8c8c8;
color: #3c3c3c; } color: #3c3c3c; }
.about .vision h1 + hr { .container.about .vision h1 + hr {
margin-bottom: 80px; } margin-bottom: 80px; }
.about .vision .message { .container.about .vision .message {
zoom: 1; zoom: 1;
margin-bottom: 60px; margin-bottom: 60px;
padding-bottom: 60px; padding-bottom: 60px;
position: relative; } position: relative; }
.about .vision .message:before, .about .vision .message:after { .container.about .vision .message:before, .container.about .vision .message:after {
content: ""; content: "";
display: table; } display: table; }
.about .vision .message:after { .container.about .vision .message:after {
clear: both; } clear: both; }
.about .vision .message hr { .container.about .vision .message hr {
bottom: 0px; bottom: 0px;
margin: 0px; margin: 0px;
position: absolute; position: absolute;
width: 100%; } width: 100%; }
.about .vision .message .photo { .container.about .vision .message .photo {
background: white; background: white;
border: 1px solid #d2d2d2; border: 1px solid #d2d2d2;
padding: 1px; padding: 1px;
width: 31.984%; } width: 31.984%; }
.about .vision .message .photo img { .container.about .vision .message .photo img {
background: #f5f5f5; background: #f5f5f5;
display: block; display: block;
height: 200px; height: 200px;
width: 100%; } width: 100%; }
.about .vision .message.left .photo { .container.about .vision .message.left .photo {
float: left; float: left;
margin-right: 2.024%; } margin-right: 2.024%; }
.about .vision .message.right h2 { .container.about .vision .message.right h2 {
text-align: right; } text-align: right; }
.about .vision .message.right .photo { .container.about .vision .message.right .photo {
float: right; float: right;
margin-left: 2.024%; } margin-left: 2.024%; }
.about .vision .message:last-child { .container.about .vision .message:last-child {
margin-bottom: 0px; } margin-bottom: 0px; }
.about .faq { .container.about .faq {
display: none; display: none;
zoom: 1; } zoom: 1; }
.about .faq:before, .about .faq:after { .container.about .faq:before, .container.about .faq:after {
content: ""; content: "";
display: table; } display: table; }
.about .faq:after { .container.about .faq:after {
clear: both; } clear: both; }
.about .faq nav.categories { .container.about .faq nav.categories {
border-right: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -4186,49 +4105,49 @@ nav.course-material { ...@@ -4186,49 +4105,49 @@ nav.course-material {
margin-right: 2.024%; margin-right: 2.024%;
padding-right: 20px; padding-right: 20px;
width: 23.482%; } width: 23.482%; }
.about .faq nav.categories a { .container.about .faq nav.categories a {
display: block; display: block;
letter-spacing: 1px; letter-spacing: 1px;
margin-right: -20px; margin-right: -20px;
padding: 10px 20px 10px 0; padding: 10px 20px 10px 0;
text-align: right; text-align: right;
text-transform: uppercase; } text-transform: uppercase; }
.about .faq nav.categories a:hover { .container.about .faq nav.categories a:hover {
background: #f5f5f5; } background: #f5f5f5; }
.about .faq .responses { .container.about .faq .responses {
float: left; float: left;
width: 74.494%; } width: 74.494%; }
.about .faq .responses .category { .container.about .faq .responses .category {
padding-top: 40px; } padding-top: 40px; }
.about .faq .responses .category:first-child { .container.about .faq .responses .category:first-child {
padding-top: 0px; } padding-top: 0px; }
.about .faq .responses .category > h2 { .container.about .faq .responses .category > h2 {
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
margin-bottom: 40px; margin-bottom: 40px;
padding-bottom: 20px; } padding-bottom: 20px; }
.about .faq .responses .response { .container.about .faq .responses .response {
margin-bottom: 40px; } margin-bottom: 40px; }
.about .faq .responses .response h3 { .container.about .faq .responses .response h3 {
font-family: "Open Sans", Verdana, Geneva, sans-serif; font-family: "Open Sans", Verdana, Geneva, sans-serif;
font-weight: bold; font-weight: bold;
margin-bottom: 15px; } margin-bottom: 15px; }
.about .press { .container.about .press {
display: none; } display: none; }
.about .press .press-story { .container.about .press .press-story {
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
zoom: 1; zoom: 1;
margin-bottom: 40px; margin-bottom: 40px;
padding-bottom: 40px; } padding-bottom: 40px; }
.about .press .press-story:before, .about .press .press-story:after { .container.about .press .press-story:before, .container.about .press .press-story:after {
content: ""; content: "";
display: table; } display: table; }
.about .press .press-story:after { .container.about .press .press-story:after {
clear: both; } clear: both; }
.about .press .press-story:last-child { .container.about .press .press-story:last-child {
border: none; border: none;
margin: 0px; margin: 0px;
padding: 0px; } padding: 0px; }
.about .press .press-story .article-cover { .container.about .press .press-story .article-cover {
background: white; background: white;
border: 1px solid #787878; border: 1px solid #787878;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -4239,35 +4158,35 @@ nav.course-material { ...@@ -4239,35 +4158,35 @@ nav.course-material {
margin-right: 2.024%; margin-right: 2.024%;
overflow: hidden; overflow: hidden;
width: 14.98%; } width: 14.98%; }
.about .press .press-story .article-cover img { .container.about .press .press-story .article-cover img {
display: block; display: block;
min-height: 100%; min-height: 100%;
width: 100%; } width: 100%; }
.about .press .press-story .press-info { .container.about .press .press-story .press-info {
float: left; float: left;
width: 82.996%; } width: 82.996%; }
.about .press .press-story .press-info header { .container.about .press .press-story .press-info header {
margin-bottom: 15px; } margin-bottom: 15px; }
.about .press .press-story .press-info header h3 { .container.about .press .press-story .press-info header h3 {
font-family: "Open Sans", Verdana, Geneva, sans-serif; font-family: "Open Sans", Verdana, Geneva, sans-serif;
font-weight: bold; } font-weight: bold; }
.about .contact { .container.about .contact {
display: none; display: none;
zoom: 1; zoom: 1;
margin: 0 auto; margin: 0 auto;
width: 82.996%; } width: 82.996%; }
.about .contact:before, .about .contact:after { .container.about .contact:before, .container.about .contact:after {
content: ""; content: "";
display: table; } display: table; }
.about .contact:after { .container.about .contact:after {
clear: both; } clear: both; }
.about .contact .map { .container.about .contact .map {
background: #f5f5f5; background: #f5f5f5;
float: left; float: left;
height: 180px; height: 180px;
margin-right: 2.024%; margin-right: 2.024%;
width: 48.988%; } width: 48.988%; }
.about .contact .address { .container.about .contact .address {
float: left; float: left;
width: 48.988%; } width: 48.988%; }
......
lms/templates/dashboard.html
...@@ -5,35 +5,28 @@ ...@@ -5,35 +5,28 @@
<section class="container dashboard"> <section class="container dashboard">
<section class="sidebar"> <section class="profile-sidebar">
<header class="profile"> <header class="profile">
<h1 class="user-name">${ user.username }</h1>
<section class="user-info"> <section class="user-info">
<div class="avatar"> <ul>
<img src="${static.url('images/profile.jpg')}" /> <li>
</div> <img src=""><p>Email<span>${ user.email }</span></p>
<section class="info"> </li>
<h2>${ user.username }</h2> <li>
<ul> <img src=""><p>Location<span>${ user.profile.location }</span></p>
<li> </li>
<h3>Email: <span>${ user.email }</span></h3> <li>
</li> <img src=""><p>Language<span>${ user.profile.language }</span></p>
<li> </li>
<h3>Location: <span>${ user.profile.location }</span></h3> </ul>
</li>
<li>
<h3>Language: <span>${ user.profile.language }</span></h3>
</li>
</ul>
</section>
</section>
<section class="meta-info">
</section> </section>
</header> </header>
</section> </section>
<section class="my-courses"> <section class="my-courses">
<header> <header>
<h2>My Current Courses</h2> <h2>Current Courses</h2>
</header> </header>
% if len(courses) > 0: % if len(courses) > 0:
...@@ -47,12 +40,11 @@ ...@@ -47,12 +40,11 @@
</div> </div>
<section class="info"> <section class="info">
<hgroup> <hgroup>
<h2>${course.get_about_section("title")}</h2>
% for instructor in course.instructors: % for instructor in course.instructors:
<h3>${course.get_about_section('university')}</h3> <h3>${course.get_about_section('university')}</h3>
% endfor % endfor
<h2>${course.get_about_section("title")}</h2>
</hgroup> </hgroup>
<div class="edit">options</div>
<section class="meta"> <section class="meta">
<div class="complete"> <div class="complete">
<p>60% complete</p> <p>60% complete</p>
...@@ -77,33 +69,40 @@ ...@@ -77,33 +69,40 @@
% endif % endif
<article class="my-course"> <article class="my-course">
<a href="/info"> <a href="/info" class="cover" style="background-image: url('static/images/courses/python.png')">
<div class="cover"> <div class="shade"></div>
<div class="shade"></div> <div class="arrow"></div>
<div class="arrow"></div> </a>
<img src="${static.url('images/python.png')}" /> <section class="info">
</div> <hgroup>
<section class="info"> <h3><a href="">HarvardX</a></h3>
<hgroup> <h2><a href="/info">CS 102 Python</a></h2>
<h2>CS 102 Python</h2> </hgroup>
<p>Adam Smith, Harvard University</p> </section>
</hgroup> </article>
<div class="edit">options</div>
<section class="meta"> <article class="my-course">
<div class="complete"> <a href="/info" class="cover" style="background-image: url('static/images/courses/python.png')">
<p>60% complete</p> <div class="shade"></div>
</div> <div class="arrow"></div>
<div class="progress"> </a>
<div class="meter"> <section class="info">
<div class="meter-fill"></div> <hgroup>
</div> <h3><a href="">HarvardX</a></h3>
</div> <h2><a href="/info">CS 102 Python</a></h2>
<div class="end-date"> </hgroup>
<p>End date: <time>6/10/12</time></p> <section class="meta">
<div src="" class="course-work-icon"></div>
<div class="progress">
<div class="meter">
<div class="meter-fill"></div>
</div> </div>
</section> </div>
<div class="complete">
<p><span class="completeness">60%</span> compleat</p>
</div>
</section> </section>
</a> </section>
</article> </article>
</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