Skip to content

E
edx-platform
Commit 40a6c55b by Ernie Park
Options

merge

parents 34568e5b 4be8c235
Showing with 1042 additions and 318 deletions
homework.html
......@@ -4,6 +4,7 @@
% for problem in homework['problems']:
<li>
<h2>${ problem['name'] }</h2>
${ problem['html'] }
<section>
......
info.html
......@@ -3,11 +3,11 @@
<%include file="navigation.html" args="active_page='info'" />
<section class="main-content">
<div class="profile-wrapper">
<section class="user-info">
<div class="info-wrapper">
<section class="updates">
<%include file="info_files/updates.html" />
</section>
<section class="course-info">
<section class="handouts">
<%include file="info_files/handouts.html" />
</section>
</div>
......
mitx_global.html
......@@ -6,8 +6,15 @@
<section class="about">
<section class="intro">
<section class="intro-text">
<p><em>MITx</em> will offer a portfolio of MIT courses for free to a virtual community of learners around the world. It will also enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences.</p>
<p>The first <em>MITx</em> course, 6.002x (Circuits and Electronics), will be launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.</p>
</section>
<section class="intro-video">
<a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a>
</section>
</section>
<section class="features">
......@@ -22,6 +29,7 @@
<p><strong>Press &amp; links:</strong> <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a></p>
</section>
</section>
<section class="course">
......@@ -38,6 +46,10 @@
<p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
</section>
</section>
<div id="video-overlay" class="leanModal_box">
<iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$(function() {
......
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>
profile.html
<%inherit file="main.html" />
<%block name="headextra">
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.symbol.js"></script>
<script>
<%include file="profile_graphs.js"/>
</script>
<script>
var loc=true; // Activate on clicks? Not if already clicked.
var lang=true;
$(function() {
$("#change_location").click(function() {
$(this).hide();
log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
if(loc) {
......@@ -18,6 +28,8 @@ $(function() {
$("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
'<input type="button" id="change_loc_button" value="Change" />');
$("#change_loc_button").click(function() {
$("#change_location").show();
postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
$("#location_sub").text(json.location);
loc=true;
......@@ -29,6 +41,7 @@ $(function() {
});
$("#change_language").click(function() {
$(this).hide();
log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});
if(lang) {
......@@ -36,6 +49,7 @@ $(function() {
$("#language_sub").html('<input id="id_lang_text" type="text" name="lang_text" />'+
'<input type="button" id="change_lang_button" value="Change" />');
$("#change_lang_button").click(function() {
$("#change_language").show();
postJSON('/change_setting', {'language':$("#id_lang_text").attr("value")}, function(json) {
$("#language_sub").text(json.language);
lang=true;
......@@ -59,20 +73,47 @@ $(function() {
});
});
});
</script>
</%block>
<%include file="navigation.html" args="active_page='profile'" />
<section class="main-content">
<div class="profile-wrapper">
<section class="course-info">
<h1>Course Progress</h1>
<div id="grade-detail-graph" style="width:650px;height:200px;"></div>
<!-- <div id="grade-overview-graph" style="width:650px;height:130px;"></div> -->
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<div class="scores">
<h3>${ hw['section'] } ${"({0}/{1})".format( hw['section_total'][0], hw['section_total'][1] )}</h3>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</div>
</li>
% endfor
</ol>
</section>
<section class="user-info">
<h1>${name}</h1>
<ul>
<li>Forum name: ${username}</li>
<li>E-mail: ${email}</li>
<li>Forum name: <strong>${username}</strong></li>
<li>E-mail: <strong>${email}</strong></li>
<li>
Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
</li>
......@@ -94,26 +135,6 @@ $(function() {
</div>
</section>
<section class="course-info">
<h1>Course Progress</h1>
<!-- <div id="description"></div> -->
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<h3>${ hw['section'] }</h3>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</li>
% endfor
</ol>
</section>
</div>
</section>
profile_graphs.js 0 → 100644
<%!
import json
%>
$(function () {
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.90
}).appendTo("body").fadeIn(200);
}
/* -------------------------------- Grade detail graph -------------------------------- */
var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")];
//var colors = [$.color.parse("#1B2045"), $.color.parse("#557a00"), $.color.parse("#F5600"), $.color.parse("#FEBA2C")];
//var colors = [$.color.parse("#E7C856"), $.color.parse("#CD462E"), $.color.parse("#B01732"), $.color.parse("#41192A")];
//var colors = [$.color.parse("#434F5E"), $.color.parse("#BEF731"), $.color.parse("#FB5455"), $.color.parse("#44C4B7")];
//var colors = [$.color.parse("#147A7D"), $.color.parse("#C0C900"), $.color.parse("#C9005B"), $.color.parse("#FCF9A5")];
var series = [];
var ticks = []; //These are the indices and x-axis labels for the data
var bottomTicks = []; //Labels on the bottom
var detail_tooltips = {}; //This an dictionary mapping from 'section' -> array of detail_tooltips
var droppedScores = []; //These are the datapoints to indicate assignments which aren't factored into the total score
detail_tooltips['Dropped Scores'] = [];
<%
tickIndex = 1
sectionSpacer = 0.5
sectionIndex = 0
%>
%for section in grade_summary:
%if 'subscores' in section: ##This is for sections like labs or homeworks, with several smaller components and a total
series.push({label: "${section['category']}",
data: ${ json.dumps( [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])] ) },
color: colors[${sectionIndex}].toString(),
});
ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, str(i + 1)] for i,score in enumerate(section['subscores'])] ) } );
bottomTicks.push( [ ${tickIndex + len(section['subscores'])/2}, "${section['category']}" ] );
detail_tooltips["${section['category']}"] = ${ json.dumps([score['summary'] for score in section['subscores']] ) };
droppedScores = droppedScores.concat(${ json.dumps( [[tickIndex + index, 0.05] for index in section['dropped_indices']]) });
<% dropExplanation = "The lowest {} {} scores are dropped".format( len(section['dropped_indices']), section['category'] ) %>
detail_tooltips['Dropped Scores'] = detail_tooltips['Dropped Scores'].concat( ${json.dumps( [dropExplanation] * len(section['dropped_indices']) )} );
<% tickIndex += len(section['subscores']) + sectionSpacer %>
##Now put on the aggregate score
series.push({label: "${section['category']} Total",
data: [[${tickIndex}, ${section['totalscore']['score']}]],
color: colors[${sectionIndex}].toString(),
});
ticks = ticks.concat( [ [${tickIndex}, "Total"] ] );
detail_tooltips["${section['category']} Total"] = [ "${section['totalscore']['summary']}" ];
<% tickIndex += 1 + sectionSpacer %>
%else: ##This is for sections like midterm or final, which have no smaller components
series.push({label: "${section['category']}",
data: [[${tickIndex}, ${section['totalscore']['score']}]],
color: colors[${sectionIndex}].toString(),
});
%if section['category'] == "Midterm":
bottomTicks = bottomTicks.concat( [ [${tickIndex}, "${section['category']}"] ] );
%else:
ticks = ticks.concat( [ [${tickIndex}, "${section['category']}"] ] );
%endif
detail_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
<% tickIndex += 1 + sectionSpacer %>
%endif
<%sectionIndex += 1 %>
%endfor
//Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red", xaxis: 2} );
var options = {
series: {lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},},
xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}},
xaxes: [{ticks: ticks}, {ticks: bottomTicks}],
yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50},
grid: { hoverable: true, clickable: true, borderWidth: 1,
markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#E6FFFF"},
{yaxis: {from: 0.6, to: 0.7 }, color: "#FFF2E3"}, ] },
legend: {show: false},
};
$.plot($("#grade-detail-graph"), series, options);
var previousPoint = null;
$("#grade-detail-graph").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
if (item.series.label in detail_tooltips) {
var series_tooltips = detail_tooltips[item.series.label];
if (item.dataIndex < series_tooltips.length) {
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
}
}
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
/* ------------------------------- Grade overview graph ------------------------------- */
series = [];
ticks = [];
var markings = [];
var overview_tooltips = {};
<%
totalWeight = 0.0
sectionIndex = 0
totalScore = 0.0
%>
%for section in grade_summary:
%if section['totalscore']['score'] > 0:
series.push({label: "${section['category']}",
data: [[${section['totalscore']['score'] * section['weight']}, 1]],
color: colors[${sectionIndex}].toString(),
##We need at least one to be on xaxis 2 for the second xaxis labels to show up
${"xaxis: 2" if sectionIndex % 2 == 0 else ""} });
%endif
ticks.push( [${totalWeight + section['weight'] * 0.5}, "${'{} - {:.0%}'.format(section['category'], section['weight'])}" ] );
markings.push({xaxis: {from: ${totalWeight}, to: ${totalWeight + section['weight']} }, color:colors[${sectionIndex}].scale("a", 0.6).toString() });
overview_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
<%
sectionIndex += 1
totalWeight += section['weight']
totalScore += section['totalscore']['score'] * section['weight']
%>
%endfor
options = {
series: {stack: 0,
lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.8, align: 'center', horizontal: true, linewidth:0, fill:1},},
xaxis: {min: 0.0, max: 1.0},
yaxis: {min: 0.0, max: 2.0, labelWidth:50, ticks:[[1.18,"Grade Totals"]], tickLength: 0},
xaxes: [ {ticks: [[0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"]], position: top},
{ticks: ticks }],
grid: { markings: markings, hoverable: true, clickable: true, borderWidth: 1},
legend: {show: false},
};
var $gradeOverviewGraph = $("#grade-overview-graph");
var plot = $.plot($gradeOverviewGraph, series, options);
//Put the percent on the graph
var o = plot.pointOffset({x: ${totalScore}, y: 1 });
$gradeOverviewGraph.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + (o.top - 10) + 'px">${"{:.0%}".format(totalScore)}</div>');
$("#grade-overview-graph").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != (item.dataIndex, item.seriesIndex)) {
previousPoint = (item.dataIndex, item.seriesIndex);
$("#tooltip").remove();
if (item.series.label in overview_tooltips) {
var series_tooltips = overview_tooltips[item.series.label];
if (item.dataIndex < series_tooltips.length) {
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
}
}
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
sass/_askbot-original.scss
......@@ -972,30 +972,30 @@ ul {
.main-page h1 {
margin-right: 5px; }
.delete-icon {
margin-top: -1px;
float: left;
height: 21px;
width: 18px;
display: block;
line-height: 20px;
text-align: center;
background: #bbcdcd;
cursor: default;
color: #fff;
border-top: #cfdbdb 1px solid;
font-family: Arial;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
text-shadow: 0px 1px 0px #7ea0a0;
-moz-text-shadow: 0px 1px 0px #7ea0a0;
-webkit-text-shadow: 0px 1px 0px #7ea0a0;
&:hover {
background: #b32f2f; } }
// .delete-icon {
// margin-top: -1px;
// float: left;
// height: 21px;
// width: 18px;
// display: block;
// line-height: 20px;
// text-align: center;
// background: #bbcdcd;
// cursor: default;
// color: #fff;
// border-top: #cfdbdb 1px solid;
// font-family: Arial;
// border-top-right-radius: 4px;
// border-bottom-right-radius: 4px;
// -moz-border-radius-topright: 4px;
// -moz-border-radius-bottomright: 4px;
// -webkit-border-bottom-right-radius: 4px;
// -webkit-border-top-right-radius: 4px;
// text-shadow: 0px 1px 0px #7ea0a0;
// -moz-text-shadow: 0px 1px 0px #7ea0a0;
// -webkit-text-shadow: 0px 1px 0px #7ea0a0;
// &:hover {
// background: #b32f2f; } }
.tag-number {
font-weight: normal;
......
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,26 @@ em {
}
}
a {
color: $mit-red;
&:link {
color: $mit-red;
}
&:visited {
color: darken($mit-red, 10%);
}
&:link, &:visited {
text-decoration:none;
}
&:hover, &:focus {
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/_discussion-answers.scss 0 → 100644
div.answer-controls {
@extend div.question-controls;
display: inline-block;
margin-top: 20px;
margin-bottom: 0;
div.answer-sort {
@extend div.question-sort;
}
div.answer-count {
@extend div.question-count;
}
}
div.answer-block {
@extend div.question-header;
border-top: #ddd 1px solid;
display: inline-block;
float: left;
margin: 20px 0;
padding-top: 20px;
width: 100%;
img.answer-img-accept {
margin: 10px 0px 10px 16px;
}
div.answer-container {
@extend div.question-container;
div.answer-content {
@extend div.question-content;
div.answer-body {
@extend div.question-body;
}
}
}
div.meta-bar {
div.answer-actions {
@extend div.question-actions;
}
}
}
sass/_discussion-questions.scss
......@@ -10,7 +10,7 @@ div.question-controls {
div.question-count {
margin-right: flex-gutter();
width: flex-grid(5.5,9);
width: flex-grid(5,9);
h1 {
margin-top: 0;
......@@ -19,7 +19,7 @@ div.question-controls {
div.question-sort {
vertical-align: bottom;
width: flex-grid(3.5,9);
width: flex-grid(4,9);
nav {
@include border-radius(35px);
......@@ -28,10 +28,14 @@ div.question-controls {
float: right;
font-size: 16px;
margin: 3px 0;
padding: 0 20px;
padding:0px 20px 5px;
a {
color: darken(#F6EFD4, 50%);
color: darken(#F6EFD4, 50%);
&.on span{
font-weight: bold;
}
&:before {
content: '|';
......@@ -153,42 +157,3 @@ div.search-tips {
.search-result-summary {
}
div.post-update-info {
@include box-sizing(border-box);
@include border-radius(5px);
background:lighten(#F6EFD4, 5%);
padding: 10px;
a {
color:$mit-red ;
}
div.change-date {
font-size: 12px;
margin-bottom: 10px;
}
div.avatar {
display: inline-block;
float: left;
margin-right: 3px;
img.gravatar {
background: white;
border: 1px solid darken(#F6EFD4, 10%);
margin-right: 5px;
padding: 3px ;
vertical-align: bottom;
}
}
div.user-meta {
display: inline-block;
width: 60%;
span.user-badges {
display: block;
}
}
}
sass/_index.scss
......@@ -237,6 +237,40 @@ section.index-content {
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
a {
display: block;
width: 100%;
img {
width: 100%;
}
span {
display: none;
}
}
}
}
}
&.features {
border-top: 1px solid #E5E5E5;
padding-top: lh();
......
sass/_info.scss 0 → 100644
div.info-wrapper {
@extend .table-wrapper;
section.updates {
@extend .content;
}
section.handouts {
@extend .sidebar;
@include border-radius(0px 4px 0px 4px);
border-right: 0;
border-left: 1px solid #d3d3d3;
h1 {
padding: 0 lh();
}
ol {
list-style: none;
li {
a {
@include transition();
color: lighten($text-color, 10%);
display: block;
text-decoration: none;
@include box-shadow(0 1px 0 #eee);
padding: 7px lh();
border-bottom: 1px solid #d3d3d3;
&:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef;
}
}
}
}
}
}
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);
}
}
......@@ -119,6 +122,14 @@ html {
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
......@@ -131,6 +142,14 @@ html {
a {
color: #444;
&:link, &:visited {
color: #444;
}
&:hover, &:focus {
color: #000;
}
}
}
}
......
sass/_leanmodal.scss
......@@ -15,7 +15,6 @@ div.leanModal_box {
@include box-sizing(border-box);
display: none;
border: none;
max-width: 600px;
background: #fff;
padding: lh(2);
......@@ -27,6 +26,10 @@ div.leanModal_box {
margin-bottom: lh();
}
&#enroll {
max-width: 600px;
}
form {
text-align: left;
......
sass/_profile.scss
div.profile-wrapper {
@extend .table-wrapper;
color: #000;
section.user-info {
@include box-sizing(border-box);
margin-right: flex-gutter();
padding: $body-line-height;
width: flex-grid(6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
text-shadow: 0 1px 0 #f6f6f6;
display: table-cell;
}
@extend .sidebar;
@include border-radius(0px 4px 0px 4px);
border-left: 1px solid #d3d3d3;
border-right: 0;
section.course-info {
@include box-sizing(border-box);
display: table-cell;
padding: $body-line-height;
width: flex-grid(6);
h1 {
padding: lh();
}
ul {
list-style: none;
li {
display: inline-block;
padding-right: 1em;
@include transition();
color: lighten($text-color, 10%);
display: block;
text-decoration: none;
@include box-shadow(0 1px 0 #eee);
padding: 7px lh();
border-bottom: 1px solid #d3d3d3;
div#location_sub, div#language_sub {
font-weight: bold;
@include inline-block();
input {
margin: lh(.5) 0;
}
&:empty {
padding: 0;
}
}
div#description {
font-size: 12px;
}
}
}
div#change_password_pop {
padding: 7px lh();
color: #4D4D4D;
}
}
section.course-info {
@extend .content;
ol {
list-style: none;
> li {
border-bottom: 1px solid #e3e3e3;
padding: lh() 0;
@extend .clearfix;
h2 {
float: left;
padding: 0;
margin: 0;
width: flex-grid(2, 9);
margin-right: flex-gutter(9);
}
div.scores {
float: left;
width: flex-grid(7, 9);
h3 {
color: #666;
}
ul {
list-style: none;
li {
display: inline-block;
padding-right: 1em;
}
}
}
}
}
}
}
sass/_question-view.scss
......@@ -2,34 +2,40 @@ div.question-header {
div.vote-buttons {
display: inline-block;
float: left;
width: flex-grid(1,9);
margin-right: flex-gutter(9);
width: flex-grid(0.7,9);
ul li {
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
font-weight: bold;
height: 20px;
list-style: none;
padding: 10px;
text-align: center;
width: 25px;
&.question-img-upvote, &.answer-img-upvote {
background-image: url(/static/images/askbot/vote-arrow-up-new.png);
background-color: #F6EFD4;
&:hover, &.on {
background-image: url(/static/images/askbot/vote-arrow-up-on-new.png);
ul {
li {
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
font-weight: bold;
height: 20px;
list-style: none;
padding: 10px;
text-align: center;
width: 70%;
&.post-vote {
@include border-radius(4px);
background-color: lighten(#F6EFD4, 3%);
}
}
&.question-img-downvote, &.answer-img-downvote {
background-image: url(/static/images/askbot/vote-arrow-down-new.png);
&.question-img-upvote, &.answer-img-upvote {
background-image: url(/static/images/askbot/vote-arrow-up.png);
&:hover, &.on {
background-image: url(/static/images/askbot/vote-arrow-down-on-new.png);
&:hover, &.on {
background-color:#d1e3a8;
}
}
&.question-img-downvote, &.answer-img-downvote {
background-image: url(/static/images/askbot/vote-arrow-down.png);
&:hover, &.on {
background-color:#eac6ad;
}
}
}
}
......@@ -38,7 +44,7 @@ div.question-header {
div.question-container {
display: inline-block;
float: left;
width: flex-grid(8,9);
width: flex-grid(8.3,9);
h1 {
margin-top: 0;
......@@ -47,9 +53,9 @@ div.question-header {
div.meta-bar {
border-bottom: 1px solid #eee;
display: block;
margin: 20px 0 10px;
margin: 10px 0;
overflow: hidden;
padding-bottom: 15px;
padding: 5px 0 10px;
div.tag-list {
......@@ -89,10 +95,180 @@ div.question-header {
width: flex-grid(6.2,8);
}
div.post-update-info {
div.post-update-container {
display: inline-block;
float: left;
width: flex-grid(1.8,8);
div.post-update-info {
@include box-sizing(border-box);
@include border-radius(5px);
background:lighten(#F6EFD4, 5%);
padding: 10px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&.revision {
text-align: center;
background:lighten(#F6EFD4, 7%);
a {
color: black;
}
}
a {
color:$mit-red ;
}
div.change-date {
font-size: 12px;
margin-bottom: 10px;
}
div.avatar {
display: inline-block;
float: left;
margin-right: 3px;
img.gravatar {
background: white;
border: 1px solid darken(#F6EFD4, 10%);
margin-right: 5px;
padding: 3px ;
vertical-align: bottom;
}
}
div.user-meta {
display: inline-block;
width: 60%;
span.user-badges {
display: block;
}
}
}
}
}
div.comments-container {
@include box-sizing(border-box);
background: lighten(#efefef, 3%);
padding: 3%;
display: inline-block;
margin: 15px 0 0;
padding: 3%;
width: 100%;
div.comments-content {
font-size: 13px;
.block {
border-bottom: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 15px 0;
display: block;
&:first-child {
border-top: 0;
}
// &:only-of-type {
// border: 0;
// }
}
form.post-comments {
}
div.comment {
&:first-child {
border-top: 0;
}
&:last-child {
margin-bottom: 20px;
}
aside.comment-controls {
background: none;
border: none;
display: inline-block;
margin-top: -8px;
padding:0 2% 0 0;
text-align: center;
width: 5%;
div {
background: none;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
div.comment-votes {
@include transform(rotate(-90deg));
width: 16px;
a.upvote {
cursor: pointer;
font-size: 25px;
text-decoration: none;
}
}
div.comment-delete {
// display: inline;
color: $mit-red;
cursor: pointer;
font-size: 15px;
}
}
div.comment-body {
display: inline-block;
width: 95%;
div.comment-meta {
text-align: right;
a.author {
font-weight: bold;
}
a.edit {
@extend .button;
font-size: 12px;
padding: 2px 10px;
// @include border-radius(2px);
// background: #eee;
// color: #555;
// cursor: pointer;
// padding: 1px 10px;
// text-decoration: none;
}
}
}
}
}
#edit-comment-form {
margin: 10px 0;
min-height: 100px;
width: 99%;
resize: vertical;
}
.counter {
color: #888;
display: block;
float: right;
margin-top: 5px;
text-align: right;
}
}
}
......
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,14 +8,15 @@
@import "leanmodal";
// pages
@import "courseware", "courseware-video";
@import "courseware", "courseware-video", "courseware-sequence-nav";
@import "textbook";
@import "info";
@import "profile";
@import "wiki-basic-html", "wiki-create", "wiki";
@import "activation";
@import "help";
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" ;
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers";
// left over
@import "theme";
@import "local";
// @import "theme";
// @import "local";
schematic_tutorial.html 0 → 120000
../data/problems/schematic_tutorial.html
\ No newline at end of file
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