From 070fb5fb7438e6bb3acadecc60b63591745473a0 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 12 Apr 2012 16:23:16 -0400 Subject: [PATCH 1/4] Added new styles for tutorials --- static/css/application.css | 27 +++++++++++++++++---- templates/sass/base/_base.scss | 2 +- templates/sass/courseware/_courseware.scss | 28 ++++++++++++++++++++-- 3 files changed, 50 insertions(+), 7 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 43c352acf4..4a7c50adc3 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -466,8 +466,7 @@ a:visited { a:link, a:visited { text-decoration: none; } p a, li > a, span > a, a .inline { - border-bottom: 1px solid #bbb; - font-style: italic; } + border-bottom: 1px solid #bbb; } a:hover, a:focus { color: #000; } @@ -2780,9 +2779,29 @@ div.course-wrapper section.course-content ol.vert-mod > li:last-child { div.course-wrapper section.course-content ol.vert-mod > li ul { list-style: disc outside none; padding-left: 1em; } +div.course-wrapper section.course-content section.tutorials h2 { + padding-bottom: 5.663px; + margin-bottom: 22.652px; + border-bottom: 1px solid #e3e3e3; } div.course-wrapper section.course-content section.tutorials ul { - list-style: disc outside none; - margin-left: 22.652px; } + margin: 0; + zoom: 1; } +div.course-wrapper section.course-content section.tutorials ul:before, div.course-wrapper section.course-content section.tutorials ul:after { + content: ""; + display: table; } +div.course-wrapper section.course-content section.tutorials ul:after { + clear: both; } +div.course-wrapper section.course-content section.tutorials ul li { + width: 31.522%; + float: left; + margin-right: 2.717%; + margin-bottom: 22.652px; } +div.course-wrapper section.course-content section.tutorials ul li:nth-child(3n) { + margin-right: 0; } +div.course-wrapper section.course-content section.tutorials ul li:nth-child(3n+1) { + clear: both; } +div.course-wrapper section.course-content section.tutorials ul li a { + font-weight: bold; } div.course-wrapper section.course-content div.staff_info { zoom: 1; white-space: pre-wrap; diff --git a/templates/sass/base/_base.scss b/templates/sass/base/_base.scss index 3f985ea666..3832133f7e 100644 --- a/templates/sass/base/_base.scss +++ b/templates/sass/base/_base.scss @@ -63,7 +63,7 @@ a { p &, li > &, span > &, .inline { border-bottom: 1px solid #bbb; - font-style: italic; + // font-style: italic; } &:hover, &:focus { diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss index 87ac0a6ea7..14a3c8bfba 100644 --- a/templates/sass/courseware/_courseware.scss +++ b/templates/sass/courseware/_courseware.scss @@ -183,9 +183,33 @@ div.course-wrapper { } section.tutorials { + h2 { + padding-bottom: lh(.25); + margin-bottom: lh(); + border-bottom: 1px solid #e3e3e3; + } ul { - list-style: disc outside none; - margin-left: lh(); + margin: 0; + @include clearfix(); + + li { + width: flex-grid(3, 9); + float: left; + margin-right: flex-gutter(9); + margin-bottom: lh(); + + &:nth-child(3n) { + margin-right: 0; + } + + &:nth-child(3n+1) { + clear: both; + } + + a { + font-weight: bold; + } + } } } From 40de329405d797fd4bd8696b05587af2263095c6 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 24 Apr 2012 11:08:52 -0400 Subject: [PATCH 2/4] More styles for tutorial index --- static/css/application.css | 4 +--- templates/sass/courseware/_courseware.scss | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 4a7c50adc3..5e31deab95 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -2780,9 +2780,7 @@ div.course-wrapper section.course-content ol.vert-mod > li ul { list-style: disc outside none; padding-left: 1em; } div.course-wrapper section.course-content section.tutorials h2 { - padding-bottom: 5.663px; - margin-bottom: 22.652px; - border-bottom: 1px solid #e3e3e3; } + margin-bottom: 22.652px; } div.course-wrapper section.course-content section.tutorials ul { margin: 0; zoom: 1; } diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss index 14a3c8bfba..57d1f7e6e2 100644 --- a/templates/sass/courseware/_courseware.scss +++ b/templates/sass/courseware/_courseware.scss @@ -184,10 +184,9 @@ div.course-wrapper { section.tutorials { h2 { - padding-bottom: lh(.25); margin-bottom: lh(); - border-bottom: 1px solid #e3e3e3; } + ul { margin: 0; @include clearfix(); From 97775532f98c605038a070c9f1f7f6005723872f Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 24 Apr 2012 14:06:00 -0400 Subject: [PATCH 3/4] Added better styles for titles and removed some white spaces --- static/css/application.css | 4 +++- templates/sass/courseware/_courseware.scss | 2 +- templates/video.html | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 5e31deab95..c555a685f4 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -134,7 +134,7 @@ input, select { display: table; width: 100%; } -h1.top-header, div.course-wrapper section.course-content h1, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header { +h1.top-header, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header { background: #f3f3f3; border-bottom: 1px solid #e3e3e3; margin: -22.652px -22.652px 22.652px; @@ -2659,6 +2659,8 @@ body.courseware { div.course-wrapper ul, div.course-wrapper ol { list-style: none; } +div.course-wrapper section.course-content h1 { + margin: 0 0 22.652px; } div.course-wrapper section.course-content p { margin-bottom: 22.652px; } div.course-wrapper section.course-content p:empty { diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss index 57d1f7e6e2..2223556854 100644 --- a/templates/sass/courseware/_courseware.scss +++ b/templates/sass/courseware/_courseware.scss @@ -19,7 +19,7 @@ div.course-wrapper { @extend .content; h1 { - @extend .top-header; + margin: 0 0 lh(); } p { diff --git a/templates/video.html b/templates/video.html index d1f192b954..563bfd5129 100644 --- a/templates/video.html +++ b/templates/video.html @@ -1,4 +1,4 @@ -% if name is not UNDEFINED and name != None: +% if name is not UNDEFINED and name != None:

${name}

% endif From 7771c1d1de02170ce149fd56e9c69421b7ea5b94 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Apr 2012 13:28:48 -0400 Subject: [PATCH 4/4] Added styles for headers for tutorials --- static/css/application.css | 18 ++++++++++++++++-- templates/sass/courseware/_courseware.scss | 18 ++++++++++++++++++ templates/sass/courseware/_sequence-nav.scss | 2 ++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index c555a685f4..97f7567ad8 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -134,7 +134,7 @@ input, select { display: table; width: 100%; } -h1.top-header, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header { +h1.top-header, div.course-wrapper section.course-content ol.vert-mod > li header, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info header, div.gradebook-wrapper section.gradebook-content h1, div.question-list-header { background: #f3f3f3; border-bottom: 1px solid #e3e3e3; margin: -22.652px -22.652px 22.652px; @@ -2659,6 +2659,8 @@ body.courseware { div.course-wrapper ul, div.course-wrapper ol { list-style: none; } +div.course-wrapper section.course-content { + overflow: hidden; } div.course-wrapper section.course-content h1 { margin: 0 0 22.652px; } div.course-wrapper section.course-content p { @@ -2774,6 +2776,16 @@ div.course-wrapper section.course-content ol.vert-mod > li { border-bottom: 1px solid #ddd; margin-bottom: 15px; padding: 0 0 15px; } +div.course-wrapper section.course-content ol.vert-mod > li header { + margin-bottom: 0; } +div.course-wrapper section.course-content ol.vert-mod > li header h1 { + margin: 0; } +div.course-wrapper section.course-content ol.vert-mod > li header h2 { + float: right; + margin-right: 0; + margin-top: 8px; + text-align: right; + padding-right: 0; } div.course-wrapper section.course-content ol.vert-mod > li:last-child { border-bottom: none; margin-bottom: 0; @@ -3499,9 +3511,11 @@ nav.sequence-nav { -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 22.652px; - position: relative; } + position: relative; + top: -1px; } nav.sequence-nav ol { border-bottom: 1px solid #e4d080; + border-top: 1px solid #e4d080; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss index 2223556854..8084077247 100644 --- a/templates/sass/courseware/_courseware.scss +++ b/templates/sass/courseware/_courseware.scss @@ -17,6 +17,7 @@ div.course-wrapper { section.course-content { @extend .content; + overflow: hidden; h1 { margin: 0 0 lh(); @@ -169,6 +170,23 @@ div.course-wrapper { margin-bottom: 15px; padding: 0 0 15px; + header { + @extend h1.top-header; + margin-bottom: 0; + + h1 { + margin: 0; + } + + h2 { + float: right; + margin-right: 0; + margin-top: 8px; + text-align: right; + padding-right: 0; + } + } + &:last-child { border-bottom: none; margin-bottom: 0; diff --git a/templates/sass/courseware/_sequence-nav.scss b/templates/sass/courseware/_sequence-nav.scss index b4de051326..77df7e774b 100644 --- a/templates/sass/courseware/_sequence-nav.scss +++ b/templates/sass/courseware/_sequence-nav.scss @@ -3,9 +3,11 @@ nav.sequence-nav { @include box-sizing(border-box); margin-bottom: $body-line-height; position: relative; + top: -1px; ol { border-bottom: 1px solid darken($cream, 20%); + border-top: 1px solid darken($cream, 20%); @include box-sizing(border-box); display: table; padding-right: flex-grid(1, 9);