Skip to content

E
edx-platform
Commit 77f1228a by Piotr Mitros
Options

merge

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