From 3b02e6a1ee6e89d3144cd1d9c072c03a4711445b Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 09:02:18 -0400 Subject: [PATCH 01/21] started new nav styles --- lms/static/sass/course/base/_base.scss | 6 ++++++ lms/static/sass/course/courseware/_courseware.scss | 14 ++++++++++++++ .../sass/course/layout/_courseware_header.scss | 13 ++++++------- .../sass/course/layout/_courseware_subnav.scss | 8 +------- 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 034e047754..56713ca429 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,5 +1,6 @@ body { min-width: 980px; + background: #f7f7f7; } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { @@ -11,6 +12,11 @@ table { table-layout: fixed; } +.content-wrapper { + background: none; + border: none; +} + .container { padding: lh(2); diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 198902c146..32a2c2a2af 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -3,8 +3,22 @@ html { max-height: 100%; } +div.info-wrapper { + padding: 40px; + box-sizing: border-box; + border-radius: 3px; + background: #fff; + @include box-shadow(0 1px 25px rgba(0, 0, 0, .1)); +} + div.course-wrapper { @extend .table-wrapper; + padding: 40px; + box-sizing: border-box; + border-radius: 3px; + background: #fff; + @include box-shadow(0 1px 25px rgba(0, 0, 0, .1)); + ul, ol { list-style: none; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index dfa30b43a0..676ed5c58f 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -2,7 +2,7 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); background: #f6f6f6; - border-bottom: 1px solid rgb(200,200,200); + border-bottom: none; margin: 0px auto 0px; padding: 0px; width: 100%; @@ -28,7 +28,7 @@ nav.course-material { text-align: center; padding: 8px 13px 12px; font-size: 14px; - font-weight: 400; + font-weight: bold; text-decoration: none; text-shadow: 0 1px rgb(255,255,255); @@ -37,11 +37,6 @@ nav.course-material { } &.active { - background: rgb(255,255,255); - border: 1px solid rgb(200,200,200); - border-bottom: 0px; - @include border-top-radius(4px); - @include box-shadow(0 2px 0 0 rgba(255,255,255, 1)); color: $blue; } } @@ -58,6 +53,10 @@ nav.course-material { } .global { + background: none !important; + border: none !important; + box-shadow: none !important; + .find-courses-button { display: none; } diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss index 21f6187a83..c06b1435f3 100644 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ b/lms/static/sass/course/layout/_courseware_subnav.scss @@ -1,8 +1,7 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); - background: #f6f6f6; - border-bottom: 1px solid rgb(200,200,200); + background: none; margin: 0px auto 0px; padding: 0px; width: 100%; @@ -37,11 +36,6 @@ nav.course-material { } &.active { - background: rgb(255,255,255); - border: 1px solid rgb(200,200,200); - border-bottom: 0px; - @include border-top-radius(4px); - @include box-shadow(0 2px 0 0 rgba(255,255,255, 1)); color: $blue; } } From 8b4b1fddb5ac36ddbc03236434997bf4d91e011c Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 10:15:28 -0400 Subject: [PATCH 02/21] added new wrapper styles --- lms/static/sass/course/base/_base.scss | 2 +- lms/static/sass/course/courseware/_courseware.scss | 6 +++--- lms/templates/courseware.html | 2 +- lms/templates/gradebook.html | 2 +- lms/templates/info.html | 2 +- lms/templates/profile.html | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 56713ca429..c05a09570c 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -18,7 +18,7 @@ table { } .container { - padding: lh(2); + padding: 1.4em lh(2); > div { display: table; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 32a2c2a2af..1082930b13 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -3,12 +3,12 @@ html { max-height: 100%; } -div.info-wrapper { +div.inner-container { padding: 40px; box-sizing: border-box; border-radius: 3px; background: #fff; - @include box-shadow(0 1px 25px rgba(0, 0, 0, .1)); + @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); } div.course-wrapper { @@ -17,7 +17,7 @@ div.course-wrapper { box-sizing: border-box; border-radius: 3px; background: #fff; - @include box-shadow(0 1px 25px rgba(0, 0, 0, .1)); + @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); ul, ol { diff --git a/lms/templates/courseware.html b/lms/templates/courseware.html index a14f35d154..6bb6c74862 100644 --- a/lms/templates/courseware.html +++ b/lms/templates/courseware.html @@ -32,7 +32,7 @@ <%include file="course_navigation.html" args="active_page='courseware'" />
-
+
close diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html index 787fc23c9a..895f7ea004 100644 --- a/lms/templates/gradebook.html +++ b/lms/templates/gradebook.html @@ -31,7 +31,7 @@ <%include file="course_navigation.html" args="active_page=''" />
-
+

Gradebook

diff --git a/lms/templates/info.html b/lms/templates/info.html index a04e31896f..58bfbd6933 100644 --- a/lms/templates/info.html +++ b/lms/templates/info.html @@ -20,7 +20,7 @@ $(document).ready(function(){
-
+
% if user.is_authenticated():

Course Updates & News

diff --git a/lms/templates/profile.html b/lms/templates/profile.html index ca27920a1b..e0639b0e00 100644 --- a/lms/templates/profile.html +++ b/lms/templates/profile.html @@ -113,7 +113,7 @@ $(function() { <%include file="course_navigation.html" args="active_page='profile'" />
-
+
From e9e6b1828ed0e90bf3762f4c4475a3a5b47f2319 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 10:41:34 -0400 Subject: [PATCH 03/21] new header styles --- lms/static/sass/course/base/_base.scss | 8 +++++--- lms/static/sass/course/courseware/_courseware.scss | 8 -------- lms/static/sass/course/layout/_courseware_header.scss | 5 +++++ lms/templates/courseware.html | 2 +- lms/templates/gradebook.html | 2 +- lms/templates/info.html | 2 +- lms/templates/profile.html | 2 +- 7 files changed, 14 insertions(+), 15 deletions(-) diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index c05a09570c..6bd42e63cd 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -18,12 +18,14 @@ table { } .container { - padding: 1.4em lh(2); + padding: 1.4em 0; > div { - display: table; width: 100%; - table-layout: fixed; + box-sizing: border-box; + border-radius: 3px; + background: #fff; + @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); } } diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 1082930b13..7905bd81e6 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -3,14 +3,6 @@ html { max-height: 100%; } -div.inner-container { - padding: 40px; - box-sizing: border-box; - border-radius: 3px; - background: #fff; - @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); -} - div.course-wrapper { @extend .table-wrapper; padding: 40px; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 676ed5c58f..7a2a04a5db 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -17,6 +17,7 @@ nav.course-material { @include border-top-radius(4px); @include clearfix; padding: 10px 0 0 0; + margin-left: 10px; li { float: left; @@ -57,6 +58,10 @@ nav.course-material { border: none !important; box-shadow: none !important; + .logo { + margin-left: 13px !important; + } + .find-courses-button { display: none; } diff --git a/lms/templates/courseware.html b/lms/templates/courseware.html index 6bb6c74862..a14f35d154 100644 --- a/lms/templates/courseware.html +++ b/lms/templates/courseware.html @@ -32,7 +32,7 @@ <%include file="course_navigation.html" args="active_page='courseware'" />
-
+
close diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html index 895f7ea004..787fc23c9a 100644 --- a/lms/templates/gradebook.html +++ b/lms/templates/gradebook.html @@ -31,7 +31,7 @@ <%include file="course_navigation.html" args="active_page=''" />
-
+

Gradebook

diff --git a/lms/templates/info.html b/lms/templates/info.html index 58bfbd6933..a04e31896f 100644 --- a/lms/templates/info.html +++ b/lms/templates/info.html @@ -20,7 +20,7 @@ $(document).ready(function(){
-
+
% if user.is_authenticated():

Course Updates & News

diff --git a/lms/templates/profile.html b/lms/templates/profile.html index e0639b0e00..ca27920a1b 100644 --- a/lms/templates/profile.html +++ b/lms/templates/profile.html @@ -113,7 +113,7 @@ $(function() { <%include file="course_navigation.html" args="active_page='profile'" />
-
+
From 16190843e7bc4f4d0a4b797b5ac562bd4b7d996f Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 13:56:51 -0400 Subject: [PATCH 04/21] started reworking sidebar styles --- lms/static/images/bg-texture.png | Bin 0 -> 7766 bytes lms/static/sass/base/_variables.scss | 2 ++ lms/static/sass/course.scss | 1 + lms/static/sass/course/_info.scss | 23 ++++++++++++------ lms/static/sass/course/base/_base.scss | 13 +++++++--- lms/static/sass/course/base/_extends.scss | 9 ++++--- .../sass/course/courseware/_courseware.scss | 6 ----- .../course/layout/_courseware_header.scss | 8 +++--- lms/static/sass/course/layout/_footer.scss | 4 +++ 9 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 lms/static/images/bg-texture.png create mode 100644 lms/static/sass/course/layout/_footer.scss diff --git a/lms/static/images/bg-texture.png b/lms/static/images/bg-texture.png new file mode 100644 index 0000000000000000000000000000000000000000..909af2b7ffd30e4ccb5ed9851874c1fc8bd8a96d GIT binary patch literal 7766 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 Yzn8q1gBo1=`=?h;MN7F%@lDYG0lfgid;kCd literal 0 HcmV?d00001 diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 7ad30f0c91..50c5c07b5a 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -21,6 +21,7 @@ $pink: rgb(182,37,104); $yellow: rgb(255, 252, 221); $error-red: rgb(253, 87, 87); $border-color: #C8C8C8; +$sidebar-color: #f6f6f6; // old variables @@ -28,3 +29,4 @@ $light-gray: #ddd; $dark-gray: #333; $mit-red: #993333; $text-color: $dark-gray; + diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index d3a74cb91b..ba40de32e4 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -11,6 +11,7 @@ // Course base / layout styles @import 'course/layout/courseware_header'; +@import 'course/layout/footer'; @import 'course/base/base'; @import 'course/base/extends'; @import 'module/module-styles.scss'; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 1651ad4da8..886c46c9e7 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -68,23 +68,31 @@ div.info-wrapper { section.handouts { @extend .sidebar; - border-left: 1px solid $border-color; @include border-radius(0 4px 4px 0); border-right: 0; @include box-shadow(none); + font-size: 14px; h1 { - @extend .bottom-border; margin-bottom: 0; - padding: lh(.5) lh(.5); + padding: 20px 26px; + font-size: 18px; + font-style: normal; + font-weight: bold; } ol { li { + padding: 0 26px; + margin-bottom: 14px; + a { display: block; - padding-left: lh(.5); - padding-right: 0; + padding: 0; + + &:hover { + background: transparent; + } } &.expandable, @@ -98,7 +106,6 @@ div.info-wrapper { } &.multiple { - padding: lh(.5) 0 lh(.5) lh(.5); a { @include inline-block; @@ -133,7 +140,7 @@ div.info-wrapper { } div.hitarea { - background-image: url('../images/treeview-default.gif'); + background-image: url('../images/treeview-default.gif') no-repeat; display: block; height: 100%; margin-left: 0; @@ -165,7 +172,7 @@ div.info-wrapper { @include box-shadow(none); color: #aaa; font-size: 1em; - margin-bottom: em(6); + margin-bottom: em(6); } p { diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 6bd42e63cd..780520a3fc 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,6 +1,6 @@ body { min-width: 980px; - background: #f7f7f7; + background: url(../images/bg-texture.png) #f7f7f7; } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { @@ -12,6 +12,13 @@ table { table-layout: fixed; } +a { + &:hover { + color: $pink; + text-decoration: none !important; + } +} + .content-wrapper { background: none; border: none; @@ -36,6 +43,6 @@ form { } ::selection, ::-moz-selection, ::-webkit-selection { - background:#444; - color:#fff; + background: #444; + color: #fff; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 04eaf73094..3604f784f9 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -28,7 +28,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; - padding: lh(); + padding: 2.5em; vertical-align: top; width: flex-grid(9) + flex-gutter(); @@ -38,13 +38,14 @@ h1.top-header { } .sidebar { - border-right: 1px solid #C8C8C8; + // border-right: 1px solid #C8C8C8; @include box-sizing(border-box); display: table-cell; font-family: $sans-serif; position: relative; vertical-align: top; width: flex-grid(3); + background: $sidebar-color; h1, h2 { font-size: em(20); @@ -85,7 +86,7 @@ h1.top-header { } &.active { - @extend .bottom-border; + // @extend .bottom-border; color: #000; font-weight: bold; @@ -101,7 +102,7 @@ h1.top-header { padding-left: 0; li { - @extend .bottom-border; + // @extend .bottom-border; @extend .clearfix; background: none; position: relative; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 7905bd81e6..198902c146 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -5,12 +5,6 @@ html { div.course-wrapper { @extend .table-wrapper; - padding: 40px; - box-sizing: border-box; - border-radius: 3px; - background: #fff; - @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); - ul, ol { list-style: none; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 7a2a04a5db..ca8b9918d2 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,7 +1,6 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); - background: #f6f6f6; border-bottom: none; margin: 0px auto 0px; padding: 0px; @@ -24,7 +23,7 @@ nav.course-material { list-style: none; a { - color: darken($lighter-base-font-color, 20%); + color: #555; display: block; text-align: center; padding: 8px 13px 12px; @@ -34,7 +33,7 @@ nav.course-material { text-shadow: 0 1px rgb(255,255,255); &:hover { - color: $base-font-color; + color: #333; } &.active { @@ -72,6 +71,7 @@ nav.course-material { float: left; font-size: 0.9em; font-weight: 600; + color: #888; line-height: 40px; letter-spacing: 0; text-transform: none; @@ -83,7 +83,7 @@ nav.course-material { .provider { font: inherit; font-weight: bold; - color: #6d6d6d; + color: #555; } } } \ No newline at end of file diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss new file mode 100644 index 0000000000..7abf35a819 --- /dev/null +++ b/lms/static/sass/course/layout/_footer.scss @@ -0,0 +1,4 @@ +footer { + border: none; + box-shadow: none; +} \ No newline at end of file From 0f6c31b4bd67dee2459b887d5f299d58cad4a80b Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 15:51:10 -0400 Subject: [PATCH 05/21] started courseware sidebar styling --- lms/static/sass/course/_info.scss | 39 ++++++++----- lms/static/sass/course/base/_base.scss | 3 +- lms/static/sass/course/base/_extends.scss | 2 +- .../sass/course/courseware/_sidebar.scss | 58 ++++++++++--------- lms/templates/accordion.html | 32 +++++----- 5 files changed, 77 insertions(+), 57 deletions(-) diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 886c46c9e7..9a64c9d042 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -75,7 +75,7 @@ div.info-wrapper { h1 { margin-bottom: 0; - padding: 20px 26px; + padding: 32px 26px 20px 26px; font-size: 18px; font-style: normal; font-weight: bold; @@ -83,8 +83,7 @@ div.info-wrapper { ol { li { - padding: 0 26px; - margin-bottom: 14px; + margin: 0 26px 14px 26px; a { display: block; @@ -97,11 +96,25 @@ div.info-wrapper { &.expandable, &.collapsable { + margin: 0 16px 14px 16px; + @include transition(all .2s); + h4 { color: $blue; font-size: 1em; font-weight: normal; - padding: lh(.25) 0 lh(.25) lh(1.5); + padding-left: 30px; + } + } + + &.collapsable { + background: #fff; + border-radius: 3px; + padding: 14px 0; + @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25)); + + h4 { + margin-bottom: 16px; } } @@ -123,10 +136,10 @@ div.info-wrapper { li { border-bottom: 0; - border-top: 1px solid $border-color; - @include box-shadow(inset 0 1px 0 #eee); - font-size: 1em; - padding: lh(.5) 0 lh(.5) lh(.5); + border-top: 1px solid #e6e6e6; + font-size: 0.9em; + margin: 0; + padding: 15px 30px; a { @include inline-block; @@ -144,7 +157,7 @@ div.info-wrapper { display: block; height: 100%; margin-left: 0; - max-height: 30px; + max-height: 20px; position: absolute; width: 100%; @@ -159,20 +172,20 @@ div.info-wrapper { } &.expandable-hitarea { - background-position: -72px 7px; + background-position: -72px 0px; } &.collapsable-hitarea { - background-position: -55px -15px; + background-position: -55px -23px; } } h3 { border-bottom: 0; @include box-shadow(none); - color: #aaa; + color: #888; font-size: 1em; - margin-bottom: em(6); + margin-bottom: 0; } p { diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 780520a3fc..a7a59c7bf3 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -31,8 +31,9 @@ a { width: 100%; box-sizing: border-box; border-radius: 3px; + border: 1px solid #ccc; background: #fff; - @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1)); + @include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1)); } } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 3604f784f9..7087fd3568 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -28,7 +28,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; - padding: 2.5em; + padding: 2em 2.5em; vertical-align: top; width: flex-grid(9) + flex-gutter(); diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 51e9cbd90d..e516939297 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -1,6 +1,12 @@ section.course-index { @extend .sidebar; @extend .tran; + @include border-radius(3px 0 0 3px); + border-right: 1px solid #ddd; + + #open_close_accordion { + display: none; + } header { max-height: 47px; @@ -11,10 +17,11 @@ section.course-index { } div#accordion { + width: auto; + font-size: 14px; + h3 { @include border-radius(0); - border-top: 1px solid lighten($border-color, 10%); - font-size: em(16, 18); margin: 0; overflow: hidden; @@ -24,7 +31,6 @@ section.course-index { &:hover { color: #666; - background: #f6f6f6; } &.ui-state-hover { @@ -40,6 +46,7 @@ section.course-index { a { @include border-radius(0); @include box-shadow(none); + padding-left: 19px; } &.ui-state-active { @@ -52,28 +59,42 @@ section.course-index { } span.ui-icon { + left: 0; background-image: url("/static/images/ui-icons_222222_256x240.png"); opacity: .3; } } } + .chapter { + padding: 11px 14px; + @include linear-gradient(top, #f9f9f9, #eee); + box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset; + + &:first-child { + border-radius: 3px 0 0 0; + } + + &:last-child { + border-radius: 0 0 0 3px; + } + } + ul.ui-accordion-content { background: transparent; border: none; @include border-radius(0); - font-size: em(14, 18); margin: 0; - padding: 1em 1.5em; + padding: 9px 0 9px 9px; li { border-bottom: 0; @include border-radius(0); margin-bottom: lh(.5); + line-height: 1.4; a { background: transparent; - border: 1px solid transparent; @include border-radius(4px); display: block; padding: 5px 36px 5px 10px; @@ -92,26 +113,7 @@ section.course-index { } } - &:after { - background: transparent; - border-right: 1px solid rgb(180,180,180); - border-top: 1px solid rgb(180,180,180); - content: ""; - display: block; - height: 12px; - margin-top: -6px; - opacity: 0; - position: absolute; - right: 30px; - top: 50%; - @include transform(rotate(45deg)); - width: 12px; - } - &:hover { - @include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4))); - border-color: rgb(200,200,200); - &:after { opacity: 1; right: 15px; @@ -134,10 +136,12 @@ section.course-index { } &.active { - font-weight: bold; + font-weight: bold; > a { - border-color: rgb(200,200,200); + border: none; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset); + @include linear-gradient(top, #ddd, #bbb); &:after { opacity: 1; diff --git a/lms/templates/accordion.html b/lms/templates/accordion.html index 1f514fe4a4..0d3dee9495 100644 --- a/lms/templates/accordion.html +++ b/lms/templates/accordion.html @@ -1,22 +1,24 @@ <%! from django.core.urlresolvers import reverse %> <%def name="make_chapter(chapter)"> -

${chapter['display_name']} -

+
+

${chapter['display_name']} +

- + +
% for chapter in toc: From ee92ba0752f68a49fb10a3e3763677627ceef9a4 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 17:56:51 -0400 Subject: [PATCH 06/21] new sequence nav; new courseware sidebar; new textbook styling; fixed gradebook glitch --- lms/static/sass/course/_gradebook.scss | 3 ++ lms/static/sass/course/_info.scss | 2 +- lms/static/sass/course/_textbook.scss | 21 ++++++------ lms/static/sass/course/base/_extends.scss | 2 +- .../sass/course/courseware/_courseware.scss | 11 +++++++ .../sass/course/courseware/_sidebar.scss | 32 ++++++++++++------- 6 files changed, 49 insertions(+), 22 deletions(-) diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index cd3205149c..d8be7d779a 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -6,6 +6,9 @@ div.gradebook-wrapper { section.gradebook-content { @extend .content; + display: block; + width: 100%; + @include clearfix; .student-search { padding: 0 20px 0 15px; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 9a64c9d042..8cc5293246 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -69,7 +69,7 @@ div.info-wrapper { section.handouts { @extend .sidebar; @include border-radius(0 4px 4px 0); - border-right: 0; + border-left: 1px solid #ddd; @include box-shadow(none); font-size: 14px; diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index 8e88f8befd..73a215a46c 100644 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -1,10 +1,17 @@ div.book-wrapper { @extend .table-wrapper; + #open_close_accordion { + display: none; + } + section.book-sidebar { @extend .sidebar; @extend .tran; @include box-sizing(border-box); + padding: 10px 0; + border-radius: 3px 0 0 3px; + border-right: 1px solid #ccc; ul#booknav { font-size: em(14); @@ -33,7 +40,7 @@ div.book-wrapper { li { background: none; border-bottom: 0; - padding-left: lh(); + padding-left: lh(); a { padding: 0; @@ -50,7 +57,7 @@ div.book-wrapper { div.hitarea { background-image: url('../images/treeview-default.gif'); - margin-left: -22px; + position: relative; top: 4px; @@ -63,27 +70,23 @@ div.book-wrapper { ul { background: none; margin-top: lh(.25); - border-top: 1px solid $border-color; padding-top: lh(.25); li { - padding-bottom: lh(.25); + padding-bottom: 10px; } } } > li { - border-bottom: 1px solid $border-color; - padding: 7px 7px 7px 30px; + padding: 5px 6px; + margin: 0 16px 5px 25px; } } } section.book { @extend .content; - padding-bottom: 0; - padding-right: 0; - padding-top: 0; nav { @extend .clearfix; diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 7087fd3568..35ea19ee91 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -54,7 +54,7 @@ h1.top-header { text-transform: none; font-family: $sans-serif; text-align: left; - font-style: italic; + font-style: normal; } a { diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 198902c146..28bd817607 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -12,6 +12,7 @@ div.course-wrapper { section.course-content { @extend .content; + padding-top: 0 !important; @include border-radius(0 4px 4px 0); h1 { @@ -45,6 +46,7 @@ div.course-wrapper { ol.vert-mod { padding: 0; margin: 0; + line-height: 1.4; > li { @extend .clearfix; @@ -210,3 +212,12 @@ div.course-wrapper { } } } + +.xmodule_VideoModule { + margin-bottom: 30px; + + +} + + + diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index e516939297..7c884bf5d3 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -90,8 +90,7 @@ section.course-index { li { border-bottom: 0; @include border-radius(0); - margin-bottom: lh(.5); - line-height: 1.4; + margin-bottom: 4px; a { background: transparent; @@ -105,20 +104,18 @@ section.course-index { font-weight: bold; font-family: $sans-serif; margin-bottom: 0; + line-height: 1.3; span.subtitle { color: #666; + font-size: 13px; font-weight: normal; display: block; } - } + } &:hover { - &:after { - opacity: 1; - right: 15px; - @include transition(); - } + background: #fff; > a p { color: #333; @@ -136,12 +133,25 @@ section.course-index { } &.active { - font-weight: bold; + font-weight: bold; + + &:after { + content: '›'; + position: absolute; + top: 50%; + right: 20px; + margin-top: -13px; + font-size: 30px; + font-weight: normal; + color: #333; + opacity: 0; + @include transition(); + } > a { - border: none; + border: 1px solid #bbb; @include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset); - @include linear-gradient(top, #ddd, #bbb); + @include linear-gradient(top, #e6e6e6, #d6d6d6); &:after { opacity: 1; From a1ff34571e47ef6a7b4365ef6f7169599344e14f Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 18:01:57 -0400 Subject: [PATCH 07/21] sequence nav changes were lost?! temporary fix --- lms/static/sass/course/courseware/_courseware.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 28bd817607..459987e6b2 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -12,7 +12,6 @@ div.course-wrapper { section.course-content { @extend .content; - padding-top: 0 !important; @include border-radius(0 4px 4px 0); h1 { From 88d514e28d3dd12287b4d2d9587410fd4b1dc342 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 20 Aug 2012 18:15:09 -0400 Subject: [PATCH 08/21] fixed merge conflict in extends --- lms/static/sass/course/base/_extends.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 9604a6a7e6..f04d879bc3 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -37,11 +37,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; -<<<<<<< HEAD padding: 2em 2.5em; -======= - padding-right: lh(); ->>>>>>> master vertical-align: top; width: flex-grid(9) + flex-gutter(); From ed1bac7629b5a77af137de8bc96eaba1f6f6674a Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 08:28:24 -0400 Subject: [PATCH 09/21] fixed container padding and sidebar fades --- lms/static/sass/course/base/_base.scss | 4 ---- lms/static/sass/course/base/_extends.scss | 12 ------------ 2 files changed, 16 deletions(-) diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 1a9d9628c9..52d9eb5957 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -91,10 +91,6 @@ img { max-width: 100%; } -.container { - padding: em(40) 0; -} - ::selection, ::-moz-selection, ::-webkit-selection { background: #444; color: #fff; diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index f04d879bc3..7023005fcf 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -56,18 +56,6 @@ h1.top-header { width: flex-grid(3); background: $sidebar-color; - &:after { - width: 1px; - height: 100%; - @include position(absolute, 0px -1px 0px 0); - content: ""; - @include background-image(linear-gradient(top, #fff, rgba(#fff, 0)), linear-gradient(top, rgba(#fff, 0), #fff)); - background-position: top, bottom; - @include background-size(1px 20px); - background-repeat: no-repeat; - display: block; - } - h1, h2 { font-size: em(20); font-weight: 100; From fafb443484a0c44935a94fa859620727372196e7 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 09:24:55 -0400 Subject: [PATCH 10/21] fixed wiki styles --- lms/static/sass/course/base/_base.scss | 4 +- lms/static/sass/course/wiki/_wiki.scss | 59 ++++++++++++------- lms/templates/wiki/article.html | 7 ++- lms/templates/wiki/base.html | 34 +++++------ lms/templates/wiki/includes/article_menu.html | 10 ++-- 5 files changed, 66 insertions(+), 48 deletions(-) diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 52d9eb5957..e490fc01ce 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -25,11 +25,11 @@ a { } .container { - padding: 1.4em 0; + padding: 1.4em 0 0 0; > div { width: 100%; - box-sizing: border-box; + @include box-sizing(border-box); border-radius: 3px; border: 1px solid #ccc; background: #fff; diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index 43769c93a6..1ddb52da56 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -1,13 +1,6 @@ section.wiki { padding-top: 25px; - > header { - height: 33px; - margin-bottom: 36px; - padding-bottom: 26px; - border-bottom: 1px solid $light-gray; - } - .pull-left { float: left; } @@ -16,6 +9,18 @@ section.wiki { float: right; } + .wiki-wrapper { + @include clearfix; + + > header { + height: 33px; + padding: 24px 0 26px; + border-bottom: 1px solid #ccc; + border-radius: 3px 3px 0 0; + background-color: $sidebar-color; + } + } + /*----------------- @@ -27,7 +32,7 @@ section.wiki { .breadcrumb { list-style: none; padding-left: 0; - margin: 0 0 0 flex-gutter(); + margin: 0 0 0 40px; li { float: left; @@ -68,7 +73,7 @@ section.wiki { .global-functions { display: block; width: auto; - margin-right: flex-gutter(); + margin-right: 20px; } .add-article-btn { @@ -129,8 +134,9 @@ section.wiki { .main-article { float: left; width: flex-grid(9); - margin-left: flex-gutter(); + padding: 40px 0 40px 40px; color: $base-font-color; + @include box-sizing(border-box); } &.view .main-article { @@ -206,13 +212,14 @@ section.wiki { .article-functions { float: left; - width: flex-grid(2) + flex-gutter(); - margin-left: flex-grid(1); + width: flex-grid(3); + padding: 40px 40px; + @include box-sizing(border-box); .timestamp { - margin: 4px 0 15px; - padding: 0 0 15px 5px; - border-bottom: 1px solid $light-gray; + margin-top: 15px; + padding: 15px 0 0 10px; + border-top: 1px solid $light-gray; .label { font-size: 0.7em; @@ -236,7 +243,8 @@ section.wiki { a { color: $blue; - .icon-view { + .icon-view, + .icon-home { background-position: -25px 0; } @@ -244,11 +252,13 @@ section.wiki { background-position: -25px -25px; } - .icon-changes { + .icon-changes, + .icon-time { background-position: -25px -49px; } - .icon-attachments { + .icon-attachments, + .icon-file { background-position: -25px -73px; } @@ -280,7 +290,8 @@ section.wiki { background: url(../images/wiki-icons.png) no-repeat; } - .icon-view { + .icon-view, + .icon-home { background-position: 0 0; } @@ -288,11 +299,13 @@ section.wiki { background-position: 0 -25px; } - .icon-changes { + .icon-changes, + .icon-time { background-position: 0 -49px; } - .icon-attachments { + .icon-attachments, + .icon-file { background-position: 0 -73px; } @@ -706,6 +719,10 @@ section.wiki { font-size: 0.8em; } + .attachment-actions { + width: 175px; + } + .attachment-actions .btn { float: right; } diff --git a/lms/templates/wiki/article.html b/lms/templates/wiki/article.html index 7175219f74..d428e5bf1b 100644 --- a/lms/templates/wiki/article.html +++ b/lms/templates/wiki/article.html @@ -23,13 +23,14 @@
+ +
    + {% include "wiki/includes/article_menu.html" %} +
{% trans "Last modified:" %}
{{ article.current_revision.modified }}
-
    - {% include "wiki/includes/article_menu.html" %} -
diff --git a/lms/templates/wiki/base.html b/lms/templates/wiki/base.html index d4428da466..fc4a2d18d4 100644 --- a/lms/templates/wiki/base.html +++ b/lms/templates/wiki/base.html @@ -51,24 +51,24 @@ {% endif %}
+
+ {% block wiki_body %} + + {% block wiki_breadcrumbs %}{% endblock %} - {% block wiki_body %} - - {% block wiki_breadcrumbs %}{% endblock %} - - {% if messages %} - {% for message in messages %} -
- × - {{ message }} -
- {% endfor %} - {% endif %} - - {% block wiki_contents %}{% endblock %} - - {% endblock %} - + {% if messages %} + {% for message in messages %} +
+ × + {{ message }} +
+ {% endfor %} + {% endif %} + + {% block wiki_contents %}{% endblock %} + + {% endblock %} +
{% endblock %} diff --git a/lms/templates/wiki/includes/article_menu.html b/lms/templates/wiki/includes/article_menu.html index 5088ae9570..5131b4c3e9 100644 --- a/lms/templates/wiki/includes/article_menu.html +++ b/lms/templates/wiki/includes/article_menu.html @@ -3,7 +3,7 @@
  • - + View
    • @@ -11,7 +11,7 @@ %if article.can_write(user):
  • - + Edit
    • @@ -19,7 +19,7 @@
  • - + Changes
    • @@ -28,7 +28,7 @@ %if hasattr(plugin, "article_tab"):
  • - + ${plugin.article_tab[0]}
    • @@ -38,7 +38,7 @@ %if not user.is_anonymous():
  • - + Settings
    • From 4e6d7babcc6f20a1f6b47ce845148d4ec723aae2 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 12:51:33 -0400 Subject: [PATCH 11/21] fixed wiki bugs; started sequence nav bugs --- .../xmodule/xmodule/css/sequence/display.scss | 56 +++++++++--------- .../static/images/sequence-nav/next-icon.png | Bin 250 -> 1079 bytes .../images/sequence-nav/previous-icon.png | Bin 243 -> 1062 bytes lms/static/sass/README.txt | 3 + lms/static/sass/course/base/_base.scss | 1 + lms/static/sass/course/base/_extends.scss | 9 ++- .../sass/course/courseware/_courseware.scss | 3 +- .../sass/course/discussion/_discussion.scss | 5 +- .../sass/course/discussion/_sidebar.scss | 12 ++-- lms/static/sass/course/discussion/_tags.scss | 4 +- lms/templates/wiki/article.html | 3 +- lms/templates/wiki/settings.html | 10 ++-- 12 files changed, 58 insertions(+), 48 deletions(-) create mode 100644 lms/static/sass/README.txt diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 8c3ab322e2..0cfc1cbd98 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -2,10 +2,13 @@ nav.sequence-nav { // TODO (cpennington): This doesn't work anymore. XModules aren't able to // import from external sources. @extend .topbar; - border-bottom: 1px solid $border-color; - @include border-top-right-radius(4px); - margin: 0 0 lh() (-(lh())); + border: 1px solid #ccc; + height: 44px; + @include linear-gradient(top, #f6f6f6, #e6e6e6); + @include border-radius(25px); + margin: 0 -20px 30px; position: relative; + @include box-shadow(0 1px 0 #fff inset); ol { @include box-sizing(border-box); @@ -25,42 +28,34 @@ nav.sequence-nav { min-width: 20px; a { - background-position: center; + width: 35px; + height: 35px; + margin: 4px auto; + background-position: center 10px; background-repeat: no-repeat; border: 1px solid transparent; - border-bottom: none; - @include border-radius(3px 3px 0 0); + @include border-radius(35px); cursor: pointer; display: block; - height: 10px; - padding: 15px 0 14px; + padding: 0; position: relative; @include transition(); - width: 100%; &:hover { + background-color: #fff; background-repeat: no-repeat; - background-position: center; - background-color: #F3F3F3; - } - - &.visited { - background-color: #F3F3F3; - - &:hover { - background-position: center center; - } + background-position: center 10px; } &.active { - border-color: $border-color; - @include box-shadow(0 2px 0 #fff); + border-color: $blue; background-color: #fff; z-index: 9; &:hover { - background-position: center; background-color: #fff; + background-repeat: no-repeat; + background-position: center 10px; } } @@ -176,24 +171,27 @@ nav.sequence-nav { position: absolute; right: 0; top: 0; - width: flex-grid(1, 9); - border: 1px solid $border-color; + width: 81px; + margin-right: 5px; + border: none; border-bottom: 0; @include border-radius(3px 3px 0 0); li { float: left; margin-bottom: 0; - width: 50%; + height: 35px; + width: 40px; &.prev, &.next { + @include linear-gradient(top, #ccc, #888); a { background-position: center; background-repeat: no-repeat; display: block; - height: 10px; - padding: 15px 0 14px; + height: 35px; + width: 40px; text-indent: -9999px; @include transition(all, .2s, $ease-in-out-quad); @@ -210,12 +208,16 @@ nav.sequence-nav { } &.prev { + border-radius: 35px 0 0 35px; + a { background-image: url('../images/sequence-nav/previous-icon.png'); } } &.next { + border-radius: 0 35px 35px 0; + a { border-left: 1px solid lighten($border-color, 10%); background-image: url('../images/sequence-nav/next-icon.png'); diff --git a/common/static/images/sequence-nav/next-icon.png b/common/static/images/sequence-nav/next-icon.png index ece431dcb891eaa0d4507074e720bce3017e251b..b54f8566de1f90db9872940a9e345040be5f204f 100644 GIT binary patch literal 1079 zcmaJ=T}TvB6dqH=OhY8-kLof;RJ1!Y`!hPDo2xs!xzy;gF6dM2?95e%ZRSoh*LGCM z>_IjNF%a<~=tYPKdI*Z3umXc3q+WvPB~YlI3LgT&m+oxt)er zOz)et;oxL{MxD&7f<||r1zoO42n>i7;2M`qM|2}}iB}}H=VoY73c>jZ{ky1PIR#?K zh9K+@`c#(V0MGlmP?+brGa$fn0fr@u_i-UH%!`3`u=CL*o2`wAX(_Rji<~0#7{->! zFoisfR9A@oCy;vuFrJZ$_x^8R9m;Oj!fV&DmgTcBQ&Y>cMFD9 zp*5YIYa$oMxQfMae%5QL94O2G4>gQRw1d;|Prd&nb}|zdWYW+<NSEIb+BIu|Xc3loeGsJ;$jMLYBp(>0rfFVN#0Fgu}1vnka>P+e18? zka`mm$Hh4z)E*XsLMW6-1cGrsR>n$59XFtf%UG>~<=CoNPYi}dGE30buRtwfBLkG0 z7WL}2NLBfEuv*nx*mzYeLyBR%(f&2+vWw`)Gb_R+hl=!}N%U?LVZY0ppUI=Rmy~)k z?x)m*70xNR^n@7Oj zUAY0UGW&Mz&dig#;-eWi^001C>-Mo0hFU)auFkEUURqb9w`*6wZVE@2I~t2a6!$V! a)4)>S&L0N%rIL&;_{jg3Ko|^M11j6K%E1_h0br6|>%%oo z!?G+V@NmwOQc4n5pmYx3IF0~MlVC@dd&rOb0=3xwIm^iSVgLXD07*qoM6N<$g2G{D AWdHyG diff --git a/common/static/images/sequence-nav/previous-icon.png b/common/static/images/sequence-nav/previous-icon.png index 3b995df1f0f37e99420b1026ca4c048d328c3dd0..33277d6af446ff0efd14fdba9b22216d99fc02c8 100644 GIT binary patch literal 1062 zcmaJ=%}*0S6yE|tf)uJ41!Ks#c#wqdN57y;D`K~mCN9C!Xpe4pr*uR2gWbU{T%Zz@ ziisBqnrMt%@L*!Nm=HY>6%+jfjK+90dN674NJ1Hn*;?FT-F_0bGoAuk)?f+5Z~0IDB}vzc;^OYww2Mfi{p76=~iAhKx`reP70!=XpW<=f)E5QsaZ(WB$(u*B<7$LMdn8Mfk4pDGJGr$ zVA(hu4h#gt{%|0WNcjBmP^^aKb!kS08meLCJuF)n>xe-$aAqEw%4H}gOkD+)ra7f< zElj*FUll9Yt%XU{#nQMK+8OO%qprEIejIaGxcIOueW+o*n^@TMpWO}kQQS`QBWe46 zc6ntb2M%VK1FNI$F?BU4LU}>YJ{BX6K1E+Z5Gu}@910o_;kY4?oWn<3 z?*HgFODX+@c&L<`BS-0Y)wb;j0Fz|A*IK{vnYym~l!goBf+T{4e7welCk=}N9uAaH z5-8zH$D)8A8%n4O_|gEtgAesTG%?1Tb51P$B;?%peKN)f1ZFo3!(^=$2+R@_@7{Z% tz=7mZH@o{002ovPDHLkV1o3zVfp|7 diff --git a/lms/static/sass/README.txt b/lms/static/sass/README.txt new file mode 100644 index 0000000000..5523d207ac --- /dev/null +++ b/lms/static/sass/README.txt @@ -0,0 +1,3 @@ +Sass Watch: + +sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index e490fc01ce..038ce50247 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,5 +1,6 @@ body { min-width: 980px; + min-height: 100%; background: url(../images/bg-texture.png) #f7f7f7; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 7023005fcf..bcb93a3645 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -47,10 +47,10 @@ h1.top-header { } .sidebar { - // border-right: 1px solid #C8C8C8; @include box-sizing(border-box); display: table-cell; font-family: $sans-serif; + font-size: 14px; position: relative; vertical-align: top; width: flex-grid(3); @@ -58,7 +58,7 @@ h1.top-header { h1, h2 { font-size: em(20); - font-weight: 100; + font-weight: bold; letter-spacing: 0; text-transform: none; font-family: $sans-serif; @@ -66,6 +66,11 @@ h1.top-header { font-style: normal; } + h1 { + font-size: 18px; + padding: 32px 26px 20px 26px; + } + a { border: none; font-style: normal; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index abf8d695be..929adb57a5 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -12,8 +12,7 @@ div.course-wrapper { section.course-content { @extend .content; - padding-right: 0; - padding-left: lh(); + padding: 40px; h1 { margin: 0 0 lh(); diff --git a/lms/static/sass/course/discussion/_discussion.scss b/lms/static/sass/course/discussion/_discussion.scss index 3aaf73c4ac..9383241980 100644 --- a/lms/static/sass/course/discussion/_discussion.scss +++ b/lms/static/sass/course/discussion/_discussion.scss @@ -3,15 +3,16 @@ body.askbot { section.container { div.discussion-wrapper { @extend .table-wrapper; + display: table; div.discussion-content { @include box-sizing(border-box); display: table-cell; min-width: 650px; - padding-right: lh(); - vertical-align: top; + padding: 40px; width: flex-grid(9) + flex-gutter(); + a.tabula-rasa, .tabula-rasa{ @extend .light-button; @include border-radius(5px); diff --git a/lms/static/sass/course/discussion/_sidebar.scss b/lms/static/sass/course/discussion/_sidebar.scss index b248fb18d7..adcd38a383 100644 --- a/lms/static/sass/course/discussion/_sidebar.scss +++ b/lms/static/sass/course/discussion/_sidebar.scss @@ -2,9 +2,10 @@ div.discussion-wrapper aside { @extend .sidebar; - border-left: 1px solid $border-color; + border-left: 1px solid #ccc; border-right: 0; width: flex-grid(3); + border-radius: 0 3px 3px 0; &:after { left: -1px; @@ -16,9 +17,7 @@ div.discussion-wrapper aside { } h1 { - @extend .bottom-border; - padding: lh(.5) lh(); - margin-bottom: em(16, 20); + margin-bottom: 0; } h2 { @@ -54,7 +53,7 @@ div.discussion-wrapper aside { div.box { display: block; - padding: lh(.5) lh(); + padding: 18px 26px; border-top: 1px solid lighten($border-color, 10%); &:first-child { @@ -67,7 +66,7 @@ div.discussion-wrapper aside { li { border-bottom: 0; - background: #eee; + background: #ddd; padding: 6px 10px 6px 5px; a { @@ -298,6 +297,7 @@ div.discussion-wrapper aside { div.view-profile { border-top: 0; + padding-top: 0; a { @extend .gray-button; diff --git a/lms/static/sass/course/discussion/_tags.scss b/lms/static/sass/course/discussion/_tags.scss index 5cf78a4816..92210d8053 100644 --- a/lms/static/sass/course/discussion/_tags.scss +++ b/lms/static/sass/course/discussion/_tags.scss @@ -10,7 +10,7 @@ ul.tags { } li { - background: #eee; + background: #ddd; color: #555; display: inline-block; font-size: 12px; @@ -19,7 +19,7 @@ ul.tags { padding: 6px 10px 6px 5px; &:before { - border-color:transparent #eee transparent transparent; + border-color:transparent #ddd transparent transparent; border-style:solid; border-width:12px 10px 12px 0; content:""; diff --git a/lms/templates/wiki/article.html b/lms/templates/wiki/article.html index d428e5bf1b..7c8c8fb66a 100644 --- a/lms/templates/wiki/article.html +++ b/lms/templates/wiki/article.html @@ -22,8 +22,7 @@ {% endblock %} -
    - +
      {% include "wiki/includes/article_menu.html" %}
    diff --git a/lms/templates/wiki/settings.html b/lms/templates/wiki/settings.html index a932a26498..93e92cbc61 100644 --- a/lms/templates/wiki/settings.html +++ b/lms/templates/wiki/settings.html @@ -35,16 +35,16 @@ -
    -
    - {% trans "Last modified:" %}
    - {{ article.current_revision.modified }} -
    +
      {% with "settings" as selected %} {% include "wiki/includes/article_menu.html" %} {% endwith %}
    +
    + {% trans "Last modified:" %}
    + {{ article.current_revision.modified }} +
    From 0475f4cc44b6f813dc3b4b36c41ed7f7d5bcf405 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 13:31:15 -0400 Subject: [PATCH 12/21] new sequence nav; tweaked video box --- .../xmodule/xmodule/css/sequence/display.scss | 33 +++++++++++++------ .../xmodule/xmodule/css/video/display.scss | 8 ++--- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 0cfc1cbd98..d616206179 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -4,9 +4,9 @@ nav.sequence-nav { @extend .topbar; border: 1px solid #ccc; height: 44px; - @include linear-gradient(top, #f6f6f6, #e6e6e6); + @include linear-gradient(top, #eee, #ddd); @include border-radius(25px); - margin: 0 -20px 30px; + margin: -4px -20px 30px; position: relative; @include box-shadow(0 1px 0 #fff inset); @@ -16,7 +16,7 @@ nav.sequence-nav { height: 100%; margin: 0; padding-left: 3px; - padding-right: flex-grid(1, 9); + padding-right: 90px; width: 100%; a { @@ -28,8 +28,8 @@ nav.sequence-nav { min-width: 20px; a { - width: 35px; - height: 35px; + width: 34px; + height: 34px; margin: 4px auto; background-position: center 10px; background-repeat: no-repeat; @@ -52,6 +52,17 @@ nav.sequence-nav { background-color: #fff; z-index: 9; + // &:after { + // content: '▲'; + // position: absolute; + // top: 28px; + // left: 50%; + // z-index: 9999; + // margin-left: -5px; + // font-size: 12px; + // color: #aaa; + // } + &:hover { background-color: #fff; background-repeat: no-repeat; @@ -172,7 +183,7 @@ nav.sequence-nav { right: 0; top: 0; width: 81px; - margin-right: 5px; + margin: 5px 5px 0 0; border: none; border-bottom: 0; @include border-radius(3px 3px 0 0); @@ -180,24 +191,24 @@ nav.sequence-nav { li { float: left; margin-bottom: 0; - height: 35px; + height: 34px; width: 40px; &.prev, &.next { @include linear-gradient(top, #ccc, #888); + @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset); a { background-position: center; background-repeat: no-repeat; display: block; - height: 35px; + height: 34px; width: 40px; text-indent: -9999px; @include transition(all, .2s, $ease-in-out-quad); &:hover { opacity: .5; - background-color: #f4f4f4; } &.disabled { @@ -212,6 +223,7 @@ nav.sequence-nav { a { background-image: url('../images/sequence-nav/previous-icon.png'); + background-position: center 10px; } } @@ -219,8 +231,9 @@ nav.sequence-nav { border-radius: 0 35px 35px 0; a { - border-left: 1px solid lighten($border-color, 10%); + border-left: 1px solid #888; background-image: url('../images/sequence-nav/next-icon.png'); + background-position: center 10px; } } } diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 848294b699..fb78f46d77 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -1,11 +1,10 @@ div.video { @include clearfix(); background: #f3f3f3; - border-bottom: 1px solid #e1e1e1; - border-top: 1px solid #e1e1e1; display: block; - margin: 0 0 0 (-(lh())); - padding: 6px lh(); + margin: 0 -12px; + padding: 12px; + border-radius: 5px; article.video-wrapper { float: left; @@ -401,6 +400,7 @@ div.video { overflow: auto; width: flex-grid(3, 9); margin: 0; + font-size: 14px; li { border: 0; From ad5fcbe7845e2feb074463ba71811274b9e9b68c Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 14:46:35 -0400 Subject: [PATCH 13/21] new header styles --- lms/static/images/small-header-home-icon.png | Bin 0 -> 1128 bytes lms/static/images/small-header-logo.png | Bin 0 -> 2159 bytes lms/static/sass/base/_variables.scss | 2 +- lms/static/sass/course.scss | 3 + .../sass/course/courseware/_sidebar.scss | 3 +- .../sass/course/instructor/_instructor.scss | 15 +++++ .../course/layout/_courseware_header.scss | 62 ++++++++++++++---- lms/static/sass/shared/_footer.scss | 3 - lms/static/sass/shared/_header.scss | 17 ++--- 9 files changed, 80 insertions(+), 25 deletions(-) create mode 100644 lms/static/images/small-header-home-icon.png create mode 100644 lms/static/images/small-header-logo.png create mode 100644 lms/static/sass/course/instructor/_instructor.scss diff --git a/lms/static/images/small-header-home-icon.png b/lms/static/images/small-header-home-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..2e81217b772fbd7449e47b18cda2eea07f5a6c19 GIT binary patch literal 1128 zcmaJ=TWHfz7>;vznF#9iK^Yh`k$Gv-v`x0g)!8PkD=u@kRVU6%nw+j-OHNGAY*!F3 z2s%U*MDhBfPm1~=sHmV+M7%vX^+Br0Kp*Cl;zUpwc(Se2hs}`Wob&U4-~auW)7RFz zZg$n8DuN(p$D5@DUaRppXT~)A|M6H#<7FX=wxcA>pqyd@BCNqQAmfJ82@*ijdUrnq zjRY}ush(;_?Q)BtLW5RZA3ASX7)=n3O?gXEy8t57pi?(P)YtnDDN@%$)D}+m%9aSS zdUL@B$wF&NEp(|tjcQs$Hs%FPU;w0$d86BOgnWn^;T7=SH8T`B;)1$D)TpR-xs4Q| z4M>jmdsHvWk~~kd0gmU{Riw|$`WP>Mc@G;9I9~A8lVcBsquE+UNJz1ChxyMkNh

    8}xM^iAY zaaz+ED-$jllUFQ;rM+%SWk*^5zpG)4dpjrr{_35O*h%$TfJp!c_ShViSy6S~bI`i331O)|!1>t* zNel#7Hp&JA^<2;&3_`{Vlw-Q zIrmgN-?VApxBkz!hMRXBc{+4q-s_4x@7DRkZ>O(5F}%Wmi5o0+{=ELOue9f5-^{%? zr&M1oR(7N#U*=vvldU|xtET#SWq<#J_wVm+shfIfN%h^DNMvg*wNmK){pHZ&!)dMJ z<=G<@6uop=2LZH2EyX88mosm{tjxgG?jpA>IrL-gslvtdl@DvP!yPRf=Re-O?BnhD rfqQi?zO!uy)^JzeJiPtu`S$%&hz;@JPwvE8W#v{kwh*>&&_{QG-Y literal 0 HcmV?d00001 diff --git a/lms/static/images/small-header-logo.png b/lms/static/images/small-header-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a841b5429d38d38c8fd1b3f6809118e2d8bd31af GIT binary patch literal 2159 zcmaJ@dpMN&9v^F^j9W;`a;9-@F&8sqnrTL4jK*V-aod(X#>|UZX5MM$#c;OJma>#w z4<{ZKE9E>aODe*;tf8=lR_=*ZE|cV-ROg*G?f!9`_j%v<_xpXH@8|Qqeg62Rcze2O zY3$ZOAP`!tLku5y#lfG^)-CYA;qCDec-aNH20|P#42tDS0E9Ci3WhS3NF?SM?oEE@H} z1&XAj|41s3?TvB)B>;+qA=vS7cs$C%0fQ%!931erD0>{<9*cut2Rl5GN^+pulTjZZ zG#pLB52N}pm>*-oCptO;g2YrTHa0dE6HCB=l5i}ZLZK)*?CtGf4?Ag`2;$1@L{hU2 z1_mJINd#g@0E$pbMs6q=4bjnXrhk+m6n~->Nk6s;ZWva^6=U%joU)`1M>hNay9$M$ zyrqy2@MpgNlUV8-CkC)SfE0|D@ZiCPnJGhwsV)+L3xN_}5RBUBqIU!cfzk+2jB?>P zpsd+koP7US_p`s4J`jpENN4$QVc>d9GL+~1Tg@gDFKD34@FZ2o9AM`Dc?sd zfAd@jn_{tWGFatk|1#yn3Gw*UjMA}2#R{SC_qL68En0W7^XImLE z**z^o^ImsZTboB((Z2R1?JErCmk+0kgCB_IhZbtz^$Z`IUU)ecN$NS7wI2VbhhC|O zRjl2Z@#7L~dqH79nj&4>u-wSN->0Nl1mvN-4&e^7CKvUc96No6FnW4Dv202_jIEIMy3`gPs#@xkq9YzkJT zP8HqEKF|BD!`kBtY(;6H(JwE^~Zp zulu*aePhxm{ITV;J6hX>l=NZ+-WptcgkXw@5MALjzWP;HE&;Ql%n3+*P*A(lbSshm0bNKbe zcK!RYc~xbdbG$r7)qc6ipu((XDW>=Jk5_AKCOs*A7+Q?vb4J2X)g2?a>{4I;i(Bn;8b2^6 zxHdXdZ?lU1`t*+GdX!cM-=!EMd$P+~9j5Lqt~s76_PypBcV;H#*=KF4mYwD47QO?Q z@UGj8^SmEhoj2~(L|WIOye_S(;M{)uRW>H)-clmRN??@eZd74TF*&9nBiOVyVEe>b0iECUa7HioTYOgNII;iX7kD9#t`E zs3(-{!r#`n&W<-H|1`S2Pdgx5hk3AY6mUB1-uIOMF1x8gKD9G+5Nn!ft}?*Z8b@Zv zrJK(7-LYAAUvZDoYKYu7j7&1hDI}Y>;#PWe)9>XpyD~GEBUL+EYAyDxR9i%c=BPDJ zS}poH6%T@itbMQFrA@avB6k>UDR3=*trP4M+&QwAZ3ZssuLyK?B-psMit#<*XH&u7 z;@ZQ`b&b4z=wHlotDcqL8j3fUxL#kGLq2)?s=cgSbR;~GURSiEH{Yu4TAy8Q?|26p zT~4l6PkJLm|ExLsG?ntNcpEv#Z0DS*NkZN Wx|y1Nf!3(J0 li.primary { display: block; @@ -151,22 +152,22 @@ header.global { > a { @include border-radius(0 4px 4px 0); border-left: none; + padding: 5px 8px 7px 8px; } } } a.user-link { - padding: 10px 12px 10px 42px; + padding: 6px 12px 8px 35px; position: relative; text-transform: none; + font-size: 14px; + font-weight: bold; + letter-spacing: 0; .avatar { - //background: rgb(220,220,220); - @include background-image(url('../images/portal-icons/home-icon.png')); - background-size: cover; - //@include border-radius(3px); - //border: 1px solid rgb(80,80,80); - //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + @include background-image(url('../images/small-header-home-icon.png')); + background-repeat: no-repeat; height: 26px; @include inline-block; left: 8px; @@ -194,7 +195,7 @@ header.global { padding: 5px 10px; position: absolute; right: 0px; - top: 50px; + top: 34px; width: 170px; z-index: 3; From e762844c35d45be45bf6faf1c630899d74945c4f Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 18:12:59 -0400 Subject: [PATCH 14/21] new sequence nav functionality - accommodates an infinite number of items --- .../xmodule/xmodule/css/sequence/display.scss | 76 +++++++++---- lms/static/js/jquery.sequence.js | 104 ++++++++++++++++++ lms/static/sass/course/base/_base.scss | 3 +- .../course/layout/_courseware_header.scss | 4 +- lms/templates/courseware/courseware.html | 1 + lms/templates/seq_module.html | 40 ++++--- 6 files changed, 190 insertions(+), 38 deletions(-) create mode 100644 lms/static/js/jquery.sequence.js diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index d616206179..77e107c25e 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -2,21 +2,52 @@ nav.sequence-nav { // TODO (cpennington): This doesn't work anymore. XModules aren't able to // import from external sources. @extend .topbar; - border: 1px solid #ccc; - height: 44px; - @include linear-gradient(top, #eee, #ddd); - @include border-radius(25px); - margin: -4px -20px 30px; + margin: -4px 0 30px; position: relative; - @include box-shadow(0 1px 0 #fff inset); + border-bottom: none; + + .left-shadow { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 46px; + @include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); + background-color: transparent; + pointer-events: none; + } + + .right-shadow { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 46px; + @include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); + background-color: transparent; + pointer-events: none; + } + + .sequence-list-wrapper { + position: relative; + z-index: 9999; + border: 1px solid #ccc; + height: 44px; + margin: 0 30px; + @include linear-gradient(top, #ddd, #eee); + overflow: hidden; + @include box-shadow(0 1px 3px rgba(0, 0, 0, .1) inset); + } ol { + position: absolute; + top: 0; + left: 0; @include box-sizing(border-box); display: table; height: 100%; margin: 0; - padding-left: 3px; - padding-right: 90px; + padding: 0 10px; width: 100%; a { @@ -48,7 +79,6 @@ nav.sequence-nav { } &.active { - border-color: $blue; background-color: #fff; z-index: 9; @@ -177,26 +207,26 @@ nav.sequence-nav { } ul { + position: absolute; + top: 0; list-style: none; height: 100%; - position: absolute; right: 0; top: 0; - width: 81px; - margin: 5px 5px 0 0; + width: 100%; + margin: 0; border: none; - border-bottom: 0; - @include border-radius(3px 3px 0 0); li { - float: left; + position: absolute; margin-bottom: 0; - height: 34px; - width: 40px; + height: 44px; + width: 70px; + border: 1px solid #ccc; + @include linear-gradient(top, #eee, #ddd); + @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); &.prev, &.next { - @include linear-gradient(top, #ccc, #888); - @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset); a { background-position: center; @@ -219,21 +249,23 @@ nav.sequence-nav { } &.prev { + left: -10px; border-radius: 35px 0 0 35px; a { background-image: url('../images/sequence-nav/previous-icon.png'); - background-position: center 10px; + background-position: center 15px; } } &.next { + right: -10px; border-radius: 0 35px 35px 0; a { - border-left: 1px solid #888; + margin-left: 30px; background-image: url('../images/sequence-nav/next-icon.png'); - background-position: center 10px; + background-position: center 15px; } } } diff --git a/lms/static/js/jquery.sequence.js b/lms/static/js/jquery.sequence.js new file mode 100644 index 0000000000..5406444eed --- /dev/null +++ b/lms/static/js/jquery.sequence.js @@ -0,0 +1,104 @@ + + + +var SequenceNav = function($element) { + var _this = this; + var $element = $element; + var $wrapper = $element.find('.sequence-list-wrapper'); + var $list = $element.find('#sequence-list'); + var $arrows = $element.find('.sequence-nav-buttons'); + var maxScroll = $list.width() - $wrapper.width() + 20; + var $leftShadow = $('

    '); + var $rightShadow = $('
    '); + var $body = $('body'); + var listOrigin; + var mouseOrigin; + + var startDrag = function(e) { + updateWidths(); + mouseOrigin = e.pageX; + listOrigin = $list.position().left; + $body.css('-webkit-user-select', 'none'); + $body.bind('mousemove', moveDrag); + $body.bind('mouseup', stopDrag); + }; + + var moveDrag = function(e) { + var offset = e.pageX - mouseOrigin; + var targetLeft = clamp(listOrigin + offset, -maxScroll, 0); + + console.log('---------------'); + console.log('offset: ' + offset); + console.log('target left: ' + targetLeft); + console.log('max: ' + maxScroll); + + updateHorizontalPosition(targetLeft); + + setShadows(targetLeft); + }; + + var stopDrag = function(e) { + $body.css('-webkit-user-select', 'auto'); + $body.unbind('mousemove', moveDrag); + $body.unbind('mouseup', stopDrag); + }; + + var setShadows = function(left) { + var left = left || $list.position().left; + var padding = 30; + + var leftPercent = clamp(-left / padding, 0, 1); + $leftShadow.css('opacity', leftPercent); + + var rightPercent = clamp((maxScroll + left) / padding, 0, 1); + $rightShadow.css('opacity', rightPercent); + }; + + var clamp = function(val, min, max) { + if(val > max) return max; + if(val < min) return min; + return val; + }; + + var updateWidths = function(e) { + maxScroll = $list.width() - $wrapper.width() + 20; + var targetLeft = clamp($list.position().left, -maxScroll, 0); + updateHorizontalPosition(targetLeft); + setShadows(targetLeft); + }; + + var updateHorizontalPosition = function(left) { + $list.css({ + 'left': left + 'px' + }); + }; + + var checkPosition = function(e) { + var $active = $element.find('.active'); + if(!$active[0]) { + return; + } + if($active.position().left + $active.width() > $wrapper.width() - $list.position().left) { + $list.animate({ + 'left': (-$active.position().left + $wrapper.width() - $active.width() - 10) + 'px' + }, { + step: setShadows + }); + } else if($active.position().left < -$list.position().left) { + $list.animate({ + 'left': (-$active.position().left + 10) + 'px' + }, { + step: setShadows + }); + } + }; + + $wrapper.append($leftShadow).append($rightShadow); + setShadows(0); + $wrapper.bind('mousedown', startDrag); + $arrows.bind('click', checkPosition); + $(window).bind('resize', updateWidths); + setTimeout(function() { + checkPosition(); + }, 200); +} \ No newline at end of file diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 038ce50247..d09051f453 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -29,12 +29,13 @@ a { padding: 1.4em 0 0 0; > div { + display: table; width: 100%; @include box-sizing(border-box); border-radius: 3px; border: 1px solid #ccc; background: #fff; - @include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1)); + @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); } } diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index a4d5014baf..f7eb481e40 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -58,11 +58,11 @@ nav.course-material { header.global { border-bottom: 1px solid #bbb; @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); - height: 45px; + height: 50px; @include linear-gradient(top, #fff, #eee); nav { - padding-top: 2px; + padding-top: 5px; } h1.logo { diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html index 02149ec463..d5bdb9b302 100644 --- a/lms/templates/courseware/courseware.html +++ b/lms/templates/courseware/courseware.html @@ -10,6 +10,7 @@ <%block name="js_extra"> + ## codemirror diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html index be0f4902d4..a918f3c1de 100644 --- a/lms/templates/seq_module.html +++ b/lms/templates/seq_module.html @@ -1,18 +1,20 @@
    + + + + \ No newline at end of file From 88505b39483bd64aed477f85b9e8cb6a8fcc0115 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 18:41:06 -0400 Subject: [PATCH 15/21] fixed discussion sidebar --- lms/static/sass/_discussion.scss | 18 ++++++++++++++---- .../sass/course/courseware/_sidebar.scss | 2 ++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 93c435a040..8944303a4f 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -55,10 +55,10 @@ $tag-text-color: #5b614f; .sidebar-module { @include clearfix; - padding: 0 24px 24px 0; + padding: 0 26px 24px; margin-bottom: 24px; border-bottom: 1px solid #d3d3d3; - font-size: 0.8em; + font-size: 13px; header { margin-bottom: 14px; @@ -67,16 +67,18 @@ $tag-text-color: #5b614f; h4 { float: left; - font-size: 1.1em; + font-size: 15px; font-weight: bold; } .sidebar-new-post-button, .sidebar-promote-moderator-button { @include button; } + .sidebar-revoke-moderator-button { @include button(simple, gray); } + .sidebar-new-post-button, .sidebar-promote-moderator-button, .sidebar-revoke-moderator-button { display: block; box-sizing: border-box; @@ -91,9 +93,13 @@ $tag-text-color: #5b614f; } } + .sidebar-new-post-button { + margin: 40px 0 20px 0; + } + .sidebar-view-all { float: right; - font-size: 0.9em; + font-size: 13px; line-height: 1.6em; @include standard-discussion-link; } @@ -108,6 +114,10 @@ $tag-text-color: #5b614f; a { @include standard-discussion-link; background: none; + + span { + line-height: 1.3; + } } } diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index bb3826fb61..2a7c5b6f2f 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -67,6 +67,8 @@ section.course-index { } .chapter { + width: 100%; + @include box-sizing(border-box); padding: 11px 14px; @include linear-gradient(top, #f9f9f9, #eee); @include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset); From bbc95cb58941bbeb295b2b380a3bb98ad12f1b96 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 21 Aug 2012 19:25:32 -0400 Subject: [PATCH 16/21] fixed accordion nav glitch --- common/lib/xmodule/xmodule/css/sequence/display.scss | 2 ++ lms/static/sass/course/base/_base.scss | 9 +++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 77e107c25e..90b1ff53a4 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -10,6 +10,7 @@ nav.sequence-nav { position: absolute; top: 0; left: 0; + z-index: 9999; width: 20px; height: 46px; @include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); @@ -21,6 +22,7 @@ nav.sequence-nav { position: absolute; top: 0; right: 0; + z-index: 9999; width: 20px; height: 46px; @include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index d09051f453..26d4fb046d 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -26,12 +26,12 @@ a { } .container { - padding: 1.4em 0 0 0; + padding: 20px 0 0 0; > div { display: table; + table-layout: fixed; width: 100%; - @include box-sizing(border-box); border-radius: 3px; border: 1px solid #ccc; background: #fff; @@ -39,6 +39,11 @@ a { } } + + + + + form { label { display: block; From 441d1955f95ba29801795bc4653241300e80a585 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Wed, 22 Aug 2012 07:34:55 -0400 Subject: [PATCH 17/21] fixed anonymous header bug --- .../sass/course/layout/_courseware_header.scss | 16 +++++++++++++++- lms/templates/navigation.html | 6 +++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index f7eb481e40..7eee051133 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -55,12 +55,16 @@ nav.course-material { } } -header.global { +header.global.slim { border-bottom: 1px solid #bbb; @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); height: 50px; @include linear-gradient(top, #fff, #eee); + .guest .secondary { + display: none; + } + nav { padding-top: 5px; } @@ -124,4 +128,14 @@ header.global { font-weight: bold; } } + + a#signup { + position: relative; + margin-top: 4px; + padding: 6px 12px 8px; + text-transform: none; + font-size: 14px; + font-weight: bold; + letter-spacing: 0; + } } \ No newline at end of file diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index 8858e282e4..47fc93c1b3 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -5,7 +5,11 @@ <%namespace name='static' file='static_content.html'/> <%! from django.core.urlresolvers import reverse %> -
    +%if course: +
    +%else: +
    +%endif