diff --git a/homework.html b/homework.html index 4aae9095e8..058f513280 100644 --- a/homework.html +++ b/homework.html @@ -4,6 +4,7 @@ % for problem in homework['problems']:

  • ${ problem['name'] }

    + ${ problem['html'] }
    diff --git a/info.html b/info.html index f6f59462b4..4f5336432b 100644 --- a/info.html +++ b/info.html @@ -3,11 +3,11 @@ <%include file="navigation.html" args="active_page='info'" />
    -
    - + +
    + +
    + + + + + + <%include file="navigation.html" args="active_page='profile'" />
    + +
    +

    Course Progress

    + +
    + + +
      + % for hw in homeworks: +
    1. +

      ${ hw['chapter'] }

      + +
      +

      ${ hw['section'] } ${"({0}/{1})".format( hw['section_total'][0], hw['section_total'][1] )}

      + +
        + % for score in hw['scores']: +
      • ${ score[0] }/${ score[1] }
        • + % endfor +
      +
      +
      2. + % endfor +
    +
    +
    - -
    -

    Course Progress

    - - - -
      - % for hw in homeworks: -
    1. -

      ${ hw['chapter'] }

      -

      ${ hw['section'] }

      - -
        - % for score in hw['scores']: -
      • ${ score[0] }/${ score[1] }
        • - % endfor -
      -
      2. - % endfor -
    -
    + diff --git a/profile_graphs.js b/profile_graphs.js new file mode 100644 index 0000000000..3de53d2c33 --- /dev/null +++ b/profile_graphs.js @@ -0,0 +1,202 @@ +<%! + import json +%> + +$(function () { + function showTooltip(x, y, contents) { + $('
    ' + contents + '
    ').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('
    ${"{:.0%}".format(totalScore)}
    '); + + + $("#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; + } + }); + +}); diff --git a/sass/_askbot-original.scss b/sass/_askbot-original.scss index 461bc05176..02d50862b3 100644 --- a/sass/_askbot-original.scss +++ b/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; diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss index de1f917fca..c8c5e4b687 100644 --- a/sass/_base-extends.scss +++ b/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 { diff --git a/sass/_base.scss b/sass/_base.scss index a703cf208e..8ea0957ac3 100644 --- a/sass/_base.scss +++ b/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; } diff --git a/sass/_courseware-sequence-nav.scss b/sass/_courseware-sequence-nav.scss new file mode 100644 index 0000000000..5a7b971fe2 --- /dev/null +++ b/sass/_courseware-sequence-nav.scss @@ -0,0 +1,142 @@ +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; + } + } + } + } +} diff --git a/sass/_courseware-video.scss b/sass/_courseware-video.scss index 389c23c370..f8067e703c 100644 --- a/sass/_courseware-video.scss +++ b/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; diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 3c59e6e0c8..aae17b46fd 100644 --- a/sass/_courseware.scss +++ b/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; + p { + margin-bottom: lh(); - &:last-child { - border-bottom: none; - } - - 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; - a { - @extend .block-link; + 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; + + @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; + width: flex-grid(7, 9); + padding-left: flex-gutter(9); - //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%)); - - &:hover { - background-color: lighten(#F6EFD4, 3%); - } + @media screen and (max-width:910px) { + display: block; + width: auto; } - &.seq_problem_visited { - width: 14px; - background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat; - &: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; + } + + &.correct { + @include inline-block(); + background: url('/static/images/correct-icon.png') center center no-repeat; + height: 20px; + position: relative; + top: 6px; + width: 25px; + } + + &.incorrect { + @include inline-block(); + background: url('/static/images/incorrect-icon.png') center center no-repeat; + height: 20px; + width: 20px; + position: relative; + top: 6px; } } + } - &.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; - } + div { + > span { + display: block; + margin-bottom: lh(.5); } + } - //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%)); + input[type="text"] { + display: inline-block; + } - &:hover { - background-color: lighten(#F6EFD4, 3%); - } - } + center { + display: block; + margin: lh() 0; + border: 1px solid #ccc; + padding: lh(); + } - &.seq_video_visited { - width: 14px; - background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -81px 15px no-repeat; - &:hover { - background-color: #F6EFD4; - } - } - - &.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; - } - } + section.action { + margin-top: lh(); + } + } - //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%)); + section.problems-wrapper, div#seq_content { + @extend .problem-set; + } - &:hover { - background-color: lighten(#F6EFD4, 3%); - } - } + ol.vert-mod { + > li { + @extend .clearfix; + @extend .problem-set; + border-bottom: 1px solid #ddd; + margin-bottom: 15px; + padding: 0 0 15px; - &.seq_vertical_visited { - width: 14px; - background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') 13px 15px no-repeat; - &:hover { - background-color: #F6EFD4; - } - } - - &.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; - } - } - - &.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; - - &:hover { - text-decoration: none; - color: darken(#F6EFD4, 60%); - text-decoration: none; - background: none; - } + &:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; } } } diff --git a/sass/_discussion-answers.scss b/sass/_discussion-answers.scss new file mode 100644 index 0000000000..12d6500c48 --- /dev/null +++ b/sass/_discussion-answers.scss @@ -0,0 +1,45 @@ +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; + } + } +} diff --git a/sass/_discussion-questions.scss b/sass/_discussion-questions.scss index 8c7f04871a..4a8704c477 100644 --- a/sass/_discussion-questions.scss +++ b/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; - } - } -} diff --git a/sass/_index.scss b/sass/_index.scss index f1dd89392f..44c138d530 100644 --- a/sass/_index.scss +++ b/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(); diff --git a/sass/_info.scss b/sass/_info.scss new file mode 100644 index 0000000000..4f7a0b8d1a --- /dev/null +++ b/sass/_info.scss @@ -0,0 +1,39 @@ +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; + } + } + } + } + } +} diff --git a/sass/_layout.scss b/sass/_layout.scss index 2614e3b56c..89c216e26d 100644 --- a/sass/_layout.scss +++ b/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; + } } } } diff --git a/sass/_leanmodal.scss b/sass/_leanmodal.scss index bdd1a9bb22..8c14db22d4 100644 --- a/sass/_leanmodal.scss +++ b/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; diff --git a/sass/_profile.scss b/sass/_profile.scss index 9cab2dbce6..b383c61a85 100644 --- a/sass/_profile.scss +++ b/sass/_profile.scss @@ -1,28 +1,92 @@ 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; + + h1 { + padding: lh(); + } + + ul { + list-style: none; + + li { + @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 { - @include box-sizing(border-box); - display: table-cell; - padding: $body-line-height; - width: flex-grid(6); + @extend .content; - ul { - li { - display: inline-block; - padding-right: 1em; + 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; + } + } + } } } + } } diff --git a/sass/_question-view.scss b/sass/_question-view.scss index 4f3cac582f..4fca12d2e4 100644 --- a/sass/_question-view.scss +++ b/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; + 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%; - &.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); + &.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; } } } diff --git a/sass/_theme.scss b/sass/_theme.scss index 276bb6a694..31e45ae734 100644 --- a/sass/_theme.scss +++ b/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 ; diff --git a/sass/application.scss b/sass/application.scss index 6d046c2a6a..7e1bbf3ce5 100644 --- a/sass/application.scss +++ b/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"; diff --git a/schematic_tutorial.html b/schematic_tutorial.html new file mode 120000 index 0000000000..da681ac006 --- /dev/null +++ b/schematic_tutorial.html @@ -0,0 +1 @@ +../data/problems/schematic_tutorial.html \ No newline at end of file diff --git a/schematicinput.html b/schematicinput.html index 8c7f7e0c83..3290de3b44 100644 --- a/schematicinput.html +++ b/schematicinput.html @@ -1,19 +1,23 @@ - - - - - -% if state == 'unsubmitted': + + + + + + + + + % if state == 'unsubmitted': -% elif state == 'correct': + % elif state == 'correct': -% elif state == 'incorrect': + % elif state == 'incorrect': -% elif state == 'incomplete': + % elif state == 'incomplete': -% endif + % endif + diff --git a/seq_module.html b/seq_module.html index 6608344e2f..b011815e68 100644 --- a/seq_module.html +++ b/seq_module.html @@ -1,12 +1,15 @@ -
      +
    + + diff --git a/textinput.html b/textinput.html index fbe9090df8..1473eadbf2 100644 --- a/textinput.html +++ b/textinput.html @@ -1,13 +1,15 @@ - - - -% if state == 'unsubmitted': - -% elif state == 'correct': - -% elif state == 'incorrect': - -% elif state == 'incomplete': - -% endif - +
    + + + + + % if state == 'unsubmitted': + + % elif state == 'correct': + + % elif state == 'incorrect': + + % elif state == 'incomplete': + + % endif +
    diff --git a/video.html b/video.html index 7e13c80974..d32bbfb49c 100644 --- a/video.html +++ b/video.html @@ -27,7 +27,7 @@
      -
      2. +
      5. @@ -42,5 +42,5 @@
      8. -
      9. +