Skip to content

E
edx-platform
Commit 53303968 by David Ormsbee
Options

Merge pull request #251 from MITx/kf-multicourse-design 

Kf multicourse design
parents d6a67ef9 64b92c35
Showing with 160 additions and 20 deletions
lms/envs/common.py
......@@ -293,9 +293,13 @@ PIPELINE_CSS = {
'source_filenames': ['sass/application.scss'],
'output_filename': 'css/application.css',
},
'ie-fixes': {
'source_filenames': ['sass/ie.scss'],
'output_filename': 'css/ie.css',
},
}
PIPELINE_ALWAYS_RECOMPILE = ['sass/application.scss']
PIPELINE_ALWAYS_RECOMPILE = ['sass/application.scss', 'sass/ie.scss']
PIPELINE_JS = {
'application': {
......
lms/static/sass/_courses.scss
......@@ -22,13 +22,13 @@
width: flex-grid(12);
> hgroup {
background: #FFF;
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
padding: 20px 30px;
position: relative;
z-index: 2;
}
&.main-search, &.university-search {
......
lms/static/sass/_home.scss
......@@ -24,6 +24,7 @@
}
.title {
background: #FFF;
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
......@@ -189,6 +190,7 @@
}
.media {
background: #FFF;
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
@include box-sizing(border-box);
......@@ -226,6 +228,7 @@
width: 60px;
&::after {
color: #fff;
color: rgba(255,255,255, 0.8);
content: "\25B6";
display: block;
......@@ -254,6 +257,7 @@
border-color: rgba(255,255,255, 0.9);
&::after {
color: #fff;
color: rgba(255,255,255, 1);
}
}
......
lms/static/sass/ie.scss 0 → 100644
@import "bourbon/bourbon";
@import "base/variables";
// These are all quick solutions for IE please rewrite
.highlighted-courses .courses .course header.course-preview, .find-courses .courses .course header.course-preview,
.home .highlighted-courses > h2, .home .highlighted-courses > section.outside-app h1, section.outside-app .home .highlighted-courses > h1,
header.global {
background: #FFF;
}
.home > header .title .actions,
.home > header .title:hover .actions {
display: none;
height: auto;
}
.home > header .title {
&:hover {
height: 120px;
> hgroup {
h1 {
border-bottom: 0;
padding-bottom: 0;
}
h2 {
opacity: 1;
}
}
.actions {
opacity: 0;
}
}
}
.last {
margin-right: 0 !important;
}
.home .university-partners .partners a {
.name {
position: static;
}
&:hover {
text-decoration: none;
&::before {
opacity: 1;
}
.name {
bottom: 0px;
}
img {
top: 0px;
}
}
}
.home .university-partners .partners {
width: 660px;
li.partner {
float: left;
display: block;
padding: 0;
width: 220px;
overflow: hidden;
}
}
.highlighted-courses .courses .course, .find-courses .courses .course {
.meta-info {
display: none;
}
.inner-wrapper {
height: 100%;
overflow: visible;
position: relative;
}
header.course-preview {
left: 0px;
position: relative;
top: 0px;
width: 100%;
z-index: 3;
height: auto;
hgroup {
position: relative;
right: 0;
top: 0;
}
}
// }
.info {
height: auto;
position: static;
overflow: visible;
.desc {
height: auto;
}
}
&:hover {
background: rgb(245,245,245);
border-color: rgb(170,170,170);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.4));
.info {
top: 0;
}
.meta-info {
opacity: 0;
}
}
}
lms/static/sass/shared/_course_object.scss
......@@ -141,6 +141,7 @@
top: 0px;
@include transition(all, 0.15s, linear);
width: 100%;
overflow: hidden;
.cover-image {
height: 200px;
......@@ -174,7 +175,6 @@
padding: 0px 10px 10px 10px;
width: 100%;
.university {
border-right: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
......
lms/templates/courses.html
......@@ -30,7 +30,7 @@
<%include file="course.html" args="course=course" />
%endfor
</section>
<section class='university-column'>
<section class='university-column last'>
%for course in universities['BerkeleyX']:
<%include file="course.html" args="course=course" />
%endfor
......
lms/templates/index.html
......@@ -36,7 +36,7 @@
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${static.url('images/courses/edx_hp_video_thumbsmall.jpg')}" />
<img src="${static.url('images/courses/video-thumb.jpg')}" />
<div class="play-intro"></div>
</div>
</a>
......@@ -66,7 +66,7 @@
</div>
</a>
</li>
<li class="partner">
<li class="partner last">
<a href="${reverse('university_profile', args=['BerkeleyX'])}">
<img src="${static.url('images/university/berkeley/berkeley.png')}" />
<div class="name">
......@@ -88,7 +88,7 @@
<%include file="course.html" args="course=course" />
%endfor
</section>
<section class='university-column'>
<section class='university-column last'>
%for course in universities['BerkeleyX']:
<%include file="course.html" args="course=course" />
%endfor
......
lms/templates/main.html
......@@ -9,10 +9,16 @@
% if settings.MITX_FEATURES['USE_DJANGO_PIPELINE']:
<%static:css group='application'/>
<!--[if lt IE 9]>
<%static:css group='ie-fixes'/>
<![endif]-->
% endif
% if not settings.MITX_FEATURES['USE_DJANGO_PIPELINE']:
<link rel="stylesheet" href="/static/sass/application.css" type="text/css" media="all" / >
<!--[if lt IE 9]>
<link rel="stylesheet" href="/static/sass/ie.css" type="text/css" media="all" / >
<![endif]-->
% endif
<script type="text/javascript" src="${static.url('js/vendor/jquery.min.js')}"></script>
......@@ -64,10 +70,6 @@
<body class="<%block name='bodyclass'/>">
<%include file="navigation.html" />
<!--[if lte IE 9]>
<p class="ie-warning">You are using a browser that is not supported by <span class="edx">edX</span>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
<![endif]-->
<section class="content-wrapper">
${self.body()}
</section>
......
lms/templates/signup_modal.html
......@@ -19,14 +19,14 @@
<div id="enroll_error" name="enroll_error"></div>
<div class="input-group">
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail">
<label>Password</label>
<input name="password" type="password" placeholder="Password">
<label>Public Username</label>
<input name="username" type="text" placeholder="Public Username">
<label>E-mail*</label>
<input name="email" type="email" placeholder="E-mail*">
<label>Password*</label>
<input name="password" type="password" placeholder="Password*">
<label>Public Username*</label>
<input name="username" type="text" placeholder="Public Username*">
<label>Full Name</label>
<input name="name" type="text" placeholder="Full Name">
<input name="name" type="text" placeholder="Full Name*">
<label>Mailing address</label>
<textarea name="mailing_address" placeholder="Mailing address"></textarea>
</div>
......@@ -86,13 +86,13 @@
<label class="terms-of-service">
<input name="terms_of_service" type="checkbox" value="true">
I agree to the
<a href="${reverse('tos')}">Terms of Service</a>
<a href="${reverse('tos')}">Terms of Service</a>*
</label>
<label class="honor-code">
<input name="honor_code" type="checkbox" value="true">
I agree to the
<a href="${reverse('honor')}">Honor Code</a>
<a href="${reverse('honor')}">Honor Code</a>*
</label>
</div>
......
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