Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Galen Frechette
2012-07-16 17:29:14 -04:00
parent ffb341f6b3
commit 96361c3fd5
26 changed files with 456 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
lms/static/images/portal-icons/calendar-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
lms/static/images/portal-icons/chart-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
lms/static/images/portal-icons/course-info-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
lms/static/images/portal-icons/email-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
lms/static/images/portal-icons/gear-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
lms/static/images/portal-icons/home-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

0
lms/static/images/info-icon.png → lms/static/images/portal-icons/info-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 302 B

BIN
lms/static/images/portal-icons/language-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
lms/static/images/portal-icons/pencil-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
lms/static/images/portal-icons/video-play-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

30
lms/static/sass/_course_about.scss
View File

@@ -358,18 +358,42 @@
margin-bottom: 20px;
padding-bottom: 10px;
&:hover {
.icon {
opacity: 1;
}
}
p {
color: $lighter-base-font-color;
float: left;
font-family: $sans-serif;
}
img {
background: rgb(230,230,230);
.icon {
background-size: cover;
float: left;
height: 19px;
margin: 3px 10px 0 0;
margin: 2px 10px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
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 {

48
lms/static/sass/_dashboard.scss
View File

@@ -30,27 +30,59 @@
> ul {
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
border: 1px solid rgb(200,200,200);
border-top: none;
@include border-bottom-radius(4px);
@include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
@include clearfix;
margin: 0px;
padding: 0px 10px 20px;
padding: 20px 10px 10px;
width: flex-grid(12);
li {
@include clearfix;
border-bottom: 1px dotted rgb(220,220,220);
list-style: none;
margin-bottom: 20px;
padding-bottom: 10px;
&:hover {
.icon {
opacity: 1;
}
}
p {
color: $lighter-base-font-color;
float: left;
font-family: $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.8);
span {
font-weight: 700;
margin-left: 10px;
text-transform: none;
margin-left: 12px;
}
}
.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 @@
.course-work-icon {
background: rgb(200,200,200);
@include background-image(url('/static/images/portal-icons/pencil-icon.png'));
background-size: cover;
float: left;
height: 22px;
opacity: 0.7;
width: 22px;
}
@@ -280,7 +314,7 @@
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 40px;
left: 35px;
position: absolute;
right: 130px;

3
lms/static/sass/_home.scss
View File

@@ -148,7 +148,8 @@
vertical-align: middle;
.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;
margin-left: -13px;
margin-top: -15px;

330
lms/static/sass/application.css
View File

@@ -583,6 +583,16 @@ a:link, a:visited {
background-image: linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0));
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 {
-webkit-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 {
margin-right: 0px; }
header.global ol.user {
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 {
padding: 10px 12px 10px 42px;
position: relative;
text-transform: none; }
header.global ol.user a.user-link .avatar {
background: #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid #505050;
-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;
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");
background-size: cover;
height: 26px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
@@ -1857,61 +1888,57 @@ header.global {
*display: inline;
*vertical-align: auto;
left: 8px;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 7px;
width: 21px; }
header.global ol.user a.user-link .avatar::after {
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%);
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%);
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%);
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%);
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%; }
header.global ol.user a.user-link .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
height: 100%; }
top: 4px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 26px; }
header.global ol.user a.user-link:hover .avatar {
opacity: 0.8; }
header.global ol.user ul.dropdown-menu {
background: #fcfcfc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
border: 1px solid black;
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%);
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
border: 1px solid #646464;
display: none;
padding: 5px 10px;
position: absolute;
right: 4px;
right: 0px;
top: 50px;
width: 150px;
width: 170px;
z-index: 3; }
header.global ol.user ul.dropdown-menu.expanded {
display: block; }
header.global ol.user ul.dropdown-menu::before {
background: transparent;
border-top: 6px solid black;
border-right: 6px solid black;
border-top: 6px solid #fcfcfc;
border-right: 6px solid #fcfcfc;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
-webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
@@ -1931,7 +1958,7 @@ header.global {
width: 0px; }
header.global ol.user ul.dropdown-menu li {
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);
-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); }
@@ -1941,35 +1968,32 @@ header.global {
-moz-box-shadow: none;
box-shadow: none; }
header.global ol.user ul.dropdown-menu li > a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-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;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
height: auto;
line-height: 1em;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
-webkit-transition-property: padding;
-moz-transition-property: padding;
-ms-transition-property: padding;
-o-transition-property: padding;
transition-property: padding;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
-ms-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-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;
@@ -1983,18 +2007,8 @@ header.global {
white-space: nowrap;
width: 100%; }
header.global ol.user ul.dropdown-menu li > a:hover {
background: #1d9dd9;
background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
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); }
color: #3c3c3c;
text-decoration: none; }
.highlighted-courses .courses, .find-courses .courses {
zoom: 1;
@@ -2640,6 +2654,28 @@ header.global {
.modal .inner-wrapper .close-modal:hover p {
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 {
padding: 0px; }
.home > header {
@@ -2906,7 +2942,12 @@ header.global {
width: 60px;
vertical-align: middle; }
.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;
margin-left: -13px;
margin-top: -15px;
@@ -3529,7 +3570,7 @@ header.global {
clear: both; }
.dashboard .profile-sidebar header.profile .user-info > ul {
background: #fafafa;
border: 1px solid #dcdcdc;
border: 1px solid #c8c8c8;
border-top: none;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
@@ -3546,9 +3587,12 @@ header.global {
-webkit-box-sizing: border-box;
-moz-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;
margin: 0px;
padding: 0px 10px 20px;
padding: 20px 10px 10px;
width: 100%; }
.dashboard .profile-sidebar header.profile .user-info > ul:before, .dashboard .profile-sidebar header.profile .user-info > ul:after {
content: "";
@@ -3556,15 +3600,70 @@ header.global {
.dashboard .profile-sidebar header.profile .user-info > ul:after {
clear: both; }
.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 {
color: #a0a0a0;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.8); }
float: left;
font-family: "Open Sans", Verdana, Geneva, sans-serif; }
.dashboard .profile-sidebar header.profile .user-info > ul li p span {
font-weight: 700;
margin-left: 10px;
text-transform: none; }
margin-left: 12px; }
.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 {
float: left;
margin: 0px;
@@ -3903,9 +4002,15 @@ header.global {
.dashboard .my-courses .my-course .info .meta:after {
clear: both; }
.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;
height: 22px;
opacity: 0.7;
width: 22px; }
.dashboard .my-courses .my-course .info .meta .complete {
float: right; }
@@ -3929,7 +4034,7 @@ header.global {
-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);
left: 40px;
left: 35px;
position: absolute;
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 {
@@ -4637,16 +4742,63 @@ nav.course-material {
display: table; }
.course-info .course-sidebar .important-dates li:after {
clear: both; }
.course-info .course-sidebar .important-dates li:hover .icon {
opacity: 1; }
.course-info .course-sidebar .important-dates li p {
color: #a0a0a0;
float: left;
font-family: "Open Sans", Verdana, Geneva, sans-serif; }
.course-info .course-sidebar .important-dates li img {
background: #e6e6e6;
.course-info .course-sidebar .important-dates li .icon {
background-size: cover;
float: left;
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; }
.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 {
float: right;
font-weight: 700; }

1
lms/static/sass/application.scss
View File

@@ -16,6 +16,7 @@
@import 'shared_styles/shared_list_of_courses';
@import 'shared_styles/shared_course_filter';
@import 'shared_styles/shared_modal';
@import 'shared_styles/activation_messages';
@import 'home';
@import 'dashboard';

1
lms/static/sass/base_styles/_base.scss
View File

@@ -14,6 +14,7 @@ $lighter-base-font-color: rgb(160,160,160);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87);
html, body {
background: rgb(250,250,250);

12
lms/static/sass/base_styles/_base_extends.scss
View File

@@ -76,3 +76,15 @@
rgba(200,200,200, 0)));
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);
}

30
lms/static/sass/shared_styles/_activation_messages.scss Normal file
View File

@@ -0,0 +1,30 @@
.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);
}
}

96
lms/static/sass/shared_styles/_shared_header.scss
View File

@@ -136,57 +136,65 @@ header.global {
&.user {
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 {
padding: 10px 12px 10px 42px;
position: relative;
text-transform: none;
.avatar {
background: rgb(220,220,220);
@include border-radius(3px);
border: 1px solid rgb(80,80,80);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 21px;
//background: rgb(220,220,220);
@include background-image(url('/static/images/portal-icons/home-icon.png'));
background-size: cover;
//@include border-radius(3px);
//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;
left: 8px;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 7px;
width: 21px;
top: 4px;
@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 {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
height: 100%;
&:hover {
.avatar {
opacity: 0.8;
}
}
}
ul.dropdown-menu {
background: rgb(252,252,252);
@include border-radius(4px);
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
border: 1px solid rgb(0,0,0);
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%));
@include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4));
border: 1px solid rgb(100,100,100);
display: none;
padding: 5px 10px;
position: absolute;
right: 4px;
right: 0px;
top: 50px;
width: 150px;
width: 170px;
z-index: 3;
&.expanded {
@@ -196,8 +204,8 @@ header.global {
&::before {
background: transparent;
border: {
top: 6px solid rgba(0,0,0, 1);
right: 6px solid rgba(0,0,0, 1);
top: 6px solid rgba(252,252,252, 1);
right: 6px solid rgba(252,252,252, 1);
bottom: 6px solid transparent;
left: 6px solid transparent;
}
@@ -214,7 +222,7 @@ header.global {
li {
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));
&:first-child {
@@ -223,31 +231,23 @@ header.global {
}
> a {
@include box-sizing(border-box);
border: 1px solid transparent;
@include border-radius(3px);
color: rgba(255,255,255, 0.9);
@include box-sizing(border-box);
color: $blue;
cursor: pointer;
display: block;
font-family: $serif;
height: auto;
line-height: 1em;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
@include transition(padding, 0.1s, linear);
@include transition(padding, 0.15s, linear);
white-space: nowrap;
width: 100%;
&:hover {
background: $blue;
@include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%,
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);
color: $base-font-color;
text-decoration: none;
}
}
}

2
lms/static/sass/shared_styles/_shared_modal.scss
View File

@@ -107,7 +107,7 @@
}
#enroll_error, #login_error {
background: rgb(253, 87, 87);
background: $error-red;
border: 1px solid rgb(202, 17, 17);
color: rgb(143, 14, 14);
display: none;

20
lms/templates/activation_active.html
View File

@@ -1,12 +1,14 @@
<%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'/>
<section class="activation">
<h1>Account already active!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p> This account has already been activated. You can log in at
the <a href="/">6.002x course page</a>.</p>
</div>
<section class="container activation">
<section class="message">
<h1>Account already active!</h1>
<hr class="horizontal-divider">
<p> This account has already been activated. You can now <a href="#login-modal" rel="leanModal">login</a>.</p>
</section>
</section>

19
lms/templates/activation_complete.html
View File

@@ -1,9 +1,14 @@
<%inherit file="marketing.html" />
<%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<section class="tos">
<div>
<h1>Activation Complete!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p>Thanks for activating your account. You can log in at the <a href="/">6.002x course page</a>.</p>
</div>
<%namespace name='static' file='static_content.html'/>
<section class="container activation">
<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>

25
lms/templates/activation_invalid.html
View File

@@ -1,14 +1,19 @@
<%inherit file="marketing.html" />
<%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<section class="tos">
<div>
<h1>Activation Invalid</h1>
<%namespace name='static' file='static_content.html'/>
<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@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
<section class="container activation">
<p>Or you can go back to the <a href="/">6.002x course page</a>.</p>
</div>
<section class="message">
<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>

8
lms/templates/dashboard.html
View File

@@ -11,13 +11,13 @@
<section class="user-info">
<ul>
<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>
<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>
<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>
</ul>
</section>
@@ -46,7 +46,7 @@
<p>Class Starts - <span>9/2/2012</span></div>
</section>
<section class="meta">
<div src="" class="course-work-icon"></div>
<div class="course-work-icon"></div>
<div class="progress">
<div class="meter">
<div class="meter-fill"></div>

12
lms/templates/navigation.html
View File

@@ -17,17 +17,17 @@
<ol class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
<span class="avatar"></span>
${user.username}
</a>
</li>
<li class="primary">
<a href="#" class="dropdown">&#9662</a>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</a></li>
<li><a href="${reverse('help')}">Help</a></li>
<li><a href="${reverse('logout')}">Log Out</a></li>
</ul>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</a></li>
<li><a href="${reverse('help')}">Help</a></li>
<li><a href="${reverse('logout')}">Log Out</a></li>
</ul>
</li>
</ol>

11
lms/templates/portal/course_about.html
View File

@@ -98,9 +98,6 @@
<section class="course-sidebar">
<section class="course-summary">
<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="sharing-message">Share with friends and family!</div>
<a href="#" class="share">
@@ -116,10 +113,10 @@
</header>
<ol class="important-dates">
<li><img src=""><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><img src=""><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 start-icon"></div><p>Classes Start</p><span class="start-date">7/12/12</span></li>
<li><div class="icon final-icon"></div><p>Final Exam</p><span class="final-date">12/09/12</span></li>
<li><div class="icon length-icon"></div><p>Course Length</p><span class="course-length">15 weeks</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>
</section>
</section>