Skip to content

E
edx-platform
Commit ec548fda by Kyle Fiedler
Options

Added style for sequence nav and reworked courseware problems

parent 4bf5e4e1
Showing with 311 additions and 179 deletions
homework.html
......@@ -4,6 +4,7 @@
% for problem in homework['problems']:
<li>
<h2>${ problem['name'] }</h2>
${ problem['html'] }
<section>
......
problem.html
<h2>${ problem['name'] }</h2>
<p> ${ problem['html'] } </p>
<section class="problem">
${ problem['html'] }
<section class="action">
<input type="hidden" name="problem_id" value="${ problem['name'] }">
% if check_button:
<input id="check_${ id }" type="button" value="Check ${ attempts }" >
<input id="check_${ id }" type="button" value="Check ${ attempts }" >
% endif
% if reset_button:
<input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
<input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
% endif
% if save_button:
<input id="save_${ id }" type="button" value="Save" >
<input id="save_${ id }" type="button" value="Save" >
% endif
% if answer_available:
<input id="show_${ id }" type="button" value="Show Answer" >
<input id="show_${ id }" type="button" value="Show Answer" >
% endif
% if explain :
<a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
<a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
% endif
</section>
</section>
problem_ajax.html
<div id="main_${id}"></div>
<section id="main_${id}" class="problems-wrapper"></section>
sass/_base-extends.scss
......@@ -39,6 +39,7 @@
.content {
@include box-sizing(border-box);
@include box-shadow(inset 0 0 2px 3px #f3f3f3);
display: table-cell;
padding: lh();
vertical-align: top;
......@@ -46,8 +47,9 @@
}
.sidebar {
@include box-shadow( inset -1px 0 0 #f6f6f6);
@include box-shadow( inset 0 0 0 1px #f6f6f6);
@include box-sizing(border-box);
@include border-radius(4px 0 0 4px);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
display: table-cell;
......@@ -106,6 +108,7 @@
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
font-size: 12px;
text-shadow: 0 1px 0 #fff;
@include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
@extend .clearfix;
a {
......
sass/_base.scss
......@@ -41,6 +41,14 @@ em {
}
}
a:link, a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
input[type="submit"], input[type="button"], button {
@extend .button;
}
......
sass/_courseware-sequence-nav.scss 0 → 100644
nav.sequence-nav {
@extend .topbar;
margin-bottom: $body-line-height;
ol {
a {
@extend .block-link;
}
.inactive {
background-repeat: no-repeat;
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
.visited {
background-color: shade(#F6EFD4, 10%);
background-repeat: no-repeat;
border-color: shade(#F6EFD4, 10%);
&:hover {
background-color: #F6EFD4;
}
}
.active {
// @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
@include box-shadow(0 1px 0 #fff);
background-color: #fff;
background-repeat: no-repeat;
&:hover {
background-color: #fff;
}
}
li {
border: none;
border-right: 1px solid darken(#F6EFD4, 10%);
@include box-shadow(1px 0 0 #fff);
cursor: pointer;
display: table-cell;
padding: lh(.75);
float: left;
width: 18px;
//problem
// &.seq_problem_inactive {
// width: 14px;
// background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
// @extend .inactive;
// }
// &.seq_problem_visited {
// width: 14px;
// background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
// &:hover {
// background-color: #F6EFD4;
// }
// }
// &.seq_problem_active {
// width: 14px;
// background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
// @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
// &:hover {
// background-color: #F6EFD4;
// }
// }
//video
&.seq_video_inactive {
@extend .inactive;
background-image: url('/static/images/video-icon.png');
background-position: 13px 15px;
}
&.seq_video_visited {
@extend .visited;
background-image: url('/static/images/video-icon.png');
background-position: -81px 15px;
}
&.seq_video_active {
@extend .active;
background-image: url('/static/images/video-icon.png');
background-position: -32px 15px;
}
//vertical
&.seq_vertical_inactive, &.seq_problem_inactive {
background-image: url('/static/images/vertical-icon.png');
background-position: -82px 15px;
@extend .inactive;
}
&.seq_vertical_visited, &.seq_problem_visited {
background-image: url('/static/images/vertical-icon.png');
background-position: 13px 15px;
@extend .visited;
}
&.seq_vertical_active, &.seq_problem_active {
background-image: url('/static/images/vertical-icon.png');
background-position: -35px 15px;
@extend .active;
}
}
}
ul {
float: right;
margin-right: 1px;
li {
float: left;
&.prev, &.next {
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
background: darken(#F6EFD4, 5%);
border-left: 1px solid darken(#f6efd4, 20%);
color: darken(#F6EFD4, 80%);
float: right;
letter-spacing: 1px;
padding: lh(.75);
text-transform: uppercase;
cursor: pointer;
&:hover {
text-decoration: none;
color: darken(#F6EFD4, 60%);
text-decoration: none;
background: none;
}
}
}
}
}
sass/_courseware-video.scss
......@@ -132,7 +132,9 @@ section.course-content {
font-weight: bold;
span {
@include inline-block();
cursor: pointer;
margin-bottom: 0;
&:hover {
color: $mit-red;
......@@ -146,7 +148,8 @@ section.course-content {
ol.subtitles {
float: left;
width: flex-grid(3, 9);
min-height: 570px;
height: 530px;
overflow: hidden;
li {
margin-bottom: 0px;
......
sass/_courseware.scss
......@@ -86,146 +86,115 @@ div.course-wrapper {
section.course-content {
@extend .content;
ol.vert-mod {
> li {
@extend .clearfix;
border-bottom: 1px solid #eee;
padding: 15px 0;
&:last-child {
border-bottom: none;
}
p {
margin-bottom: lh();
h2 {
margin-top: 0;
margin-bottom: 15px;
}
input[type="text"] {
display: inline-block;
margin: 8px 4px 4px 10px;
}
&:empty {
display: none;
margin-bottom: 0;
}
}
ol.sequence-nav {
margin-bottom: $body-line-height;
@extend .topbar;
.problem-set {
position: relative;
@extend .clearfix;
h2 {
margin-top: 0;
margin-bottom: 15px;
width: flex-grid(2, 9);
padding-right: flex-gutter(9);
border-right: 1px dotted #ccc;
@include box-sizing(border-box);
display: table-cell;
vertical-align: top;
a {
@extend .block-link;
@media screen and (max-width:910px) {
display: block;
width: auto;
}
}
li {
border: none;
cursor: pointer;
section.problem {
display: table-cell;
padding: lh(.75);
float: left;
//problem
&.seq_problem_inactive {
width: 14px;
background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
width: flex-grid(7, 9);
padding-left: flex-gutter(9);
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
&.seq_problem_visited {
width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
&:hover {
background-color: #F6EFD4;
}
@media screen and (max-width:910px) {
display: block;
width: auto;
}
&.seq_problem_active {
width: 14px;
background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
&:hover {
background-color: #F6EFD4;
span {
&.unanswered {
@include inline-block();
background: url('/static/images/unanswered-icon.png') center center no-repeat;
height: 14px;
position: relative;
top: 4px;
width: 14px;
}
}
//video
&.seq_video_inactive {
width: 14px;
background: url('/static/images/video-icon.png') 13px 15px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
&:hover {
background-color: lighten(#F6EFD4, 3%);
&.correct {
@include inline-block();
background: url('/static/images/correct-icon.png') center center no-repeat;
height: 20px;
position: relative;
top: 6px;
width: 25px;
}
}
&.seq_video_visited {
width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -81px 15px no-repeat;
&:hover {
background-color: #F6EFD4;
&.incorrect {
@include inline-block();
background: url('/static/images/incorrect-icon.png') center center no-repeat;
height: 20px;
width: 20px;
position: relative;
top: 6px;
}
}
}
&.seq_video_active {
width: 14px;
background: #FFFBEB url('/static/images/video-icon.png') -32px 15px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%),inset 1px 0 0 darken(#F6EFD4, 20%));
&:hover {
background-color: #F6EFD4;
}
div {
> span {
display: block;
margin-bottom: lh(.5);
}
}
input[type="text"] {
display: inline-block;
}
//vertical
&.seq_vertical_inactive {
width: 14px;
background: url('/static/images/vertical-icon.png') -82px 15px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
center {
display: block;
margin: lh() 0;
border: 1px solid #ccc;
padding: lh();
}
&.seq_vertical_visited {
width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') 13px 15px no-repeat;
&:hover {
background-color: #F6EFD4;
}
}
section.action {
margin-top: lh();
}
}
&.seq_vertical_active {
width: 14px;
background: #FFFBEB url('/static/images/vertical-icon.png') -35px 15px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
&:hover {
background-color: #F6EFD4;
}
}
section.problems-wrapper, div#seq_content {
@extend .problem-set;
}
&.prev, &.next {
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
background: darken(#F6EFD4, 5%);
border-left: 1px solid darken(#f6efd4, 20%);
color: darken(#F6EFD4, 80%);
float: right;
letter-spacing: 1px;
padding: lh(.75);
text-transform: uppercase;
ol.vert-mod {
> li {
@extend .clearfix;
@extend .problem-set;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
padding: 0 0 15px;
&:hover {
text-decoration: none;
color: darken(#F6EFD4, 60%);
text-decoration: none;
background: none;
}
&:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
}
......
sass/_layout.scss
......@@ -6,7 +6,7 @@ html {
font: $body-font-size $body-font-family;
text-align: center;
margin: 0;
background: #f6f6f6;
background: #f4f4f4; //#f3f1e5
div.header-wrapper {
// @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
......@@ -28,7 +28,7 @@ html {
font-size: 20px;
font-weight: 800;
margin: 0 lh() 0 0;
padding: 17px lh() 17px 0;
padding: 17px lh() 14px 0;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
line-height: lh();
}
......@@ -44,16 +44,16 @@ html {
h2 {
float: left;
margin: 0 lh() 0 0;
padding: 19px lh() 12px 0;
padding: 19px lh() 9px 0;
line-height: lh();
border-right: 1px solid darken($mit-red, 5%);
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
text-decoration: none;
}
}
}
......@@ -61,7 +61,7 @@ html {
ul {
@extend .clearfix;
display: inline-block;
padding: 19px 0 12px;
padding: 19px 0 9px;
margin: 0;
li {
......@@ -72,6 +72,7 @@ html {
a {
color: #fff;
text-decoration: none;
&:hover {
color: rgba(#fff, .7);
......@@ -88,15 +89,17 @@ html {
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-shadow(0 0 4px #ddd);
@include box-sizing(border-box);
@include border-radius(4px);
overflow: hidden;
background: #fff;
border-bottom: 1px solid #bbb;
@media screen and (min-width: 1400px) {
margin-top: lh(.5);
@include border-radius(3px);
border: 1px solid #bbb;
// @include border-radius(3px);
@include box-shadow(0 0 4px #dfdfdf);
border: 1px solid #bbb;
margin-top: lh(.5);
}
}
......
sass/_theme.scss
......@@ -37,14 +37,6 @@ h3 {
clear:both;
}
a:link, a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#wrapper {
background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
margin:0 auto ;
......
sass/application.scss
......@@ -8,7 +8,7 @@
@import "leanmodal";
// pages
@import "courseware", "courseware-video";
@import "courseware", "courseware-video", "courseware-sequence-nav";
@import "textbook";
@import "profile";
@import "wiki-basic-html", "wiki-create", "wiki";
......@@ -17,5 +17,5 @@
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" ;
// left over
@import "theme";
@import "local";
// @import "theme";
// @import "local";
schematicinput.html
<span>
<input type="hidden" class="schematic" height="${height}" width="${width}" parts="${parts}" analyses="${analyses}" name="input_${id}" id="input_${id}" value="" initial_value=""/>
<div id="value_${id}" style="display:none">${value}</div>
<div id="initial_value_${id}" style="display:none">${initial_value}</div>
<script>
$("#input_${id}").attr("value",$("#value_${id}").text());
$("#input_${id}").attr("initial_value",$("#initial_value_${id}").text());
</script>
<span id="answer_${id}"></span>
% if state == 'unsubmitted':
<input type="hidden" class="schematic" height="${height}" width="${width}" parts="${parts}" analyses="${analyses}" name="input_${id}" id="input_${id}" value="" initial_value=""/>
<div id="value_${id}" style="display:none">${value}</div>
<div id="initial_value_${id}" style="display:none">${initial_value}</div>
<script>
$("#input_${id}").attr("value",$("#value_${id}").text());
$("#input_${id}").attr("initial_value",$("#initial_value_${id}").text());
</script>
<span id="answer_${id}"></span>
% if state == 'unsubmitted':
<span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'correct':
% elif state == 'correct':
<span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'incorrect':
% elif state == 'incorrect':
<span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'incomplete':
% elif state == 'incomplete':
<span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
% endif
% endif
</span>
seq_module.html
<ol class="sequence-nav">
<nav class="sequence-nav">
<ol>
% for t in range(1,1+len(items)):
<li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
% endfor
</ol>
% for t in range(1,1+len(items)):
<li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
% endfor
<li id="${ id }next" class="next">Next</li>
<li id="${ id }prev" class="prev">Previous</li>
</ol>
<ul>
<li id="${ id }next" class="next">Next</li>
<li id="${ id }prev" class="prev">Previous</li>
</ul>
</nav>
<!-- <td colspan=${ len(items) }> -->
......
textinput.html
<span>
<input type="text" name="input_${id}" id="input_${id}" value="${value}" />
<span id="answer_${id}"></span>
% if state == 'unsubmitted':
<span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'correct':
<span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'incorrect':
<span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'incomplete':
<span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
% endif
</span>
<section class="text-input">
<input type="text" name="input_${id}" id="input_${id}" value="${value}" />
<span id="answer_${id}"></span>
% if state == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
% elif state == 'correct':
<span class="correct" id="status_${id}"></span>
% elif state == 'incorrect':
<span class="incorrect" id="status_${id}"></span>
% elif state == 'incomplete':
<span class="incorrect" id="status_${id}"></span>
% endif
</section>
video.html
......@@ -27,7 +27,7 @@
</div>
<ol class="subtitles">
<li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li>
<!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
<li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
<li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
<li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
......@@ -42,5 +42,5 @@
<li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
<!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> -->
</ol>
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