Skip to content

E
edx-platform
Commit 3488e3dd by Galen Frechette
Options

adds icons to course about page, user nav and dashboard, adds styles to activation pages

parent 35769a70
Showing with 457 additions and 193 deletions
lms/static/sass/_course_about.scss
...@@ -358,18 +358,42 @@ ...@@ -358,18 +358,42 @@
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 10px; padding-bottom: 10px;
&:hover {
.icon {
opacity: 1;
}
}
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
float: left; float: left;
font-family: $sans-serif; font-family: $sans-serif;
} }
img { .icon {
background: rgb(230,230,230); background-size: cover;
float: left; float: left;
height: 19px; height: 19px;
margin: 3px 10px 0 0; margin: 2px 10px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
width: 19px; width: 19px;
&.start-icon {
@include background-image(url('/static/images/portal-icons/calendar-icon.png'));
}
&.final-icon {
@include background-image(url('/static/images/portal-icons/pencil-icon.png'));
}
&.length-icon {
@include background-image(url('/static/images/portal-icons/chart-icon.png'));
}
&.number-icon {
@include background-image(url('/static/images/portal-icons/course-info-icon.png'));
}
} }
span { span {
......
lms/static/sass/_dashboard.scss
...@@ -30,27 +30,59 @@ ...@@ -30,27 +30,59 @@
> ul { > ul {
background: rgb(250,250,250); background: rgb(250,250,250);
border: 1px solid rgb(220,220,220); border: 1px solid rgb(200,200,200);
border-top: none; border-top: none;
@include border-bottom-radius(4px); @include border-bottom-radius(4px);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
@include clearfix; @include clearfix;
margin: 0px; margin: 0px;
padding: 0px 10px 20px; padding: 20px 10px 10px;
width: flex-grid(12); width: flex-grid(12);
li { li {
@include clearfix;
border-bottom: 1px dotted rgb(220,220,220);
list-style: none; list-style: none;
margin-bottom: 20px;
padding-bottom: 10px;
&:hover {
.icon {
opacity: 1;
}
}
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
float: left;
font-family: $sans-serif; font-family: $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.8);
span { span {
font-weight: 700; font-weight: 700;
margin-left: 10px; margin-left: 12px;
text-transform: none; }
}
.icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
width: 19px;
&.email-icon {
@include background-image(url('/static/images/portal-icons/email-icon.png'));
}
&.location-icon {
@include background-image(url('/static/images/portal-icons/home-icon.png'));
}
&.language-icon {
@include background-image(url('/static/images/portal-icons/language-icon.png'));
} }
} }
} }
...@@ -254,9 +286,11 @@ ...@@ -254,9 +286,11 @@
.course-work-icon { .course-work-icon {
background: rgb(200,200,200); @include background-image(url('/static/images/portal-icons/pencil-icon.png'));
background-size: cover;
float: left; float: left;
height: 22px; height: 22px;
opacity: 0.7;
width: 22px; width: 22px;
} }
...@@ -280,7 +314,7 @@ ...@@ -280,7 +314,7 @@
.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: 40px; left: 35px;
position: absolute; position: absolute;
right: 130px; right: 130px;
......
lms/static/sass/_home.scss
...@@ -148,7 +148,8 @@ ...@@ -148,7 +148,8 @@
vertical-align: middle; vertical-align: middle;
.play { .play {
background: rgba(255,255,255, 0.6); @include background-image(url('/static/images/portal-icons/video-play-icon.png'));
background-size: cover;
height: 31px; height: 31px;
margin-left: -13px; margin-left: -13px;
margin-top: -15px; margin-top: -15px;
......
lms/static/sass/application.css
...@@ -583,6 +583,16 @@ a:link, a:visited { ...@@ -583,6 +583,16 @@ a:link, a:visited {
background-image: linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); background-image: linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
border: none; } border: none; }
.error-message-colors, .container.activation h1.invalid {
background: #fd5757;
border: 1px solid #ca1111;
color: #8f0e0e; }
.success-message-colors, .container.activation h1.valid {
background: #63ec89;
border: 1px solid #11ca36;
color: #238f0e; }
.animation-home-header-pop-up, .home > header .outer-wrapper { .animation-home-header-pop-up, .home > header .outer-wrapper {
-webkit-animation: home-header-pop-up 1.15s ease-in-out; -webkit-animation: home-header-pop-up 1.15s ease-in-out;
-moz-animation: home-header-pop-up 1.15s ease-in-out; -moz-animation: home-header-pop-up 1.15s ease-in-out;
...@@ -1833,22 +1843,43 @@ header.global { ...@@ -1833,22 +1843,43 @@ header.global {
margin-right: 0px; } margin-right: 0px; }
header.global ol.user { header.global ol.user {
float: right; } float: right; }
header.global ol.user > li.primary {
display: block;
float: left;
margin: 0px; }
header.global ol.user > li.primary > a {
margin: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-ms-border-top-right-radius: 0px;
-o-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
-ms-border-bottom-right-radius: 0px;
-o-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px; }
header.global ol.user > li.primary:last-child > a {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
-ms-border-radius: 0 4px 4px 0;
-o-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
border-left: none; }
header.global ol.user a.user-link { header.global ol.user a.user-link {
padding: 10px 12px 10px 42px; padding: 10px 12px 10px 42px;
position: relative; position: relative;
text-transform: none; } text-transform: none; }
header.global ol.user a.user-link .avatar { header.global ol.user a.user-link .avatar {
background: #dcdcdc; background-image: url("/static/images/portal-icons/home-icon.png");
-webkit-border-radius: 3px; background-image: url("/static/images/portal-icons/home-icon.png");
-moz-border-radius: 3px; background-image: url("/static/images/portal-icons/home-icon.png");
-ms-border-radius: 3px; background-image: url("/static/images/portal-icons/home-icon.png");
-o-border-radius: 3px; background-image: url("/static/images/portal-icons/home-icon.png");
border-radius: 3px; background-size: cover;
border: 1px solid #505050; height: 26px;
-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);
height: 21px;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -1857,61 +1888,57 @@ header.global { ...@@ -1857,61 +1888,57 @@ header.global {
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
left: 8px; left: 8px;
opacity: 0.5;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 7px; top: 4px;
width: 21px; } -webkit-transition-property: all;
header.global ol.user a.user-link .avatar::after { -moz-transition-property: all;
background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); -ms-transition-property: all;
background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); -o-transition-property: all;
background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); transition-property: all;
background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); -webkit-transition-duration: 0.15s;
background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%); -moz-transition-duration: 0.15s;
content: ""; -ms-transition-duration: 0.15s;
display: block; -o-transition-duration: 0.15s;
height: 100%; transition-duration: 0.15s;
position: absolute; -webkit-transition-timing-function: linear;
right: 0px; -moz-transition-timing-function: linear;
top: 0px; -ms-transition-timing-function: linear;
width: 100%; } -o-transition-timing-function: linear;
header.global ol.user a.user-link .avatar img { transition-timing-function: linear;
-webkit-border-radius: 4px; -webkit-transition-delay: 0;
-moz-border-radius: 4px; -moz-transition-delay: 0;
-ms-border-radius: 4px; -ms-transition-delay: 0;
-o-border-radius: 4px; -o-transition-delay: 0;
border-radius: 4px; transition-delay: 0;
display: block; width: 26px; }
min-height: 100%; header.global ol.user a.user-link:hover .avatar {
min-width: 100%; opacity: 0.8; }
height: 100%; }
header.global ol.user ul.dropdown-menu { header.global ol.user ul.dropdown-menu {
background: #fcfcfc;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px; -ms-border-radius: 4px;
-o-border-radius: 4px; -o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
border: 1px solid black; border: 1px solid #646464;
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
display: none; display: none;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
right: 4px; right: 0px;
top: 50px; top: 50px;
width: 150px; width: 170px;
z-index: 3; } z-index: 3; }
header.global ol.user ul.dropdown-menu.expanded { header.global ol.user ul.dropdown-menu.expanded {
display: block; } display: block; }
header.global ol.user ul.dropdown-menu::before { header.global ol.user ul.dropdown-menu::before {
background: transparent; background: transparent;
border-top: 6px solid black; border-top: 6px solid #fcfcfc;
border-right: 6px solid black; border-right: 6px solid #fcfcfc;
border-bottom: 6px solid transparent; border-bottom: 6px solid transparent;
border-left: 6px solid transparent; border-left: 6px solid transparent;
-webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black; -webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
...@@ -1931,7 +1958,7 @@ header.global { ...@@ -1931,7 +1958,7 @@ header.global {
width: 0px; } width: 0px; }
header.global ol.user ul.dropdown-menu li { header.global ol.user ul.dropdown-menu li {
display: block; display: block;
border-top: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px dotted #c8c8c8;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
...@@ -1941,35 +1968,32 @@ header.global { ...@@ -1941,35 +1968,32 @@ header.global {
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; } box-shadow: none; }
header.global ol.user ul.dropdown-menu li > a { header.global ol.user ul.dropdown-menu li > a {
-webkit-box-sizing: border-box; border: 1px solid transparent;
-moz-box-sizing: border-box;
box-sizing: border-box;
-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;
color: rgba(255, 255, 255, 0.9); -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #1d9dd9;
cursor: pointer;
display: block; display: block;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
height: auto;
line-height: 1em;
margin: 5px 0px; margin: 5px 0px;
overflow: hidden; overflow: hidden;
padding: 3px 5px 4px; padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none;
-webkit-transition-property: padding; -webkit-transition-property: padding;
-moz-transition-property: padding; -moz-transition-property: padding;
-ms-transition-property: padding; -ms-transition-property: padding;
-o-transition-property: padding; -o-transition-property: padding;
transition-property: padding; transition-property: padding;
-webkit-transition-duration: 0.1s; -webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.1s; -moz-transition-duration: 0.15s;
-ms-transition-duration: 0.1s; -ms-transition-duration: 0.15s;
-o-transition-duration: 0.1s; -o-transition-duration: 0.15s;
transition-duration: 0.1s; transition-duration: 0.15s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
-ms-transition-timing-function: linear; -ms-transition-timing-function: linear;
...@@ -1983,18 +2007,8 @@ header.global { ...@@ -1983,18 +2007,8 @@ header.global {
white-space: nowrap; white-space: nowrap;
width: 100%; } width: 100%; }
header.global ol.user ul.dropdown-menu li > a:hover { header.global ol.user ul.dropdown-menu li > a:hover {
background: #1d9dd9; color: #3c3c3c;
background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%); text-decoration: none; }
background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
border-color: black;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding-left: 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
.highlighted-courses .courses, .find-courses .courses { .highlighted-courses .courses, .find-courses .courses {
zoom: 1; zoom: 1;
...@@ -2640,6 +2654,28 @@ header.global { ...@@ -2640,6 +2654,28 @@ header.global {
.modal .inner-wrapper .close-modal:hover p { .modal .inner-wrapper .close-modal:hover p {
color: #3c3c3c; } color: #3c3c3c; }
.container.activation {
padding: 60px 0px 120px; }
.container.activation h1 {
margin-bottom: 20px;
padding: 10px; }
.container.activation h1 + hr {
margin-bottom: 30px; }
.container.activation .message {
background: #fcfcfc;
border: 1px solid #c8c8c8;
-webkit-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
padding: 40px;
width: 48.988%; }
.home { .home {
padding: 0px; } padding: 0px; }
.home > header { .home > header {
...@@ -2906,7 +2942,12 @@ header.global { ...@@ -2906,7 +2942,12 @@ header.global {
width: 60px; width: 60px;
vertical-align: middle; } vertical-align: middle; }
.home > header .title .secondary-actions a.intro-video .video .play { .home > header .title .secondary-actions a.intro-video .video .play {
background: rgba(255, 255, 255, 0.6); background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-size: cover;
height: 31px; height: 31px;
margin-left: -13px; margin-left: -13px;
margin-top: -15px; margin-top: -15px;
...@@ -3529,7 +3570,7 @@ header.global { ...@@ -3529,7 +3570,7 @@ header.global {
clear: both; } clear: both; }
.dashboard .profile-sidebar header.profile .user-info > ul { .dashboard .profile-sidebar header.profile .user-info > ul {
background: #fafafa; background: #fafafa;
border: 1px solid #dcdcdc; border: 1px solid #c8c8c8;
border-top: none; border-top: none;
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px;
...@@ -3546,9 +3587,12 @@ header.global { ...@@ -3546,9 +3587,12 @@ header.global {
-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;
-webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
zoom: 1; zoom: 1;
margin: 0px; margin: 0px;
padding: 0px 10px 20px; padding: 20px 10px 10px;
width: 100%; } width: 100%; }
.dashboard .profile-sidebar header.profile .user-info > ul:before, .dashboard .profile-sidebar header.profile .user-info > ul:after { .dashboard .profile-sidebar header.profile .user-info > ul:before, .dashboard .profile-sidebar header.profile .user-info > ul:after {
content: ""; content: "";
...@@ -3556,15 +3600,70 @@ header.global { ...@@ -3556,15 +3600,70 @@ header.global {
.dashboard .profile-sidebar header.profile .user-info > ul:after { .dashboard .profile-sidebar header.profile .user-info > ul:after {
clear: both; } clear: both; }
.dashboard .profile-sidebar header.profile .user-info > ul li { .dashboard .profile-sidebar header.profile .user-info > ul li {
list-style: none; } zoom: 1;
border-bottom: 1px dotted #dcdcdc;
list-style: none;
margin-bottom: 20px;
padding-bottom: 10px; }
.dashboard .profile-sidebar header.profile .user-info > ul li:before, .dashboard .profile-sidebar header.profile .user-info > ul li:after {
content: "";
display: table; }
.dashboard .profile-sidebar header.profile .user-info > ul li:after {
clear: both; }
.dashboard .profile-sidebar header.profile .user-info > ul li:hover .icon {
opacity: 1; }
.dashboard .profile-sidebar header.profile .user-info > ul li p { .dashboard .profile-sidebar header.profile .user-info > ul li p {
color: #a0a0a0; color: #a0a0a0;
font-family: "Open Sans", Verdana, Geneva, sans-serif; float: left;
text-shadow: 0 1px rgba(255, 255, 255, 0.8); } font-family: "Open Sans", Verdana, Geneva, sans-serif; }
.dashboard .profile-sidebar header.profile .user-info > ul li p span { .dashboard .profile-sidebar header.profile .user-info > ul li p span {
font-weight: 700; font-weight: 700;
margin-left: 10px; margin-left: 12px; }
text-transform: none; } .dashboard .profile-sidebar header.profile .user-info > ul li .icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 19px; }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon.email-icon {
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon.location-icon {
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon.language-icon {
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png"); }
.dashboard .my-courses { .dashboard .my-courses {
float: left; float: left;
margin: 0px; margin: 0px;
...@@ -3903,9 +4002,15 @@ header.global { ...@@ -3903,9 +4002,15 @@ header.global {
.dashboard .my-courses .my-course .info .meta:after { .dashboard .my-courses .my-course .info .meta:after {
clear: both; } clear: both; }
.dashboard .my-courses .my-course .info .meta .course-work-icon { .dashboard .my-courses .my-course .info .meta .course-work-icon {
background: #c8c8c8; background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-size: cover;
float: left; float: left;
height: 22px; height: 22px;
opacity: 0.7;
width: 22px; } width: 22px; }
.dashboard .my-courses .my-course .info .meta .complete { .dashboard .my-courses .my-course .info .meta .complete {
float: right; } float: right; }
...@@ -3929,7 +4034,7 @@ header.global { ...@@ -3929,7 +4034,7 @@ header.global {
-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: 40px; left: 35px;
position: absolute; position: absolute;
right: 130px; } right: 130px; }
.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 {
...@@ -4637,16 +4742,63 @@ nav.course-material { ...@@ -4637,16 +4742,63 @@ nav.course-material {
display: table; } display: table; }
.course-info .course-sidebar .important-dates li:after { .course-info .course-sidebar .important-dates li:after {
clear: both; } clear: both; }
.course-info .course-sidebar .important-dates li:hover .icon {
opacity: 1; }
.course-info .course-sidebar .important-dates li p { .course-info .course-sidebar .important-dates li p {
color: #a0a0a0; color: #a0a0a0;
float: left; float: left;
font-family: "Open Sans", Verdana, Geneva, sans-serif; } font-family: "Open Sans", Verdana, Geneva, sans-serif; }
.course-info .course-sidebar .important-dates li img { .course-info .course-sidebar .important-dates li .icon {
background: #e6e6e6; background-size: cover;
float: left; float: left;
height: 19px; height: 19px;
margin: 3px 10px 0 0; margin: 2px 10px 0 0;
opacity: 0.6;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 19px; } width: 19px; }
.course-info .course-sidebar .important-dates li .icon.start-icon {
background-image: url("/static/images/portal-icons/calendar-icon.png");
background-image: url("/static/images/portal-icons/calendar-icon.png");
background-image: url("/static/images/portal-icons/calendar-icon.png");
background-image: url("/static/images/portal-icons/calendar-icon.png");
background-image: url("/static/images/portal-icons/calendar-icon.png"); }
.course-info .course-sidebar .important-dates li .icon.final-icon {
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png");
background-image: url("/static/images/portal-icons/pencil-icon.png"); }
.course-info .course-sidebar .important-dates li .icon.length-icon {
background-image: url("/static/images/portal-icons/chart-icon.png");
background-image: url("/static/images/portal-icons/chart-icon.png");
background-image: url("/static/images/portal-icons/chart-icon.png");
background-image: url("/static/images/portal-icons/chart-icon.png");
background-image: url("/static/images/portal-icons/chart-icon.png"); }
.course-info .course-sidebar .important-dates li .icon.number-icon {
background-image: url("/static/images/portal-icons/course-info-icon.png");
background-image: url("/static/images/portal-icons/course-info-icon.png");
background-image: url("/static/images/portal-icons/course-info-icon.png");
background-image: url("/static/images/portal-icons/course-info-icon.png");
background-image: url("/static/images/portal-icons/course-info-icon.png"); }
.course-info .course-sidebar .important-dates li span { .course-info .course-sidebar .important-dates li span {
float: right; float: right;
font-weight: 700; } font-weight: 700; }
......
lms/static/sass/application.scss
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
@import 'shared_styles/shared_list_of_courses'; @import 'shared_styles/shared_list_of_courses';
@import 'shared_styles/shared_course_filter'; @import 'shared_styles/shared_course_filter';
@import 'shared_styles/shared_modal'; @import 'shared_styles/shared_modal';
@import 'shared_styles/activation_messages';
@import 'home'; @import 'home';
@import 'dashboard'; @import 'dashboard';
......
lms/static/sass/base_styles/_base.scss
...@@ -14,6 +14,7 @@ $lighter-base-font-color: rgb(160,160,160); ...@@ -14,6 +14,7 @@ $lighter-base-font-color: rgb(160,160,160);
$blue: rgb(29,157,217); $blue: rgb(29,157,217);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87);
html, body { html, body {
background: rgb(250,250,250); background: rgb(250,250,250);
......
lms/static/sass/base_styles/_base_extends.scss
...@@ -76,3 +76,15 @@ ...@@ -76,3 +76,15 @@
rgba(200,200,200, 0))); rgba(200,200,200, 0)));
border: none; border: none;
} }
.error-message-colors {
background: $error-red;
border: 1px solid rgb(202, 17, 17);
color: rgb(143, 14, 14);
}
.success-message-colors {
background: rgb(99, 236, 137);
border: 1px solid rgb(17, 202, 54);
color: rgb(35, 143, 14);
}
lms/static/sass/shared_styles/_activation_messages.scss 0 → 100644
.container.activation {
padding: 60px 0px 120px;
h1 {
margin-bottom: 20px;
padding: 10px;
&.invalid {
@extend .error-message-colors;
}
&.valid {
@extend .success-message-colors;
}
}
h1 + hr {
margin-bottom: 30px;
}
.message {
background: rgb(252,252,252);
border: 1px solid rgb(200,200,200);
@include box-shadow(0 3px 20px 0 rgba(0,0,0, 0.2));
@include border-radius(4px);
margin: 0 auto;
padding: 40px;
width: flex-grid(6);
}
}
lms/static/sass/shared_styles/_shared_header.scss
...@@ -136,57 +136,65 @@ header.global { ...@@ -136,57 +136,65 @@ header.global {
&.user { &.user {
float: right; float: right;
> li.primary {
display: block;
float: left;
margin: 0px;
> a {
margin: 0px;
@include border-right-radius(0px);
}
&:last-child {
> a {
@include border-radius(0 4px 4px 0);
border-left: none;
}
}
}
a.user-link { a.user-link {
padding: 10px 12px 10px 42px; padding: 10px 12px 10px 42px;
position: relative; position: relative;
text-transform: none; text-transform: none;
.avatar { .avatar {
background: rgb(220,220,220); //background: rgb(220,220,220);
@include border-radius(3px); @include background-image(url('/static/images/portal-icons/home-icon.png'));
border: 1px solid rgb(80,80,80); background-size: cover;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); //@include border-radius(3px);
height: 21px; //border: 1px solid rgb(80,80,80);
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 26px;
@include inline-block; @include inline-block;
left: 8px; left: 8px;
opacity: 0.5;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 7px; top: 4px;
width: 21px; @include transition(all, 0.15s, linear);
width: 26px;
&::after { }
@include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
content: "";
display: block;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
}
img { &:hover {
@include border-radius(4px); .avatar {
display: block; opacity: 0.8;
min-height: 100%;
min-width: 100%;
height: 100%;
} }
} }
} }
ul.dropdown-menu { ul.dropdown-menu {
background: rgb(252,252,252);
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); @include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4));
border: 1px solid rgb(0,0,0); border: 1px solid rgb(100,100,100);
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%));
display: none; display: none;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
right: 4px; right: 0px;
top: 50px; top: 50px;
width: 150px; width: 170px;
z-index: 3; z-index: 3;
&.expanded { &.expanded {
...@@ -196,8 +204,8 @@ header.global { ...@@ -196,8 +204,8 @@ header.global {
&::before { &::before {
background: transparent; background: transparent;
border: { border: {
top: 6px solid rgba(0,0,0, 1); top: 6px solid rgba(252,252,252, 1);
right: 6px solid rgba(0,0,0, 1); right: 6px solid rgba(252,252,252, 1);
bottom: 6px solid transparent; bottom: 6px solid transparent;
left: 6px solid transparent; left: 6px solid transparent;
} }
...@@ -214,7 +222,7 @@ header.global { ...@@ -214,7 +222,7 @@ header.global {
li { li {
display: block; display: block;
border-top: 1px solid rgba(0,0,0, 0.4); border-top: 1px dotted rgba(200,200,200, 1);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05)); @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
&:first-child { &:first-child {
...@@ -223,31 +231,23 @@ header.global { ...@@ -223,31 +231,23 @@ header.global {
} }
> a { > a {
@include box-sizing(border-box); border: 1px solid transparent;
@include border-radius(3px); @include border-radius(3px);
color: rgba(255,255,255, 0.9); @include box-sizing(border-box);
color: $blue;
cursor: pointer;
display: block; display: block;
font-family: $serif;
height: auto;
line-height: 1em;
margin: 5px 0px; margin: 5px 0px;
overflow: hidden; overflow: hidden;
padding: 3px 5px 4px; padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none; @include transition(padding, 0.15s, linear);
@include transition(padding, 0.1s, linear);
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
&:hover { &:hover {
background: $blue; color: $base-font-color;
@include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%, text-decoration: none;
rgba($blue, 1) 100%));
border-color: rgba(0,0,0, 1);
@include box-shadow(none);
padding-left: 8px;
text-shadow: 0 -1px rgba(0,0,0, 0.2);
} }
} }
} }
......
lms/static/sass/shared_styles/_shared_modal.scss
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
} }
#enroll_error, #login_error { #enroll_error, #login_error {
background: rgb(253, 87, 87); background: $error-red;
border: 1px solid rgb(202, 17, 17); border: 1px solid rgb(202, 17, 17);
color: rgb(143, 14, 14); color: rgb(143, 14, 14);
display: none; display: none;
......
lms/templates/activation_active.html
<%inherit file="marketing.html" /> <%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<section class="tos"> <%namespace name='static' file='static_content.html'/>
<div>
<section class="activation"> <section class="container activation">
<h1>Account already active!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> --> <section class="message">
<p> This account has already been activated. You can log in at <h1>Account already active!</h1>
the <a href="/">6.002x course page</a>.</p> <hr class="horizontal-divider">
</div>
<p> This account has already been activated. You can now <a href="#login-modal" rel="leanModal">login</a>.</p>
</section>
</section> </section>
lms/templates/activation_complete.html
<%inherit file="marketing.html" /> <%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<section class="tos">
<div> <%namespace name='static' file='static_content.html'/>
<h1>Activation Complete!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> --> <section class="container activation">
<p>Thanks for activating your account. You can log in at the <a href="/">6.002x course page</a>.</p>
</div> <section class="message">
<h1 class="valid">Activation Complete!</h1>
<hr class="horizontal-divider">
<p>Thanks for activating your account. You can now <a href="#login-modal" rel="leanModal">login</a>.</p>
</section>
</section> </section>
lms/templates/activation_invalid.html
<%inherit file="marketing.html" /> <%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<section class="tos"> <%namespace name='static' file='static_content.html'/>
<div>
<h1>Activation Invalid</h1>
<p>Something went wrong. Check to make sure the URL you went to was <section class="container activation">
correct -- e-mail programs will sometimes split it into two
lines. If you still have issues, e-mail us to let us know what happened
at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
<p>Or you can go back to the <a href="/">6.002x course page</a>.</p> <section class="message">
</div> <h1 class="invalid">Activation Invalid</h1>
<hr class="horizontal-divider">
<p>Something went wrong. Check to make sure the URL you went to was
correct -- e-mail programs will sometimes split it into two
lines. If you still have issues, e-mail us to let us know what happened
at <a href="mailto:bugs@edx.org">bugs@edx.org</a>.</p>
<p>Or you can go back to the <a href="/">home page</a>.</p>
</section>
</section> </section>
lms/templates/dashboard.html
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
<section class="user-info"> <section class="user-info">
<ul> <ul>
<li> <li>
<img src=""><p>Email<span>${ user.email }</span></p> <div class="icon email-icon"></div><p>Email<span>${ user.email }</span></p>
</li> </li>
<li> <li>
<img src=""><p>Location<span>${ user.profile.location }</span></p> <div class="icon location-icon"></div><p>Location<span>${ user.profile.location }</span></p>
</li> </li>
<li> <li>
<img src=""><p>Language<span>${ user.profile.language }</span></p> <div class="icon language-icon"></div><p>Language<span>${ user.profile.language }</span></p>
</li> </li>
</ul> </ul>
</section> </section>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<p>Class Starts - <span>9/2/2012</span></div> <p>Class Starts - <span>9/2/2012</span></div>
</section> </section>
<section class="meta"> <section class="meta">
<div src="" class="course-work-icon"></div> <div class="course-work-icon"></div>
<div class="progress"> <div class="progress">
<div class="meter"> <div class="meter">
<div class="meter-fill"></div> <div class="meter-fill"></div>
......
lms/templates/navigation.html
...@@ -17,17 +17,17 @@ ...@@ -17,17 +17,17 @@
<ol class="user"> <ol class="user">
<li class="primary"> <li class="primary">
<a href="${reverse('dashboard')}" class="user-link"> <a href="${reverse('dashboard')}" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span> <span class="avatar"></span>
${user.username} ${user.username}
</a> </a>
</li> </li>
<li class="primary"> <li class="primary">
<a href="#" class="dropdown">&#9662</a> <a href="#" class="dropdown">&#9662</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Account Settings</a></li> <li><a href="#">Account Settings</a></li>
<li><a href="${reverse('help')}">Help</a></li> <li><a href="${reverse('help')}">Help</a></li>
<li><a href="${reverse('logout')}">Log Out</a></li> <li><a href="${reverse('logout')}">Log Out</a></li>
</ul> </ul>
</li> </li>
</ol> </ol>
......
lms/templates/portal/course_about.html
...@@ -98,9 +98,6 @@ ...@@ -98,9 +98,6 @@
<section class="course-sidebar"> <section class="course-sidebar">
<section class="course-summary"> <section class="course-summary">
<header> <header>
<!--
-<a href="#" class="university-name">${course.get_about_section("university")}</a><span>${course.get_about_section("title")}</span>
-->
<div class="social-sharing"> <div class="social-sharing">
<div class="sharing-message">Share with friends and family!</div> <div class="sharing-message">Share with friends and family!</div>
<a href="#" class="share"> <a href="#" class="share">
...@@ -116,10 +113,10 @@ ...@@ -116,10 +113,10 @@
</header> </header>
<ol class="important-dates"> <ol class="important-dates">
<li><img src=""><p>Classes Start</p><span class="start-date">7/12/12</span></li> <li><div class="icon start-icon"></div><p>Classes Start</p><span class="start-date">7/12/12</span></li>
<li><img src=""><p>Final Exam</p><span class="final-date">12/09/12</span></li> <li><div class="icon final-icon"></div><p>Final Exam</p><span class="final-date">12/09/12</span></li>
<li><img src=""><p>Course Length</p><span class="course-length">15 weeks</span></li> <li><div class="icon length-icon"></div><p>Course Length</p><span class="course-length">15 weeks</span></li>
<li><img src=""><p>Course Number</p><span class="course-number">${course.get_about_section("number")}</span></li> <li><div class="icon number-icon"></div><p>Course Number</p><span class="course-number">${course.get_about_section("number")}</span></li>
</ol> </ol>
</section> </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