Skip to content

E
edx-platform
Commit 61fa1184 by David Ormsbee
Options

Merge pull request #325 from MITx/feature/kfiedler/courseware-style 

Navigation style and make askbot have style
parents f3567ddd b5b0d086
Showing with 88 additions and 154 deletions
lms/askbot/skins/mitx/templates/base.html
......@@ -20,7 +20,7 @@
{% include "widgets/header.html" %} {# Logo, user tool navigation and meta navitation #}
{# include "widgets/secondary_header.html" #} {# Scope selector, search input and ask button #}
<section class="main-content">
<section class="container">
{% block body %}
{% endblock %}
</section>
......
lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html
{% load extra_filters_jinja %}
<!--<link href="{{"/style/style.css"|media }}" rel="stylesheet" type="text/css" />-->
{{ 'application' | compressed_css }}
{{ 'course' | compressed_css }}
lms/askbot/skins/mitx/templates/navigation.jinja.html
<header class="app" aria-label="Global Navigation">
<header class="global" aria-label="Global Navigation">
<nav>
<a href="{{ MITX_ROOT_URL }}" class="logo">
<img src="/static/images/logo.png" />
</a>
{%if request.user.is_authenticated(): %}
<h1>Circuits and Electronics</h1>
<ol class="user">
<li>
<a href="/dashboard" class="user-dashboard">
<span class="avatar"><img src="/static/images/profile.jpg" /></span>
{{ request.user.username }}
</a>
<h1 class="logo"><a href="${reverse('root')}"></a></h1>
<ol class="left">
<li class="primary">
<a href="${reverse('courses')}">Find Courses</a>
</li>
<li>
<a href="#" class="options">&#9662</a>
<ol class="user-options">
<li><a href="#">Account Settings</a></li>
<li><a href="/logout">Log Out</a></li>
</ol>
</li>
</ol>
{%else:%}
<ol>
<li><a href="/courses">Courses</a></li>
<li><a href="#">How It Works</a></li>
</ol>
<ol class="user">
<li><a href="/dashboard">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ol>
<ol class="secondary">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Jobs</a>
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="avatar"></span>
${user.username}
</a>
</li>
<li>
<a href="#">faq</a>
<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_edx')}">Help</a></li>
<li><a href="${reverse('logout')}">Log Out</a></li>
</ul>
</li>
</ol>
{%endif %}
</nav>
</header>
lms/askbot/skins/mitx/templates/widgets/footer.html
<!-- template footer.html -->
<footer>
<!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
<p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
</p>
<nav>
<ul class="social">
<li class="linkedin">
<a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/MyMITx">Twitter</a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
</li>
</ul>
<ul>
<footer>
<nav>
<section class="top">
<section class="primary">
<a href="${reverse('root')}" class="logo"></a>
<a href="${reverse('courses')}">Find Courses</a>
<a href="${reverse('about_edx')}">About</a>
<a href="http://edxonline.tumblr.com/">Blog</a>
<a href="${reverse('jobs')}">Jobs</a>
<a href="${reverse('contact')}">Contact</a>
</section>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
</nav>
</footer>
<section class="social">
<a href="http://youtube.com/user/edxonline"><img src="${static.url('images/social/youtube-sharing.png')}" /></a>
<a href="https://plus.google.com/108235383044095082735"><img src="${static.url('images/social/google-plus-sharing.png')}" /></a>
<a href="http://www.facebook.com/EdxOnline"><img src="${static.url('images/social/facebook-sharing.png')}" /></a>
<a href="https://twitter.com/edXOnline"><img src="${static.url('images/social/twitter-sharing.png')}" /></a>
</section>
</section>
<section class="bottom">
<section class="copyright">
<p style="float:left;">&copy; 2012 edX, some rights reserved.</p>
</section>
<section class="secondary">
<a href="${reverse('tos')}">Terms of Service</a>
<a href="${reverse('privacy_edx')}">Privacy Policy</a>
<a href="${reverse('honor')}">Honor Code</a>
<a href="${reverse('help_edx')}">Help</a>
</section>
</section>
</nav>
</footer>
<!-- end template footer.html -->
lms/envs/common.py
......@@ -304,7 +304,7 @@ PIPELINE_CSS = {
'output_filename': 'css/lms-application.css',
},
'course': {
'source_filenames': ['sass/course.scss', 'js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', 'css/vendor/jquery.qtip.min.css'],
'source_filenames': ['js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', 'css/vendor/jquery.qtip.min.css', 'sass/course.scss'],
'output_filename': 'css/lms-course.css',
},
'ie-fixes': {
......
lms/static/sass/course/_help.scss deleted 100644 → 0
section.help.main-content {
padding: lh();
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: lh();
margin-top: 0;
padding-bottom: lh();
}
p {
max-width: 700px;
}
h2 {
margin-top: 0;
}
section.self-help {
float: left;
margin-bottom: lh();
margin-right: flex-gutter();
width: flex-grid(6);
ul {
margin-left: flex-gutter(6);
li {
margin-bottom: lh(.5);
}
}
}
section.help-email {
float: left;
width: flex-grid(6);
dl {
display: block;
margin-bottom: lh();
dd {
margin-bottom: lh();
}
dt {
clear: left;
float: left;
font-weight: bold;
width: flex-grid(2, 6);
}
}
}
}
lms/static/sass/course/base/_base.scss
......@@ -5,3 +5,11 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: $sans-serif;
}
table {
table-layout: fixed;
}
.container {
padding: lh(2);
}
lms/static/sass/course/base/_extends.scss
......@@ -84,7 +84,8 @@ h1.top-header {
}
.sidebar {
border-right: 1px solid #d3d3d3;
border-right: 1px solid #C8C8C8;
@include box-shadow(inset -1px 0 0 #e6e6e6);
@include box-sizing(border-box);
display: table-cell;
font-family: $sans-serif;
......@@ -181,7 +182,6 @@ h1.top-header {
.topbar {
@extend .clearfix;
background: $cream;
border-bottom: 1px solid darken($cream, 10%);
border-top: 1px solid #fff;
font-size: 12px;
......
lms/static/sass/course/courseware/_courseware.scss
......@@ -3,22 +3,6 @@ html {
max-height: 100%;
}
body.courseware {
height: 100%;
max-height: 100%;
.container {
padding-bottom: 40px;
margin-top: 20px;
}
footer {
&.fixed-bottom {
Position: static;
}
}
}
div.course-wrapper {
@extend .table-wrapper;
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -13,44 +13,50 @@ section.course-index {
div#accordion {
h3 {
@include box-shadow(inset 0 1px 0 0 #eee);
border-top: 1px solid #d3d3d3;
overflow: hidden;
@include border-radius(0);
border-top: 1px solid #e3e3e3;
margin: 0;
overflow: hidden;
&:first-child {
border: none;
}
&:hover {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
background: #eee;
}
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
@include border-radius(0);
@include box-shadow(none);
color: lighten($text-color, 10%);
font-size: $body-font-size;
}
&.ui-state-active {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
@extend .active;
border-bottom: 1px solid #d3d3d3;
border-bottom: none;
&:hover {
background: none;
}
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow(inset -1px 0 0 #e6e6e6);
background: #FFF;
border: none;
font-size: 12px;
margin: 0;
padding: 1em 1.5em;
li {
@include border-radius(0);
margin-bottom: lh(.5);
a {
......@@ -120,8 +126,6 @@ section.course-index {
font-weight: bold;
> a {
background: rgb(240,240,240);
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
border-color: rgb(200,200,200);
&:after {
......
lms/static/sass/course/discussion/_discussion.scss
// Generic layout styles for the discussion forums
body.askbot {
section.main-content {
section.container {
div.discussion-wrapper {
@extend .table-wrapper;
......
lms/static/sass/course/layout/_courseware_subnav.scss
nav.course-material {
background: rgb(210,210,210);
@include clearfix;
@include box-sizing(border-box);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.05));
border-bottom: 1px solid rgb(190,190,190);
background: #f6f6f6;
border-bottom: 1px solid rgb(200,200,200);
margin: 0px auto 0px;
padding: 0px;
width: 100%;
......@@ -24,12 +23,14 @@ nav.course-material {
list-style: none;
a {
color: $lighter-base-font-color;
color: darken($lighter-base-font-color, 20%);
display: block;
text-align: center;
padding: 5px 13px;
padding: 8px 13px 12px;
font-size: 14px;
font-weight: 400;
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-shadow: 0 1px rgb(255,255,255);
&:hover {
color: $base-font-color;
......@@ -41,7 +42,7 @@ nav.course-material {
border-bottom: 0px;
@include border-top-radius(4px);
@include box-shadow(0 2px 0 0 rgba(255,255,255, 1));
color: $base-font-color;
color: $blue;
}
}
}
......
lms/templates/courseware.html
......@@ -35,7 +35,6 @@
<div class="course-wrapper">
<section aria-label="Course Navigation" class="course-index">
<header id="open_close_accordion">
<h2>Courseware Index</h2>
<a href="#">close</a>
</header>
......
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