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 216 additions and 104 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.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">
<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>
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
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>
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,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>
......
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