Skip to content
Snippets Groups Projects
Commit 1ea8bd26 authored by Galen Frechette's avatar Galen Frechette
Browse files

imporves visual design of course info/profile page

parent 8a5e3bf4
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/_base.scss
+ 6
− 0
View file @ 1ea8bd26
......@@ -49,6 +49,12 @@ p {
margin: 0px;
}
span {
color: $lighter-base-font-color;
font: normal 1.3rem/2rem $sans-serif;
margin: 0px;
}
p + p {
margin-top: 20px;
}
......
lms/static/sass/_course_info.scss
+ 223
− 111
View file @ 1ea8bd26
.course-info {
.container {
margin-bottom: 60px;
padding-bottom: 120px;
}
header.course-profile {
background: rgb(245,245,245);
@include background-image(url('/static/images/shot-2-large.jpg'));
background-size: cover;
//@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(200,200,200);
border-bottom: 1px solid rgb(100,100,100);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
margin-top: -69px;
overflow: hidden;
padding: 134px 0px 60px;
position: relative;
width: 100%;
&::before {
@include background-image(radial-gradient(50% 50%, ellipse closest-side, rgba(#fff, 1), rgba(#fff, 0)));
//content: "";
display: block;
height: 200%;
left: 50%;
margin-left: -(flex-grid(5));
margin-top: -100%;
position: absolute;
top: 50%;
width: flex-grid(10);
z-index: 1;
}
.intro-inner-wrapper {
background: rgba(255,255,255, 0.9);
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
@include clearfix;
margin: 0 auto;
max-width: 1200px;
padding: 50px 0px 40px;
position: relative;
width: flex-grid(12);
z-index: 2;
&::before {
@include background-image(radial-gradient(50% 50%, ellipse closest-side, rgba(#fff, 1), rgba(#fff, 0)));
content: "";
display: block;
height: 200%;
left: 0px;
position: absolute;
top: 80px;
width: flex-grid(8);
z-index: 1;
}
.intro {
@include box-sizing(border-box);
@include clearfix;
float: left;
margin-right: flex-gutter();
padding: 20px 20px;
position: relative;
width: flex-grid(8);
width: flex-grid(8) + flex-gutter();
z-index: 2;
> hgroup {
position: relative;
margin-bottom: 12px;
border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-bottom: 30px;
padding-bottom: 20px;
width: 100%;
h1 {
color: $base-font-color;
font: bold 2.8rem/3.2rem $sans-serif;
font: 600 2.8rem/3.2rem $sans-serif;
@include inline-block;
margin: 0 5px 0 0;
margin: 0 10px 0 0;
letter-spacing: 0px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -65,8 +81,10 @@
a {
color: $lighter-base-font-color;
font: italic bold 1.4rem/1.6rem $sans-serif;
font: italic 800 1.4rem/1.6rem $sans-serif;
letter-spacing: 0px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
&:hover {
color: $blue;
......@@ -76,6 +94,9 @@
}
.course-dates {
display: none;
margin-bottom: 20px;
p {
color: $lighter-base-font-color;
@include inline-block;
......@@ -100,13 +121,73 @@
}
}
.actions {
float: left;
margin-top: 5px;
.media {
border-left: 1px solid rgb(100,100,100);
@include box-sizing(border-box);
float: right;
padding: 1px;
position: relative;
width: flex-grid(4);
z-index: 2;
.hero {
height: 180px;
overflow: hidden;
position: relative;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px;
&::after {
color: $base-font-color;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
top: 50%;
}
}
img {
min-width: 100%;
}
}
&:hover {
cursor: pointer;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
&::after {
color: $pink;
}
}
}
}
.actions {
@include clearfix;
position: relative;
width: flex-grid(12);
z-index: 2;
&:hover {
.register-wrapper {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
......@@ -117,7 +198,10 @@
@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-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
@include border-radius(4px);
float: left;
margin-right: flex-gutter();
@include transition(all, 0.15s, linear);
width: flex-grid(6);
a.register {
@include button(shiny, $blue);
......@@ -135,16 +219,15 @@
}
.social-sharing {
padding: 0px 20px;
float: left;
width: flex-grid(6);
p {
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));
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
border: 1px solid rgb(210,210,210);
border-top: 0;
@include border-bottom-radius(4px);
padding: 3px 10px;
margin: 0 auto;
@include border-radius(4px);
padding: 9px 10px;
color: $base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
......@@ -183,13 +266,14 @@
a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color;
@include inline-block;
font: normal 1.2rem/1.6rem $sans-serif;
font: italic 1.2rem/1.6rem $serif;
letter-spacing: 1px;
margin: 0 15px;
padding: 0px 5px 15px;
text-align: center;
text-transform: uppercase;
text-transform: lowercase;
&:first-child {
margin-left: 0px;
......@@ -223,6 +307,7 @@
.inner-wrapper {
> section {
margin-bottom: 40px;
&::after {
@extend .faded-hr-divider;
......@@ -230,38 +315,33 @@
display: none;
margin-top: 60px;
}
margin-bottom: 60px;
p + h2 {
margin-top: 40px;
}
}
}
.course-staff {
.teacher {
margin-bottom: 30px;
&::after {
@extend .faded-hr-divider;
content: "";
display: block;
margin-top: 30px;
}
.course-staff {
.teacher {
margin-bottom: 40px;
&:last-child {
&::after {
display: none;
h3 {
color: $base-font-color;
font-family: $sans-serif;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: 1px;
text-transform: uppercase;
}
}
.teacher-image {
background: rgb(255,255,255);
border: 1px solid rgb(200,200,200);
float: left;
margin: 0 15px 15px 0;
padding: 1px;
.teacher-image {
background: rgb(255,255,255);
border: 1px solid rgb(200,200,200);
float: left;
margin: 0 15px 15px 0;
padding: 1px;
}
}
}
}
......@@ -269,82 +349,114 @@
.course-sidebar {
@include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
border: 1px solid rgb(200,200,200);
border-top: none;
float: left;
padding-top: 40px;
padding: 30px 20px;
width: flex-grid(4);
h3 {
color: $lighter-base-font-color;
font-family: $serif;
font-weight: 300;
margin-bottom: 15px;
text-transform: uppercase;
}
header {
margin-bottom: 30px;
padding-bottom: 26px;
position: relative;
text-align: center;
> section {
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
background: rgb(245,245,245);
margin-bottom: 20px;
padding: 15px;
}
&::after {
@extend .faded-hr-divider;
content: "";
display: block;
height: 1px;
position: absolute;
bottom: 0px;
width: 100%;
}
.media {
border: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
margin-bottom: 20px;
padding: 1px;
width: flex-grid(12);
a.university-name {
border-right: 1px solid rgb(200,200,200);
color: $base-font-color;
font: italic 800 1.4rem/1.6rem $sans-serif;
@include inline-block;
letter-spacing: 0px;
margin-right: 15px;
padding-right: 15px;
.hero {
height: 180px;
overflow: hidden;
position: relative;
&:hover {
color: $lighter-base-font-color;
}
}
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px;
span {
font: 300 1.2rem/1.6rem $sans-serif;
}
}
&::after {
color: $base-font-color;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
top: 50%;
}
.important-dates {
list-style: none;
margin: 0px;
padding: 0px 10px;
li {
@include clearfix;
border-bottom: 1px dotted rgb(220,220,220);
margin-bottom: 20px;
padding-bottom: 10px;
p {
float: left;
font: 300 1.2rem/1.6rem $sans-serif;
}
img {
min-width: 100%;
background: rgb(230,230,230);
float: left;
height: 19px;
margin-right: 10px;
width: 19px;
}
span {
font: 700 1.2rem/1.6rem $sans-serif;
float: right;
}
}
}
.course-staff {
display: none;
.teacher {
margin-bottom: 30px;
&:hover {
cursor: pointer;
h3 {
color: $base-font-color;
font-family: $sans-serif;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: 1px;
text-transform: uppercase;
}
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
&::after {
@extend .faded-hr-divider;
content: "";
display: block;
margin-top: 30px;
}
&:last-child {
&::after {
color: $pink;
display: none;
}
}
.teacher-image {
background: rgb(255,255,255);
border: 1px solid rgb(200,200,200);
float: left;
margin: 0 15px 15px 0;
padding: 1px;
}
}
}
}
......
lms/static/sass/_index.scss
+ 2
− 1
View file @ 1ea8bd26
.home {
margin: 0px 0px 100px;
padding: 0px 0px 100px;
> header {
//background: rgb(250,250,250);
......@@ -198,6 +198,7 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
.lowercase {
color: $lighter-base-font-color;
text-transform: none;
}
}
......
lms/static/sass/_press_release.scss
+ 0
− 3
View file @ 1ea8bd26
......@@ -4,9 +4,6 @@
.container {
padding: 60px 0 120px;
h1 {
}
h1 + hr {
margin-bottom: 60px;
}
......
lms/static/sass/_shared_modal.scss
+ 5
− 0
View file @ 1ea8bd26
......@@ -231,6 +231,11 @@
text-align: center;
-webkit-font-smoothing: antialiased;
span {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
}
a {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
......
lms/templates/portal/course_about.html
+ 69
− 30
View file @ 1ea8bd26
......@@ -11,22 +11,31 @@
<div class="intro-inner-wrapper">
<section class="intro">
<hgroup>
<h1>${course.get_about_section("title")} <h2><a href="#">${course.get_about_section("university")}</a></h2></h1>
<h1>${course.get_about_section("title")}</h1><h2><a href="#">${course.get_about_section("university")}</a></h2>
</hgroup>
<div class="course-dates">
<p>Class Starts: <span class="start-date">7/12/12</span></p>
<p><span class="university"><a href="#">${course.get_about_section("university")}</a></span></p>
<p><span class="course-number">${course.get_about_section("number")}</span></p>
<p><span class="course-length">15 weeks</span></p>
<p>Start: <span class="start-date">7/12/12</span></p>
<p>Final Exam: <span class="start-date">12/09/12</span></p>
<p>Total Length: <span class="course-length">15 weeks</span></p>
</div>
</section>
<section class="actions">
<div class="register-wrapper">
<a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
</div>
<section class="social-sharing">
<p><span class="num-people-registered">1,435</span> students already registed!</p>
<section class="actions">
<div class="register-wrapper">
<a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
</div>
<section class="social-sharing">
<p><span class="num-people-registered">1,435</span> students already registed!</p>
</section>
</section>
</section>
<div class="media">
<div class="hero">
<img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div>
</div>
<%include file="../video_modal.html" />
</div>
</div>
</header>
......@@ -45,22 +54,70 @@
<section class="about">
<h2>About this course</h2>
<p>${course.get_about_section("description")}</p>
</section>
<section class="course-staff">
<h2>Course staff</h3>
<article class="teacher">
<div class="teacher-image">
<img src="${static.url('images/anant.jpg')}" />
</div>
<h3>Anant Agarwal</h3>
<p>Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”</p>
</article>
<article class="teacher">
<div class="teacher-image">
<img src="${static.url('images/gerald.jpg')}" />
</div>
<h3>Gerald Sussman</h3>
<p>Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.</p>
</article>
<article class="teacher">
<div class="teacher-image">
<img src="${static.url('images/piotr.jpg')}" />
</div>
<h3>Piotr Mitros</h3>
<p>Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.</p>
</article>
</section>
<section class="requirements">
<h2>Requirements</h2>
<p>${course.get_about_section("requirements")}</p>
</section>
<section class="syllabus">
<h2>Syllabus</h2>
<p>${course.get_about_section("syllabus")}</p>
</section>
<section class="text-book">
<h2>Textbook</h2>
${course.get_about_section("textbook")}
</section>
<section class="course-faq">
<h2>Frequently Asked Questions</h2>
<p>${course.get_about_section("faq")}</p>
<p>${course.get_about_section("more_info")}</p>
</section>
</section>
</div>
<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>
</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="start-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>
</ol>
<section class="course-staff">
<h2>Course staff</h3>
<article class="teacher">
......@@ -88,25 +145,7 @@
</article>
</section>
</section>
</div>
<section class="course-sidebar">
<div class="media">
<div class="hero">
<img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div>
</div>
<%include file="../video_modal.html" />
</div>
<section class="course-summary">
<h3>Course Sumamry</h3>
<p>${course.get_about_section("short_description")}</p>
</section>
<section class="dates">
<p>Course Number <span class="start-date">(${course.get_about_section("number")})</span></p>
</section>
</section>
</section>
</section>
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