Skip to content

E
edx-platform
Commit 733bb455 by Galen Frechette
Options

minor fixes to dashboard and typography, adds layout to jobs page

parent 38239c73
Showing with 388 additions and 133 deletions
lms/static/sass/_base.scss
......@@ -26,6 +26,22 @@ h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
}
h1 {
color: $lighter-base-font-color;
font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
h2 {
color: $lighter-base-font-color;
font: normal 1.4rem/2rem $serif;
margin-bottom: 15px;
text-transform: uppercase;
}
p {
color: $base-font-color;
font: normal 1.3rem/2rem $serif;
......@@ -36,9 +52,23 @@ p + p {
margin-top: 20px;
}
p {
a:link, a:visited {
color: $blue;
font: normal 1.3rem/2rem $serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: $blue;
text-decoration: underline;
}
}
}
a:link, a:visited {
color: $blue;
font: normal 1rem/1.8rem $sans-serif;
font: normal 1.2rem/2rem $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
......
lms/static/sass/_base_extends.scss
......@@ -52,6 +52,7 @@
}
.horizontal-divider {
border: none;
@extend .faded-hr-divider;
position: relative;
......@@ -63,3 +64,15 @@
top: 1px;
}
}
.fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1)));
border: none;
}
.fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0)));
border: none;
}
lms/static/sass/_course_info.scss
......@@ -42,33 +42,14 @@
> hgroup {
position: relative;
hr {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 1)));
border: none;
height: 1px;
margin: 10px 0;
position: relative;
&::after {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0.6)));
bottom: -1px;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100%;
}
}
margin-bottom: 12px;
h1 {
color: $base-font-color;
font: bold 2.8rem/3.2rem $sans-serif;
@include inline-block;
margin-right: 5px;
margin: 0 5px 0 0;
letter-spacing: 0px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
span {
......@@ -80,6 +61,7 @@
h2 {
@include inline-block;
margin: 0;
a {
color: $lighter-base-font-color;
......@@ -97,19 +79,22 @@
p {
color: $lighter-base-font-color;
@include inline-block;
font: 300 1.2rem/1.6rem $sans-serif;
font: italic 1.2rem/1.6rem $serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase;
&:last-child {
margin: 0;
}
> span {
background: rgb(255,255,255);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-left: 5px;
padding: 2px 10px;
}
}
}
......@@ -117,6 +102,7 @@
.actions {
float: left;
margin-top: 5px;
position: relative;
width: flex-grid(4);
z-index: 2;
......@@ -124,18 +110,14 @@
&:hover {
.register-wrapper {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
border-color: rgb(180,180,180);
}
}
.register-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
@include box-sizing(border-box);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
@include transition(all, 0.15s, linear);
padding: 10px;
a.register {
@include button(shiny, $blue);
......@@ -156,14 +138,14 @@
padding: 0px 20px;
p {
background: rgb(245,245,245);
background: rgb(255,255,255);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
border-top: 0;
@include border-bottom-radius(4px);
padding: 5px 10px;
padding: 3px 10px;
margin: 0 auto;
color: $lighter-base-font-color;
color: $base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
text-align: center;
......
lms/static/sass/_dashboard.scss
......@@ -3,9 +3,10 @@
margin: 40px 10px;
.sidebar {
background: rgb(240,240,240);
margin-right: flex-gutter();
position: absolute;
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
float: left;
width: 250px;
@media screen and (max-width: 768px) {
......@@ -108,7 +109,6 @@
}
.my-courses {
@include box-sizing(border-box);
margin: 0px;
padding-left: 270px;
......@@ -121,45 +121,31 @@
width: flex-grid(12);
}
nav.course-toggle {
background: rgb(230,230,230);
margin-bottom: 30px;
position: relative;
ol.filters {
@include clearfix;
li {
border-right: 1px solid rgb(200,200,200);
.empty-dashboard-message {
background: rgb(250,250,250);
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
padding: 40px 0px;
text-align: center;
p {
color: $lighter-base-font-color;
font-style: italic;
text-shadow: 0 1px rgba(255,255,255, 0.6);
a {
background: rgb(240,240,240);
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
list-style: none;
float: left;
padding: 15px 10px;
width: 25%;
text-align: center;
&:last-child {
border: none;
}
&:hover {
background: rgb(220,220,220);
cursor: pointer;
}
&.selected {
background: rgb(220,220,220);
}
h2 {
font: normal 1rem/1.2rem $sans-serif;
text-transform: none;
}
span.count {
margin: 5px 0 0 0;
display: block;
}
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
@include inline-block;
margin-left: 5px;
padding: 5px 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
}
}
......@@ -273,7 +259,8 @@
}
h2 {
font: bold 1.2rem/1.6rem $sans-serif;
color: $base-font-color;
font: bold 1.4rem/1.6rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -282,9 +269,9 @@
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
h3 {
color: $lighter-base-font-color;
font: italic bold 1.2rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
......
lms/static/sass/_index.scss
......@@ -43,12 +43,7 @@
padding-top: 20px;
h1 {
color: $lighter-base-font-color;
font: 300 2.4rem/3rem $sans-serif;
letter-spacing: 1px;
margin-bottom: 20px;
position: relative;
text-transform: uppercase;
text-align: left;
}
.intro {
......@@ -256,12 +251,12 @@
}
.courses {
background: rgb(245,245,245);
@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%,
rgba(255,255,255, 0.5) 20%,
rgba(255,255,255, 0) 50%,
rgba(255,255,255, 0.5) 80%,
rgba(255,255,255, 1) 100%));
//background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%,
//rgba(255,255,255, 0.5) 20%,
//rgba(255,255,255, 0) 50%,
//rgba(255,255,255, 0.5) 80%,
//rgba(255,255,255, 1) 100%));
}
}
......
lms/static/sass/_jobs.scss 0 → 100644
.jobs {
margin: 60px auto 120px;
h1 + hr {
margin-bottom: 80px;
}
.message {
@include clearfix;
margin-bottom: 60px;
padding-bottom: 60px;
position: relative;
hr {
bottom: 0px;
margin: 0px;
position: absolute;
width: 100%;
}
.photo {
background: rgb(255,255,255);
border: 1px solid rgb(210,210,210);
padding: 1px;
width: flex-grid(4);
img {
background: rgb(245,245,245);
display: block;
height: 200px;
width: 100%;
}
}
&.left {
.photo {
float: left;
margin-right: flex-gutter();
}
}
&.right {
h2, p {
text-align: right;
}
.photo {
float: right;
margin-left: flex-gutter();
}
}
&:last-child {
margin-bottom: 0px;
}
}
.jobs-wrapper {
@include clearfix;
float: left;
width: flex-grid(12);
> h2 {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 60px;
padding-bottom: 20px;
//text-align: center;
}
.jobs-sidebar {
@include box-sizing(border-box);
border-left: 1px solid rgb(220,220,220);
float: left;
padding-bottom: 20px;
padding-left: 20px;
width: flex-grid(3);
nav {
margin-bottom: 40px;
ol {
@include clearfix;
li {
float: left;
margin-right: flex-gutter();
width: flex-grid(12);
&:nth-child(4n) {
margin-right: 0px;
}
a {
display: block;
margin-left: -20px;
padding: 10px 0px 10px 20px;
position: relative;
text-transform: uppercase;
&::after {
@include background-image(linear-gradient(180deg, rgba(235,235,235, 0) 0%,
rgba(235,235,235, 1)));
bottom: 0px;
//content: "";
display: block;
height: 1px;
left: 0px;
position: absolute;
width: 100%;
}
&:hover {
background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
//rgba(245,245,245, 1) 80%,
//rgba(245,245,245, 1) 100%));
}
}
}
}
}
p + h2 {
margin-top: 40px;
}
}
.jobs-listing {
float: left;
margin-right: flex-gutter();
width: flex-grid(9);
.job {
border-bottom: 1px solid rgb(220,220,220);
padding: 40px 0px;
&:first-child {
padding-top: 0px;
}
&:last-child {
border: none;
padding-bottom: 0px;
}
.inner-wrapper {
}
h3 {
font-family: $sans-serif;
font-weight: bold;
margin-bottom: 15px;
}
}
}
}
}
lms/static/sass/_shared_list_of_courses.scss
......@@ -37,7 +37,6 @@
> a {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75)));
//@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.6), rgba(0,0,0, 0.8)));
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
border-bottom: 1px solid rgba(150,150,150, 0.7);
display: block;
......@@ -51,6 +50,7 @@
top: 0px;
h2 {
color: $base-font-color;
font: bold 1.2rem/1.6rem $sans-serif;
padding-top: 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......
lms/static/sass/_shared_modal.scss
......@@ -30,22 +30,30 @@
width: grid-width(6);
z-index: 10;
&::before {
@include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
bottom: 0;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
&.visible {
display: block;
}
&.video-modal {
//height: 360px;
left: 50%;
margin-left: -320px;
//margin-top: -180px;
//top: 50%;
width: 642px;
margin-left: -281px;
width: 562px;
.inner-wrapper {
height: 360px;
height: 315px;
padding: 0px;
width: 640px;
width: 560px;
}
}
......@@ -57,6 +65,7 @@
overflow: hidden;
padding-bottom: 30px;
position: relative;
z-index: 2;
header {
margin-bottom: 30px;
......
lms/static/sass/application.scss
......@@ -24,6 +24,8 @@
@import 'course';
@import 'find_courses';
@import 'course_info';
@import 'jobs';
@import 'about';
@import 'sass_old/courseware/courseware';
@import 'sass_old/courseware/sequence-nav';
......
lms/templates/dashboard.html
......@@ -33,22 +33,9 @@
</section>
<section class="my-courses">
<nav class="course-toggle">
<ol class="filters">
<li class="selected">
<h2>All <span class="count">3</span></h2>
</li>
<li>
<h2>Current <span class="count">3</span></h2>
</li>
<li>
<h2>Upcoming <span class="count">0</span></h2>
</li>
<li>
<h2>Completed <span class="count">0</span></h2>
</li>
</ol>
</nav>
<header>
<h2>My Current Courses</h2>
</header>
% if len(courses) > 0:
% for course in courses:
......@@ -57,13 +44,13 @@
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
<img src="${static.url('images/circuits.jpeg')}" />
</div>
<section class="info">
<hgroup>
<h2>${course.title}</h2>
% for instructor in course.instructors:
<p>${instructor}, ${course.institution}</p>
<h3>${course.institution}</h3>
% endfor
</hgroup>
<div class="edit">options</div>
......@@ -85,11 +72,9 @@
</article>
% endfor
% else:
<div class="find-courses-wrapper">
<section class="find-courses">
<a href="${reverse('courses')}" class="find-courses">Find Courses</a>
</section>
</div>
<section class="empty-dashboard-message">
<p>Looks like you aren't registered for any courses. You should take a minute and <a href="${reverse('courses')}" class="find-courses">Find some courses!</a></p>
</section>
% endif
<article class="my-course">
......
lms/templates/jobs.html
<%inherit file="main.html" />
<h1>Jobs</h1>
<section class="container jobs">
<h1>Want to change the future of education?</h1>
<hr class="horizontal-divider">
<section class="company-mission message left">
<div class="inner-wrapper">
<div class="photo">
<img src="">
</div>
<h2>Mission: Educate 1 billion people around the world</h2>
<p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
<p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
</div>
<hr class="fade-right-hr-divider">
</section>
<section class="our-culture message right">
<div class="photo">
<img src="">
</div>
<h2>What it's like to work here</h2>
<p>“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.</p>
<p>[fast-moving not-for-profit startup][institutional backing, funding, benefits, and stability][industry salaries]</p>
<hr class="fade-left-hr-divider">
</section>
<section class="benefits message left">
<div class="photo">
<img src="">
</div>
<h2>Mission: Educate 1 billion people around the world</h2>
<p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
<p>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
</section>
<section class="jobs-wrapper">
<h2>We are currently looking for</h2>
<section class="jobs-listing">
<article id="edx-fellow" class="job">
<div class="inner-wrapper">
<h3>edX Fellow</h3>
<p>The edX fellows program is intended as an alternative to the traditional academic track for candidates with a strong focus on teaching. Fellows act as contact points for departments at MIT and Harvard, and help facilitate putting together on-line courses. </p>
<p>If you're interested in this position, send an e-mail to <a href="">fellow-jobs@edxonline.org</a></p>
</div>
</article>
<article id="content-engineer" class="job">
<div class="inner-wrapper">
<h3>Content Engineer</h3>
<p>Content engineers help create the technology for specific courses. The tasks include:</p>
<ul>
<li>
<p>Development of course-specific user-facing elements, such as the circuit editor and simulator that Chris Terman and Jacob White developed for 6.002x</p>
</li>
<li>
<p>Simple integration of course materials into courses</p>
</li>
<li>
<p>Developing programs to grade rich design questions, such as the ones developed by Gerald Sussman to allow basic design problems in 6.002x.</p>
</li>
</ul>
<p>Knowledge of Python, XML, and/or JavaScript is desired. Strong interest and background in pedagogy and education is desired as well.</p>
<p>If you're interested in this position, send an e-mail to <a href="">content-engineer@edxonline.org</a></p>
</div>
</article>
<article id="technology-team" class="job">
<div class="inner-wrapper">
<h3>Technology Team</h3>
<p>[Looking for both back-end and front-end developers. Strong backgrounds in machine learning, education, user interaction design, big data, or social network analysis are desirable, but team members do wear many hats. Best candidate would be a masterful hacker who went and did startups after finishing their Ph.D. We should find a way to make some positions that parallel fellows, and can leverage MIT/Harvard prestige]</p>
<p>If you're interested in this position, send an e-mail to <a href="">content-engineer@edxonline.org</a></p>
</div>
</article>
</section>
<section class="jobs-sidebar">
<h2>Positions</h2>
<nav>
<ol>
<li>
<a href="#edx-fellow">edX Fellow</a>
</li>
<li>
<a href="#content-engineer">Content Engineer</a>
</li>
<li>
<a href="#technology-team">Technology Team</a>
</li>
</ol>
</nav>
<h2>How to Apply</h2>
<p>E-mail your resume, coverletter and any other materials to <a href="#">careers@edxonline.org</a></p>
<h2>Our Location</h2>
<p>11 Cambridge Center, Cambridge MA USA</p>
</section>
</section>
</section>
lms/templates/navigation.html
......@@ -65,7 +65,4 @@
%if not user.is_authenticated():
<%include file="login_modal.html" />
<%include file="signup_modal.html" />
<section class="modal-overlay">
</section>
%endif
lms/templates/portal/course_about.html
......@@ -12,7 +12,6 @@
<section class="intro">
<hgroup>
<h1>${course.get_about_section("title")} <h2><a href="#">${course.get_about_section("university")}</a></h2></h1>
<hr>
</hgroup>
<div class="course-dates">
<p>Class Starts: <span class="start-date">7/12/12</span></p>
......@@ -53,13 +52,13 @@
<h2>Syllabus</h2>
<p>${course.get_about_section("syllabus")}</p>
<h3>Textbook</h3>
<h2>Textbook</h2>
${course.get_about_section("textbook")}
<h3>Frequently Asked Questions</h3>
${course.get_about_section("faq")}
<h2>Frequently Asked Questions</h2>
<p>${course.get_about_section("faq")}</p>
${course.get_about_section("more_info")}
<p>${course.get_about_section("more_info")}</p>
</section>
<section class="course-staff">
......@@ -98,7 +97,6 @@
<div class="play-intro"></div>
</div>
<%include file="../video_modal.html" />
${course.get_about_section("video")}
</div>
<section class="course-summary">
......
lms/templates/video_modal.html
......@@ -2,7 +2,7 @@
<section class="modal video-modal">
<div class="inner-wrapper">
<iframe width="640" height="360" src="http://www.youtube.com/embed/p2Q6BrNhdh8" frameborder="0" allowfullscreen></iframe>
${course.get_about_section("video")}
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
......
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