Skip to content

E
edx-platform
Commit 24f4ea7f by Kyle Fiedler
Options

merged sidebar branch

parents c48b2479 74d4436d
Showing with 240 additions and 129 deletions
courseware.html
<%inherit file="main.html" />
<%block name="headextra">
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<script type="text/javascript">
$(function() {
${init}
// Show and hide sidebar
var acc_hidden=false;
$('#hide_acc').click(function() {
if(acc_hidden) {
$('#accordion').show();
$('#acc_td').attr("width","320");
$('#hide_acc').html("&lt;<br>&lt;<br>&lt;");
acc_hidden=false;
} else {
$('#accordion').hide();
$('#acc_td').attr("width","0");
$('#hide_acc').html("&gt;<br>&gt;<br>&gt;");
acc_hidden=true;
}
});
});
</script>
</%block>
<%include file="navigation.html" args="active_page='courseware'" />
<section class="main-content">
<div class="course-wrapper">
<section class="course-index">
<div id="open_close_accordion">
<header id="open_close_accordion">
<h2>Courseware Index</h2>
<a href="#">close</a>
</div>
</header>
<div id="accordion">
${accordion}
......
main.html
......@@ -117,5 +117,7 @@ $(function() {
});
</script>
<%block name="js_extra"/>
</body>
</html>
sass/_info.scss
......@@ -43,8 +43,10 @@ div.info-wrapper {
border-left: 1px solid #d3d3d3;
h1 {
padding: 0 lh();
padding: lh(.5) lh();
font-size: 18px;
margin: 0 ;
@extend .bottom-border;
}
ol {
......
sass/_profile.scss
......@@ -9,8 +9,10 @@ div.profile-wrapper {
border-right: 0;
h1 {
padding:0 lh();
padding: lh(.5) lh();
font-size: 18px;
margin: 0 ;
@extend .bottom-border;
}
ul {
......
sass/_textbook.scss
div.book-wrapper {
@extend .table-wrapper;
ul#booknav {
section.book-sidebar {
@extend .sidebar;
@include box-sizing(border-box);
@extend .tran;
a {
color: #000;
ul#booknav {
&:hover {
color: #666;
}
}
li {
background: none;
padding-left: 30px;
div.hitarea {
margin-left: -22px;
background-image: url('/static/images/treeview-default.gif');
position: relative;
top: 4px;
a {
color: #000;
&:hover {
opacity: 0.6;
filter: alpha(opacity=60);
color: #666;
}
}
ul {
li {
background: none;
padding-left: 30px;
div.hitarea {
margin-left: -22px;
background-image: url('/static/images/treeview-default.gif');
position: relative;
top: 4px;
&:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
}
ul {
background: none;
}
}
}
> li {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: 7px 7px 7px 30px;
> li {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: 7px 7px 7px 30px;
}
}
}
......@@ -92,4 +96,36 @@ div.book-wrapper {
}
}
}
&.closed {
section.book-sidebar {
width: flex-grid(.6);
header#open_close_accordion {
padding: 0;
a {
background-image: url('/static/images/slide-right-icon.png');
}
h2 {
visibility: hidden;
width: 10px;
padding: 0;
}
}
ul#booknav {
visibility: hidden;
width: 10px;
padding: 0;
overflow: hidden;
max-height: 100px;
}
}
section.course-content {
width: flex-grid(11.5) + flex-gutter();
}
}
}
sass/base/_extends.scss
......@@ -10,8 +10,8 @@
margin: 0 auto;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
text-align: left;
width: flex-grid(12);
div.table-wrapper {
display: table;
......@@ -20,24 +20,24 @@
}
h1.top-header {
margin: (-(lh())) (-(lh())) lh();
padding: lh();
background: #f3f3f3;
border-bottom: 1px solid #e3e3e3;
margin: (-(lh())) (-(lh())) lh();
padding: lh();
}
.button {
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
@include border-radius(3px);
border: 1px solid darken(#888, 10%);
padding: 4px 8px;
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
color: #fff;
font: bold $body-font-size $body-font-family;
cursor: pointer;
-webkit-font-smoothing: antialiased;
text-shadow: none;
font: bold $body-font-size $body-font-family;
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
padding: 4px 8px;
text-decoration: none;
text-shadow: none;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
......@@ -47,8 +47,8 @@ h1.top-header {
}
.content {
@include box-sizing(border-box);
@include box-shadow(inset 0 0 2px 3px #f3f3f3);
@include box-sizing(border-box);
display: table-cell;
padding: lh();
vertical-align: top;
......@@ -56,39 +56,51 @@ h1.top-header {
}
.sidebar {
@include box-shadow( inset 0 0 0 1px #f6f6f6);
@include box-sizing(border-box);
@include border-radius(4px 0 0 4px);
background: #e3e3e3;
@include border-radius(4px 0 0 4px);
border-right: 1px solid #d3d3d3;
@include box-shadow( inset 0 0 0 1px #f6f6f6);
@include box-sizing(border-box);
display: table-cell;
font-family: $body-font-family;
position: relative;
text-shadow: 0 1px 0 #f1f1f1;
vertical-align: top;
width: flex-grid(3);
position: relative;
h3 {
h1, h2 {
font-size: 18px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
.bottom-border {
@include box-shadow(0 1px 0 #eee);
background: none;
border-bottom: 1px solid #d3d3d3;
}
h3 {
border: none;
border-bottom: 1px solid #d3d3d3;
@extend .bottom-border;
background: none;
color: #000;
font-weight: normal;
margin: 0;
overflow: hidden;
a {
@include transition();
color: lighten($text-color, 10%);
display: block;
font-size: $body-font-size;
padding: 7px 7px 7px 30px;
text-decoration: none;
@include transition();
&:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef;
@include box-shadow(0 1px 0 #fff);
}
}
......@@ -97,10 +109,10 @@ h1.top-header {
}
&.active {
@include box-shadow(none);
background: none;
border: 0;
border-bottom: 1px solid #bbb;
@include box-shadow(none);
color: #000;
font-weight: bold;
......@@ -110,19 +122,48 @@ h1.top-header {
}
}
header#open_close_accordion {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: lh(.5) lh();
position: relative;
h2 {
padding-right: 20px;
margin: 0;
}
a {
background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3;
@include border-radius(3px 0 0 3px);
height: 16px;
padding: 8px;
position: absolute;
right: -1px;
text-indent: -9999px;
top: 6px;
width: 16px;
&:hover {
background-color: white;
}
}
}
a.button {
text-decoration: none;
}
}
.topbar {
@extend .clearfix;
background: #F6EFD4;
border-bottom: 1px solid darken(#F6EFD4, 10%);
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
@include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
font-size: 12px;
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
text-shadow: 0 1px 0 #fff;
@include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
@extend .clearfix;
a {
color: darken(#F6EFD4, 80%);
......@@ -133,12 +174,12 @@ h1.top-header {
}
&.block-link {
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
background: darken(#F6EFD4, 5%);
border-left: 1px solid darken(#f6efd4, 20%);
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
display: block;
padding: lh(.75);
text-transform: uppercase;
display: block;
&:hover {
background: none;
......@@ -146,3 +187,7 @@ h1.top-header {
}
}
}
.tran {
@include transition( all, .2s, $ease-in-out-quad);
}
sass/courseware/_courseware.scss
......@@ -5,10 +5,6 @@ div.course-wrapper {
list-style: none;
}
.tran {
@include transition( all, .2s, $ease-in-out-quad);
}
section.course-content {
@extend .content;
......@@ -160,7 +156,7 @@ div.course-wrapper {
section.course-index {
width: flex-grid(.6);
div#open_close_accordion {
header#open_close_accordion {
padding: 0;
a {
......
sass/courseware/_sidebar.scss
......@@ -2,34 +2,6 @@ section.course-index {
@extend .sidebar;
@extend .tran;
div#open_close_accordion {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 0 lh();
position: relative;
h2 {
padding-right: 20px;
}
a {
width: 16px;
text-indent: -9999px;
height: 16px;
position: absolute;
padding: 8px;
top: -12px;
right: -1px;
border: 1px solid #D3D3D3;
background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
@include border-radius(3px 0 0 3px);
&:hover {
background-color: white;
}
}
}
div#accordion {
h3 {
......
sass/discussion/_profile.scss
......@@ -3,15 +3,19 @@ body.user-profile-page {
// @extend .sidebar;
header {
@extend .clearfix;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: 0 lh();
margin: 0 (-(lh())) lh();
section {
float: left;
width: flex-grid(2, 3);
margin-right: flex-gutter(3);
h1 {
@extend h2;
margin-top: 0;
}
h1 {
margin-top: 0;
}
}
p.karma {
......
sass/discussion/_sidebar.scss
div.discussion-wrapper aside {
@extend .sidebar;
@include box-shadow(inset 1px 0 0 #f6f6f6);
@include border-radius(0 4px 4px 0);
border-left: 1px solid #d3d3d3;
@include border-radius(0 4px 4px 0);
border-right: 1px solid #f6f6f6;
@include box-shadow(inset 1px 0 0 #f6f6f6);
padding: lh();
width: flex-grid(3);
h1 {
@extend .bottom-border;
margin: (-(lh())) (-(lh())) 0;
padding: lh(.5) lh();
}
h2 {
color: #4D4D4D;
......@@ -27,17 +31,28 @@ div.discussion-wrapper aside {
}
div.box {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
display: block;
padding-bottom: 20px;
overflow: hidden;
margin: lh(.5) 0;
&:last-child {
@include box-shadow(none);
border: 0;
}
h2 {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
&:not(.first) {
@include box-shadow(inset 0 1px 0 #eee);
border-top: 1px solid #d3d3d3;
margin: 0 (-(lh())) 0;
padding: lh(.5) lh();
}
}
&.contributors {
a {
......@@ -70,11 +85,8 @@ div.discussion-wrapper aside {
}
}
#displayTagFilterControl {
margin-top: 10px;
}
div.search-box {
margin-top: lh(.5);
input {
@include box-sizing(border-box);
display: inline;
......@@ -118,6 +130,34 @@ div.discussion-wrapper aside {
}
}
div#tagSelector {
h2 {
@include box-shadow(inset 0 1px 0 #eee);
border-top: 1px solid #d3d3d3;
margin: 0 (-(lh())) 0;
padding: lh(.5) lh();
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
}
ul {
margin: 0;
}
div.inputs {
margin-bottom: lh();
}
div#displayTagFilterControl {
p.choice {
@include inline-block();
margin-right: lh(.5);
}
}
}
// Question view sopecific
div.follow-buttons {
......@@ -136,11 +176,10 @@ div.discussion-wrapper aside {
div.question-stats {
ul {
color: #777;
list-style: none;
li {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
padding: 7px 0;
padding: 7px 0 0;
&:last-child {
@include box-shadow(none);
......
sass/layout/_layout.scss
......@@ -11,13 +11,13 @@ html {
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
overflow: hidden;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #bbb;
@include box-shadow(0 0 4px #dfdfdf);
@include box-sizing(border-box);
margin-top: 3px;
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
overflow: hidden;
@media screen and (min-width: 1400px) {
@include border-radius(4px);
......
sass/wiki/_sidebar.scss
......@@ -2,6 +2,13 @@ div#wiki_panel {
@extend .sidebar;
overflow: auto;
h2 {
padding: lh(.5) lh();
font-size: 18px;
margin: 0 ;
@extend .bottom-border;
}
input[type="button"] {
@extend h3;
@include transition();
......
simplewiki_base.html
......@@ -77,6 +77,7 @@
<div class="wiki-wrapper">
<%block name="wiki_panel">
<div id="wiki_panel">
<h2>Course Wiki</h2>
<%
if (wiki_article is not UNDEFINED):
baseURL = reverse("wiki_view", args=[wiki_article.get_url()])
......
staticbook.html
<%inherit file="main.html" />
<%block name="js_extra">
<script>
var page=${ page };
......@@ -32,18 +34,35 @@ function next_page() {
goto_page(newpage);
log_event("book", {"type":"nextpage","new":page});
}
$("#open_close_accordion a").click(function(){
if ($(".book-wrapper").hasClass("closed")){
$(".book-wrapper").removeClass("closed");
} else {
$(".book-wrapper").addClass("closed");
}
});
</script>
</%block>
<%include file="navigation.html" args="active_page='book'" />
<section class="main-content">
<div class="book-wrapper">
<ul id="booknav" class="treeview-booknav">
<%include file="book_toc.html" />
</ul>
<section class="book">
<section class="book-sidebar">
<header id="open_close_accordion">
<h2>Table of Contents</h2>
<a href="#">close</a>
</header>
<ul id="booknav" class="treeview-booknav">
<%include file="book_toc.html" />
</ul>
</section>
<section class="book">
<section class="page">
<nav>
<ul>
......
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