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 448 additions and 184 deletions
lms/static/sass/_course_about.scss
......@@ -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 {
......
lms/static/sass/_dashboard.scss
......@@ -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;
......
lms/static/sass/_home.scss
......@@ -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;
......
lms/static/sass/application.css
......@@ -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; }
......
lms/static/sass/application.scss
......@@ -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';
......
lms/static/sass/base_styles/_base.scss
......@@ -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);
......
lms/static/sass/base_styles/_base_extends.scss
......@@ -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);
}
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 {
&.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;
&::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%;
top: 4px;
@include transition(all, 0.15s, linear);
width: 26px;
}
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;
}
}
}
......
lms/static/sass/shared_styles/_shared_modal.scss
......@@ -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;
......
lms/templates/activation_active.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'/>
<section class="activation">
<section class="container activation">
<section class="message">
<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>
<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>
lms/templates/activation_complete.html
<%inherit file="marketing.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>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="main.html" />
<%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>
lms/templates/activation_invalid.html
<%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
<section class="container activation">
<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@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
at <a href="mailto:bugs@edx.org">bugs@edx.org</a>.</p>
<p>Or you can go back to the <a href="/">6.002x course page</a>.</p>
</div>
<p>Or you can go back to the <a href="/">home page</a>.</p>
</section>
</section>
lms/templates/dashboard.html
......@@ -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>
......
lms/templates/navigation.html
......@@ -17,7 +17,7 @@
<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>
......
lms/templates/portal/course_about.html
......@@ -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>
......
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