Skip to content

E
edx-platform
Commit 3b28a17f by Galen Frechette
Options

refines some visual design to course objects, changes university logos on… 

refines some visual design to course objects, changes university logos on homepage, starts adding about pages and layout
parent 64719417
Showing with 436 additions and 76 deletions
lms/static/images/harvard.png
lms/static/images/harvard.png

22.2 KB | W: | H:

lms/static/images/harvard.png

9.47 KB | W: | H:

lms/static/images/harvard.png
lms/static/images/harvard.png
lms/static/images/harvard.png
lms/static/images/harvard.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/images/mit.png
lms/static/images/mit.png

1.9 KB | W: | H:

lms/static/images/mit.png

5.58 KB | W: | H:

lms/static/images/mit.png
lms/static/images/mit.png
lms/static/images/mit.png
lms/static/images/mit.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/sass/_about.scss
.about {
margin: 40px auto 120px;
> nav {
margin-bottom: 80px;
text-align: center;
width: flex-grid(12);
&::after {
@extend .faded-hr-divider;
content: "";
display: block;
}
a {
border-bottom: 3px solid transparent;
@include inline-block;
letter-spacing: 1px;
margin: 0px 5px;
padding: 20px 10px;
@include transition(all, 0.15s, linear);
text-transform: uppercase;
&:hover, &.active {
border-color: rgb(200,200,200);
color: $base-font-color;
}
}
}
.vision {
display: none;
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 {
text-align: right;
}
.photo {
float: right;
margin-left: flex-gutter();
}
}
&:last-child {
margin-bottom: 0px;
}
}
}
.faq {
//display: none;
@include clearfix;
nav.categories {
border-right: 1px solid rgb(220,220,220);
@include box-sizing(border-box);
float: left;
margin-right: flex-gutter();
padding-right: 20px;
width: flex-grid(3);
a {
display: block;
letter-spacing: 1px;
margin-right: -20px;
padding: 10px 20px 10px 0;
text-align: right;
text-transform: uppercase;
&:hover {
background: rgb(245,245,245);
}
}
}
.responses {
float: left;
width: flex-grid(9);
.category {
padding-top: 40px;
&:first-child {
padding-top: 0px;
}
> h2 {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 40px;
padding-bottom: 20px;
}
}
.response {
margin-bottom: 40px;
h3 {
font-family: $sans-serif;
font-weight: bold;
margin-bottom: 15px;
}
}
}
}
.press {
display: none;
.press-story {
border-bottom: 1px solid rgb(220,220,220);
@include clearfix;
margin-bottom: 40px;
padding-bottom: 40px;
&:last-child {
border: none;
margin: 0px;
padding: 0px;
}
.article-cover {
background: rgb(255,255,255);
border: 1px solid rgb(120,120,120);
@include box-sizing(border-box);
float: left;
height: 120px;
margin-right: flex-gutter();
overflow: hidden;
width: flex-grid(2);
img {
display: block;
min-height: 100%;
width: 100%;
}
}
.press-info {
float: left;
width: flex-grid(10);
header {
margin-bottom: 15px;
h3 {
font-family: $sans-serif;
font-weight: bold;
}
a {
}
}
}
}
}
.contact {
display: none;
@include clearfix;
margin: 0 auto;
width: flex-grid(10);
.map {
background: rgb(245,245,245);
float: left;
height: 180px;
margin-right: flex-gutter();
width: flex-grid(6);
}
.address {
float: left;
width: flex-grid(6);
}
}
}
lms/static/sass/_course_info.scss
......@@ -183,9 +183,9 @@
a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color;
@include inline-block;
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
margin: 0 15px;
padding: 0px 5px 15px;
text-align: center;
......@@ -196,8 +196,7 @@
}
&:hover, &.active {
border-color: $pink;
//background: rgb(240,240,240);
border-color: rgb(200,200,200);
color: $base-font-color;
}
}
......
lms/static/sass/_index.scss
......@@ -120,13 +120,12 @@
.partners {
font-size: 0em;
margin: 0 auto;
padding: 15px 0px;
padding: 20px 0px;
text-align: center;
li.partner {
@include inline-block;
margin-right: 20px;
padding-right: 20px;
padding: 0px 30px;
position: relative;
vertical-align: middle;
......@@ -134,10 +133,10 @@
@extend .faded-vertical-divider;
content: "";
display: block;
height: 100px;
height: 80px;
right: 0px;
position: absolute;
top: 0px;
top: -5px;
width: 1px;
}
......@@ -145,21 +144,14 @@
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 100px;
height: 80px;
right: 1px;
position: absolute;
top: 0px;
top: -5px;
width: 1px;
}
&.mit {
padding: 0 35px 0 20px;
}
&:last-child {
margin-right: 0px;
padding-right: 0px;
&::before {
display: none;
}
......@@ -171,7 +163,6 @@
}
a {
opacity: 0.7;
@include transition(all, 0.25s, ease-in-out);
&::before {
......@@ -191,21 +182,28 @@
}
.name {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
left: 0px;
position: absolute;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
bottom: -60px;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
width: 100%;
z-index: 2;
span {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all, 0.15s, ease-in-out);
&:hover {
color: $lighter-base-font-color;
}
}
}
img {
max-width: 140px;
max-width: 160px;
position: relative;
@include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
......@@ -213,18 +211,16 @@
}
&:hover {
opacity: 0.9;
&::before {
opacity: 1;
}
.name {
bottom: 30px;
bottom: 20px;
}
img {
top: -120px;
top: -100px;
}
}
}
......
lms/static/sass/_jobs.scss
......@@ -40,7 +40,7 @@
}
&.right {
h2, p {
h2 {
text-align: right;
}
......@@ -64,7 +64,6 @@
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 60px;
padding-bottom: 20px;
//text-align: center;
}
.jobs-sidebar {
......@@ -93,7 +92,7 @@
a {
display: block;
margin-left: -20px;
padding: 10px 0px 10px 20px;
padding: 10px 0 10px 20px;
position: relative;
text-transform: uppercase;
......@@ -111,9 +110,6 @@
&: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%));
}
}
}
......
lms/static/sass/_shared_list_of_courses.scss
......@@ -5,14 +5,15 @@
.course {
background: rgb(250,250,250);
border: 1px solid rgb(220,220,220);
border: 1px solid rgb(180,180,180);
@include border-radius(2px);
@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));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
float: left;
font-size: 0em;
margin-right: flex-gutter();
margin-bottom: 25px;
margin-bottom: 30px;
position: relative;
width: flex-grid(4);
@include transition(all, 0.15s, linear);
......@@ -20,6 +21,27 @@
margin-right: 0;
}
//.meta-info {
//background: rgba(0,0,0, 0.6);
//bottom: 8px;
//border: 1px solid rgba(0,0,0, 0.5);
//@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
//@include clearfix;
//left: -4px;
//position: absolute;
//@include transition(all, 0.15s, linear);
//p {
//color: rgb(255,255,255);
//font: 300 1.2rem/1.4rem $sans-serif;
//padding: 5px 12px;
//&.university {
//float: left;
//}
//}
//}
.inner-wrapper {
border: 1px solid rgba(255,255,255, 1);
height: 100%;
......@@ -36,7 +58,7 @@
z-index: 3;
> 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(255,255,255, 1), rgba(255,255,255, 0.85)));
@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;
......@@ -83,6 +105,10 @@
color: $blue;
opacity: 1;
}
h2 {
text-decoration: underline;
}
}
}
}
......@@ -127,7 +153,8 @@
img {
display: block;
min-width: 100%;
min-height: 100%;
width: 100%;
}
}
......@@ -144,8 +171,8 @@
&:hover {
background: rgb(245,245,245);
border-color: rgb(190,190,190);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
border-color: rgb(170,170,170);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.4));
.info {
top: -130px;
......
lms/templates/course.html
......@@ -20,7 +20,7 @@
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/history.png')}">
<img src="${static.url('images/courses/history.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
......@@ -30,29 +30,152 @@
</article>
%endfor
<!--
-<article class="course">
- <a href="/course_info">
- <div class="cover">
- <div class="shade"></div>
- <div class="arrow"></div>
- <img src="${static.url('images/history.png')}" />
- </div>
- <section class="info">
- <hgroup>
- <h2>${course.title}</h2>
- <p>${",".join(course.instructors)} &mdash; ${course.institution}</p>
- <p>${course.id}</p>
- <p><a href="courses/${course.id}/info">courseware</a></p>
- </hgroup>
- <div class="edit">Register</div>
- <section class="meta">
- <div class="dates">
- <p>Starts: <time>6/10/12</time></p>
- <p>Ends: <time>9/23/12</time></p>
- </div>
- </section>
- </section>
- </a>
-</article>
-->
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.institution}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/math.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.institution}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/python.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.institution}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/space1.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.institution}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/space2.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.institution}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/space4.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.institution}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/space3.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
lms/templates/index.html
......@@ -29,22 +29,28 @@
<section class="university-partners">
<ol class="partners">
<li class="partner">
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley_bw.png')}" />
<div class="name">BerkeleyX</div>
<img src="${static.url('images/mit.png')}" />
<div class="name">
<span>MITx</span>
</div>
</a>
</li>
<li class="partner mit">
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/mit_bw.png')}" />
<div class="name">MITx</div>
<img src="${static.url('images/harvard.png')}" />
<div class="name">
<span>HarvardX</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
<img src="${static.url('images/berkeley.png')}" />
<div class="name">
<span>BerkeleyX</span>
</div>
</a>
</li>
</ol>
......
lms/templates/portal/course_about.html
......@@ -93,7 +93,7 @@
<section class="course-sidebar">
<div class="media">
<div class="hero">
<img src="${static.url('images/history.png')}" />
<img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div>
</div>
<%include file="../video_modal.html" />
......
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