From 985a5323f4c7258735fa17baafa1c5ae0c9b1529 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 5 Jul 2012 09:59:53 -0400 Subject: [PATCH 01/14] Added some hovers fo the caledar --- cms/static/sass/_base.scss | 24 ++++++++++++------------ cms/static/sass/_calendar.scss | 28 ++++++++++++++++++---------- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index b5156c0ec0..f9e9e13a1b 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -104,16 +104,16 @@ textarea { } } -.wip { - outline: 1px solid #f00 !important; - position: relative; +// .wip { +// outline: 1px solid #f00 !important; +// position: relative; - &:after { - content: "WIP"; - font-size: 8px; - padding: 2px; - background: #f00; - color: #fff; - @include position(absolute, 0px 0px 0 0); - } -} +// &:after { +// content: "WIP"; +// font-size: 8px; +// padding: 2px; +// background: #f00; +// color: #fff; +// @include position(absolute, 0px 0px 0 0); +// } +// } diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 3dfda9c3d6..423afc5ab4 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -118,23 +118,24 @@ section.cal { position: relative; > div { + background: $dark-blue; + @include box-shadow(0 0 5px darken($light-blue, 60%)); + @include box-sizing(border-box); display: none; + margin-left: 3%; + padding: 10px; @include position(absolute, 30px 0 0 0); width: 90%; - background: rgba(#000, .9); - padding: 10px; - @include box-sizing(border-box); - @include border-radius(3px); z-index: 99; &:before { + background: $dark-blue; content: " "; display: block; - background: rgba(#000, .8); - width: 10px; height: 10px; @include position(absolute, -5px 0 0 50%); @include transform(rotate(45deg)); + width: 10px; } ul { @@ -143,27 +144,34 @@ section.cal { background: none; input { - width: 100%; @include box-sizing(border-box); - border-color: #000; - padding: 6px; + width: 100%; } select { - width: 100%; @include box-sizing(border-box); + width: 100%; option { font-size: 14px; } } + div { + margin-top: 10px; + } + a { + color: $light-blue; float: right; &:first-child { float: left; } + + &:hover { + color: #fff; + } } } } From 94fccb0017bcc5a5536821e5facce4060b4fe8d2 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 5 Jul 2012 14:26:40 -0400 Subject: [PATCH 02/14] Added fixes for the sidebar, made better base style for inputs and brightened colors a bit --- cms/static/coffee/main.coffee | 50 ++++++++----------------------- cms/static/sass/_base.scss | 25 ++++++++++++---- cms/static/sass/_calendar.scss | 10 ++----- cms/static/sass/_section.scss | 15 ++++++---- cms/static/sass/_unit.scss | 2 +- cms/templates/widgets/header.html | 8 ++--- 6 files changed, 48 insertions(+), 62 deletions(-) diff --git a/cms/static/coffee/main.coffee b/cms/static/coffee/main.coffee index 8f7d7d7323..bd4992930a 100644 --- a/cms/static/coffee/main.coffee +++ b/cms/static/coffee/main.coffee @@ -1,7 +1,13 @@ class @CMS @setHeight = => - windowHeight = $(this).height() - @contentHeight = windowHeight - 29 + windowHeight = $(window).height() + headerHeight = $('body > header').outerHeight() + contentHeight = $('.main-content').height() + @sidebarHeight = if windowHeight > contentHeight then windowHeight - headerHeight else contentHeight - headerHeight + @minContentHeight = windowHeight - headerHeight + + $('.cal').css('height', @sidebarHeight) + $('.main-content').css('min-height', @minContentHeight) @bind = => $('a.module-edit').click -> @@ -13,8 +19,9 @@ class @CMS $.get('/edit_item', {id: id}, (data) => $('#module-html').empty().append(data) CMS.bind() - $('body.content .cal').css('height', @contentHeight) + CMS.setHeight() $('body').addClass('content') + $('body.content .cal ol > li').css('height','auto') $('section.edit-pane').show() new Unit('unit-wrapper', id) ) @@ -31,6 +38,7 @@ $ -> heighest = if $(this).height() > heighest then $(this).height() else heighest $('.cal ol > li').css('height',heighest + 'px') + $('body.content .cal ol > li').css('height','auto') $('.add-new-section').click -> return false @@ -43,40 +51,6 @@ $ -> $(this).parent().parent().hide() return false - # $('html').keypress -> - # $('.wip').css('visibility', 'visible') - - setHeight = -> - windowHeight = $(this).height() - contentHeight = windowHeight - 29 - - $('section.main-content > section').css('min-height', contentHeight) - $('body.content .cal').css('height', contentHeight) - - $('.edit-week').click -> - $('body').addClass('content') - $('body.content .cal').css('height', contentHeight) - $('section.edit-pane').show() - return false - - $('a.week-edit').click -> - $('body').addClass('content') - $('body.content .cal').css('height', contentHeight) - $('section.edit-pane').show() - return false - - $('a.sequence-edit').click -> - $('body').addClass('content') - $('body.content .cal').css('height', contentHeight) - $('section.edit-pane').show() - return false - - $('a.module-edit').click -> - $('body.content .cal').css('height', contentHeight) - - $(document).ready(setHeight) - $(window).bind('resize', setHeight) - $('.video-new a').click -> $('section.edit-pane').show() return false @@ -84,7 +58,7 @@ $ -> $('.problem-new a').click -> $('section.edit-pane').show() return false - + CMS.setHeight() CMS.bind() diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index f9e9e13a1b..e9403dcffc 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -32,11 +32,11 @@ input { button, input[type="submit"], .button { background-color: $orange; - color: #fff; - -webkit-font-smoothing: antialiased; - padding: 8px 10px; border: 0; + color: #fff; font-weight: bold; + padding: 8px 10px; + -webkit-font-smoothing: antialiased; &:hover { background-color: shade($orange, 10%); @@ -45,9 +45,22 @@ button, input[type="submit"], .button { #{$all-text-inputs}, textarea { border: 1px solid $dark-blue; - font: $body-font-size $body-font-family; - padding: 4px 6px; @include box-shadow(inset 0 3px 6px $light-blue); + color: lighten($dark-blue, 30%); + font: $body-font-size $body-font-family; + outline: none; + padding: 4px 6px; + + &:hover { + background: lighten($yellow, 13%); + color: $dark-blue; + } + + &:focus { + @include box-shadow(inset 0 3px 6px $light-blue, 0 0 3px lighten($bright-blue, 10%)); + color: $dark-blue; + background: lighten($yellow, 13%); + } } textarea { @@ -56,7 +69,6 @@ textarea { line-height: lh(); padding: 15px; width: 100%; - } // Extends @@ -99,6 +111,7 @@ textarea { &:hover { background: lighten($yellow, 10%); } + button { padding: 4px 10px; } diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 423afc5ab4..90fd767c68 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -1,7 +1,7 @@ section.cal { @include box-sizing(border-box); - padding: 25px; @include clearfix; + padding: 25px; > header { @include clearfix; @@ -62,8 +62,8 @@ section.cal { @include box-sizing(border-box); float: left; width: flex-grid(3) + ((flex-gutter() * 3) / 4); - background-color: lighten($light-blue, 2%); - + background-color: $light-blue; + overflow-y: hidden; header { border-bottom: 1px solid lighten($dark-blue, 40%); @@ -90,10 +90,6 @@ section.cal { color: #888; border-bottom: 0; font-size: 12px; - - &:hover { - background: #fff; - } } } } diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index f0ac33ba53..dbd4f232b1 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -85,6 +85,8 @@ section#unit-wrapper { } &:hover { + background-color: lighten($yellow, 10%); + a.draggable { opacity: 1; } @@ -136,12 +138,16 @@ section#unit-wrapper { li { border-bottom: 1px solid darken($light-blue, 8%); - background: lighten($light-blue, 2%); + background: $light-blue; &:last-child { border-bottom: 0; } + a { + color: $dark-blue; + } + ul { list-style: none; @@ -153,6 +159,8 @@ section#unit-wrapper { } &:hover { + background-color: lighten($yellow, 10%); + a.draggable { opacity: 1; } @@ -172,13 +180,8 @@ section#unit-wrapper { float: right; opacity: .3; } - - a { - color: #000; - } } } - } } } diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index a21a4bf7a2..b3a6debb57 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -41,7 +41,7 @@ section#unit-wrapper { &.save-update { @extend .button; - margin: -6px -25px -6px 0; + margin: -6px -21px -6px 0; } } } diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 4577ac64d8..bad314560b 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -3,16 +3,16 @@

6.002x circuits and electronics

From f1623ec6057b4f53d8d0e1fe7604ffdfdee10792 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 5 Jul 2012 15:53:52 -0400 Subject: [PATCH 03/14] Added more tweeks to the calendar and unit pages --- cms/static/sass/_calendar.scss | 28 ++++++++++++++--- cms/static/sass/_unit.scss | 45 +++++++++++++++++++--------- cms/templates/widgets/html-edit.html | 2 +- 3 files changed, 56 insertions(+), 19 deletions(-) diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 90fd767c68..f4d97a64ff 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -269,14 +269,34 @@ section.cal { opacity: .4; @include transition(); - > header ul { - display: none; - } - &:hover { opacity: 1; } + > header { + @include transition; + overflow: hidden; + height: 55px; + + ul { + display: block; + + li { + border-left: 0; + margin-left: 0; + margin-bottom: 4px; + + ul { + display: inline; + } + } + } + + &:hover { + height: 167px; + } + } + ol { li { @include box-sizing(border-box); diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index b3a6debb57..0dada82323 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -51,41 +51,61 @@ section#unit-wrapper { padding: 20px; section.meta { + background: $light-blue; + border-bottom: 1px solid lighten($dark-blue, 40%); + padding: 10px 20px; + margin: -20px -20px 10px; + opacity: .7; + @include transition; + + &:hover { + opacity: 1; + padding: 20px; + margin: -20px -20px 10px; + } + section { &.status-settings { float: left; margin-bottom: 10px; color: $dark-blue; + @include clearfix; ul { list-style: none; - border: 1px solid lighten($dark-blue, 40%); - @include inline-block(); + border: 1px solid darken($light-blue, 15%); + @include clearfix(); + float: left; li { - @include inline-block(); - border-right: 1px solid lighten($dark-blue, 40%); - padding: 6px; + border-right: 1px solid darken($light-blue, 15%); + float: left; &:last-child { border-right: 0; } - &.current { - background: #eee; - } - a { color: $dark-blue; + padding: 6px; + display: block; + + &.current { + background: darken($light-blue, 5%); + } + + &:hover { + background-color: lighten($yellow, 13%); + } } } } a.settings { - @include inline-block(); + float: left; margin: 0 20px; padding: 6px; - border: 1px solid lighten($dark-blue, 40%); + border: 1px solid darken($light-blue, 15%); color: $dark-blue; } @@ -110,10 +130,7 @@ section#unit-wrapper { } &.tags { - background: $light-blue; color: lighten($dark-blue, 6%); - padding: 10px; - margin: 0 0 20px; @include clearfix(); clear: both; diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html index f0f63ea905..47a6a55cba 100644 --- a/cms/templates/widgets/html-edit.html +++ b/cms/templates/widgets/html-edit.html @@ -36,7 +36,7 @@
${data}
-
+
Save & Update Cancel
From 4b43e3474f3b02118f216f64203d64b0ea449435 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 5 Jul 2012 17:40:31 -0400 Subject: [PATCH 04/14] More tweeks for visual style for the filter bar and settings --- cms/static/sass/_calendar.scss | 8 ++++ cms/static/sass/_layout.scss | 1 + cms/static/sass/_section.scss | 9 ++++- cms/templates/widgets/module-dropdown.html | 46 +++++++++++----------- 4 files changed, 39 insertions(+), 25 deletions(-) diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index f4d97a64ff..5af7bb5f6f 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -77,10 +77,18 @@ section.cal { text-transform: uppercase; border-bottom: 1px solid lighten($dark-blue, 60%); padding: 6px; + color: $bright-blue; a { color: $bright-blue; display: block; + padding: 6px; + margin: -6px; + + &:hover { + color: darken($bright-blue, 10%); + background: lighten($yellow, 10%); + } } } diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index eb30d55f5c..9ea1060ca4 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -5,6 +5,7 @@ body { > section { display: table; + table-layout: fixed; width: 100%; } diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index dbd4f232b1..e12387e488 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -1,12 +1,17 @@ section#unit-wrapper { section.filters { @include clearfix; - margin-bottom: 10px; - opacity: .4; + background: $light-blue; + border-bottom: 1px solid lighten($dark-blue, 40%); + padding: 5px 20px; + margin: -20px -20px 10px; + opacity: .7; @include transition; &:hover { opacity: 1; + padding: 10px 20px; + margin: -20px -20px 10px; } ul { diff --git a/cms/templates/widgets/module-dropdown.html b/cms/templates/widgets/module-dropdown.html index 6edb142e40..d5115d90c8 100644 --- a/cms/templates/widgets/module-dropdown.html +++ b/cms/templates/widgets/module-dropdown.html @@ -2,27 +2,27 @@ + Add new module -
-
- -
-
+ + + + + + + + + + + + + + + + + + + + + + + From 7aad8f04bbdb230f333b7d11c366b310c6eedf36 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Fri, 6 Jul 2012 10:49:40 -0400 Subject: [PATCH 05/14] Added better styles for draggable --- cms/static/sass/_calendar.scss | 33 +++++++++++++++++++++++++++++++-- cms/static/sass/_unit.scss | 4 ++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 5af7bb5f6f..602b5604b1 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -108,14 +108,43 @@ section.cal { li { border-bottom: 1px solid darken($light-blue, 8%); - padding: 6px; + position: relative; &:hover { - background: lighten($yellow, 10%); + background-color: lighten($yellow, 14%); + + a.draggable { + background-color: lighten($yellow, 14%); + } + } + + &.editable { + padding: 3px 6px; } a { color: lighten($dark-blue, 10%); + display: block; + padding: 6px 35px 6px 6px; + + &:hover { + background-color: lighten($yellow, 10%); + } + + &.draggable { + background-color: $light-blue; + float: none; + height: 100%; + padding: 0; + @include position(absolute, 0px 0px 0 0); + width: 30px; + z-index: 99; + + &:hover { + cursor: move; + background-color: lighten($yellow, 10%); + } + } } &.create-module { diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index 0dada82323..8aa48f5fde 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -107,6 +107,10 @@ section#unit-wrapper { padding: 6px; border: 1px solid darken($light-blue, 15%); color: $dark-blue; + + &:hover { + background-color: lighten($yellow, 13%); + } } select { From cb2a6f9d029043e94e388128bc34f130a70ffc15 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Fri, 6 Jul 2012 11:39:17 -0400 Subject: [PATCH 06/14] Played with the layout a bit and some other small changes --- cms/static/sass/_calendar.scss | 24 +++++++++++++++++++++--- cms/static/sass/_layout.scss | 3 ++- cms/static/sass/_unit.scss | 1 - 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 602b5604b1..59c37e6687 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -65,6 +65,12 @@ section.cal { background-color: $light-blue; overflow-y: hidden; + &:hover { + li.create-module { + opacity: 1; + } + } + header { border-bottom: 1px solid lighten($dark-blue, 40%); @include box-shadow(0 2px 2px $light-blue); @@ -106,6 +112,7 @@ section.cal { list-style: none; margin-bottom: 1px; + li { border-bottom: 1px solid darken($light-blue, 8%); position: relative; @@ -149,6 +156,9 @@ section.cal { &.create-module { position: relative; + opacity: 0; + @include transition(all 3s ease-in-out); + background: darken($light-blue, 2%); > div { background: $dark-blue; @@ -299,21 +309,29 @@ section.cal { body.content section.cal { - width: flex-grid(3) + flex-gutter(); + width: flex-grid(3); float: left; overflow: scroll; @include box-sizing(border-box); opacity: .4; @include transition(); + background: darken($light-blue, 2%); &:hover { opacity: 1; + width: flex-grid(4) + flex-gutter(); + background-color: transparent; + + + section.main-content { + width: flex-grid(8); + opacity: .6; + } } > header { @include transition; overflow: hidden; - height: 55px; + height: 30px; ul { display: block; @@ -330,7 +348,7 @@ section.cal { } &:hover { - height: 167px; + height: 10%; } } diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index 9ea1060ca4..af59ddf6d4 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -73,9 +73,10 @@ body { section.main-content { border-left: 2px solid $dark-blue; @include box-sizing(border-box); - width: flex-grid(9); + width: flex-grid(9) + flex-gutter(); float: left; @include box-shadow( -2px 0 0 darken($light-blue, 3%)); + @include transition(); } } } diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index 8aa48f5fde..d39f7c713e 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -21,7 +21,6 @@ section#unit-wrapper { margin-left: 10px; color: #999; font-size: 12px; - font-style: italic; } } From 0cb4781e4351f0ef757023c703bf56d4096b65db Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Fri, 6 Jul 2012 15:01:59 -0400 Subject: [PATCH 07/14] Rearranged the filter and sort bar and made it consistant --- cms/static/sass/_calendar.scss | 39 +++++----- cms/static/sass/_section.scss | 58 ++++++++++----- cms/templates/widgets/navigation.html | 92 ++++++++++++------------ cms/templates/widgets/sequence-edit.html | 27 ++++--- 4 files changed, 124 insertions(+), 92 deletions(-) diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 59c37e6687..08101ad1b9 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -18,21 +18,32 @@ section.cal { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; - padding: 6px; + padding: 6px 6px 6px 0; font-size: 12px; } ul { @include inline-block; + float: right; li { @include inline-block; - margin-left: 6px; - border-left: 1px solid #ddd; + margin-right: 6px; + border-right: 1px solid #ddd; padding: 0 6px; + &:last-child { + border-right: 0; + margin-right: 0; + padding-right: 0; + } + a { @include inline-block(); + font-size: 12px; + @include inline-block; + margin: 0 6px; + font-style: italic; } ul { @@ -63,7 +74,6 @@ section.cal { float: left; width: flex-grid(3) + ((flex-gutter() * 3) / 4); background-color: $light-blue; - overflow-y: hidden; &:hover { li.create-module { @@ -116,6 +126,7 @@ section.cal { li { border-bottom: 1px solid darken($light-blue, 8%); position: relative; + overflow-y: hidden; &:hover { background-color: lighten($yellow, 14%); @@ -232,7 +243,7 @@ section.cal { } section.new-section { - margin-top: 10px; + margin: 10px 0 40px; @include inline-block(); position: relative; @@ -319,11 +330,11 @@ section.cal { &:hover { opacity: 1; - width: flex-grid(4) + flex-gutter(); + width: flex-grid(5) + flex-gutter(); background-color: transparent; + section.main-content { - width: flex-grid(8); + width: flex-grid(7); opacity: .6; } } @@ -331,25 +342,21 @@ section.cal { > header { @include transition; overflow: hidden; - height: 30px; + + > a { + display: none; + } ul { + float: none; display: block; li { - border-left: 0; - margin-left: 0; - margin-bottom: 4px; - ul { display: inline; } } } - - &:hover { - height: 10%; - } } ol { diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index e12387e488..a0507679b4 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -1,29 +1,45 @@ section#unit-wrapper { section.filters { @include clearfix; - background: $light-blue; - border-bottom: 1px solid lighten($dark-blue, 40%); - padding: 5px 20px; - margin: -20px -20px 10px; - opacity: .7; + opacity: .4; + margin-bottom: 10px; @include transition; &:hover { opacity: 1; - padding: 10px 20px; - margin: -20px -20px 10px; + } + + h2 { + @include inline-block(); + text-transform: uppercase; + letter-spacing: 1px; + font-size: 14px; + padding: 6px 6px 6px 0; + font-size: 12px; } ul { @include clearfix(); list-style: none; - padding: 6px; li { - @include inline-block(); + @include inline-block; + margin-right: 6px; + border-right: 1px solid #ddd; + padding-right: 6px; - &.advanced { + &.search { float: right; + border: 0; + } + + a { + &.more { + font-size: 12px; + @include inline-block; + margin: 0 6px; + font-style: italic; + } } } } @@ -44,11 +60,12 @@ section#unit-wrapper { @include clearfix; h2 { - text-transform: uppercase; - letter-spacing: 1px; - font-size: 12px; - float: left; color: $bright-blue; + float: left; + font-size: 12px; + letter-spacing: 1px; + line-height: 19px; + text-transform: uppercase; } } @@ -149,6 +166,14 @@ section#unit-wrapper { border-bottom: 0; } + &.new-module a { + background-color: darken($light-blue, 2%); + + &:hover { + background-color: lighten($yellow, 10%); + } + } + a { color: $dark-blue; } @@ -158,9 +183,10 @@ section#unit-wrapper { li { padding: 6px; + border-collapse: collapse; &:last-child { - border-bottom: 0; + border-bottom: 1px solid darken($light-blue, 8%); } &:hover { @@ -171,6 +197,7 @@ section#unit-wrapper { } } + &.empty { padding: 12px; @@ -182,7 +209,6 @@ section#unit-wrapper { } a.draggable { - float: right; opacity: .3; } } diff --git a/cms/templates/widgets/navigation.html b/cms/templates/widgets/navigation.html index ea158d305a..587aba6982 100644 --- a/cms/templates/widgets/navigation.html +++ b/cms/templates/widgets/navigation.html @@ -1,35 +1,34 @@
-

Filter content:

+ Timeline view
  • - Sequences - -
      -
    • Hide all
      • -
    • Lectures
      • -
    • Labs
      • -
    • Homeworks
      • -
    • Exams
      • -
    +

    Sort:

    +
  • - Deadlines - -
      -
    • Today
      • -
    • Tomorrow
      • -
    • This week
      • -
    • In 2 weeks
      • -
    • This month
      • -
    +

    Filter:

    + + More
  • - Goals -
      -
    • Hide
      • -
    + Hide goals +
    • +
  • +
@@ -83,6 +82,7 @@ Video 3 handle + <%include file="module-dropdown.html"/> @@ -90,30 +90,30 @@
+ Add New Section -
-
- -
-
+ + + + + + + +
diff --git a/cms/templates/widgets/sequence-edit.html b/cms/templates/widgets/sequence-edit.html index 319e137638..86a1a03aa0 100644 --- a/cms/templates/widgets/sequence-edit.html +++ b/cms/templates/widgets/sequence-edit.html @@ -2,30 +2,29 @@
  • - +

    Sort:

  • - +

    Filter:

    + More
    • -
  • - -
    • - -
  • - Advanced filters -
    • - -
  • - +
  • +
From c8da98743695c66263a0513688b52444d7737bc4 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Fri, 6 Jul 2012 17:12:35 -0400 Subject: [PATCH 08/14] Added new icons for all of the content --- cms/static/img/content-types/chapter.png | Bin 0 -> 135 bytes cms/static/img/content-types/html.png | Bin 0 -> 352 bytes cms/static/img/content-types/lab.png | Bin 0 -> 207 bytes cms/static/img/content-types/problem.png | Bin 0 -> 235 bytes cms/static/img/content-types/problemset.png | Bin 0 -> 222 bytes cms/static/img/content-types/sequential.png | Bin 0 -> 122 bytes cms/static/img/content-types/vertical.png | Bin 0 -> 144 bytes cms/static/img/content-types/video.png | Bin 0 -> 129 bytes .../img/content-types/videosequence.png | Bin 0 -> 176 bytes cms/static/sass/_calendar.scss | 15 +- cms/static/sass/_content-types.scss | 55 ++ cms/static/sass/_layout.scss | 3 +- cms/static/sass/_normalize.scss | 504 ++++++++++++++++++ cms/static/sass/_reset.scss | 229 -------- cms/static/sass/_section.scss | 16 +- cms/static/sass/_unit.scss | 20 +- cms/static/sass/base-style.scss | 4 +- cms/templates/unit.html | 2 +- cms/templates/widgets/navigation.html | 1 + cms/templates/widgets/sequence-edit.html | 2 +- 20 files changed, 610 insertions(+), 241 deletions(-) create mode 100644 cms/static/img/content-types/chapter.png create mode 100644 cms/static/img/content-types/html.png create mode 100644 cms/static/img/content-types/lab.png create mode 100644 cms/static/img/content-types/problem.png create mode 100644 cms/static/img/content-types/problemset.png create mode 100644 cms/static/img/content-types/sequential.png create mode 100644 cms/static/img/content-types/vertical.png create mode 100644 cms/static/img/content-types/video.png create mode 100644 cms/static/img/content-types/videosequence.png create mode 100644 cms/static/sass/_content-types.scss create mode 100644 cms/static/sass/_normalize.scss delete mode 100644 cms/static/sass/_reset.scss diff --git a/cms/static/img/content-types/chapter.png b/cms/static/img/content-types/chapter.png new file mode 100644 index 0000000000000000000000000000000000000000..2903f668d02fd81fafc8f70143c3899176e0835e GIT binary patch literal 135 zcmeAS@N?(olHy`uVBq!ia0vp@KrFz)1|-ie{%Q%N{5)M8Ln>~)J-dc^ literal 0 HcmV?d00001 diff --git a/cms/static/img/content-types/html.png b/cms/static/img/content-types/html.png new file mode 100644 index 0000000000000000000000000000000000000000..566d0a232e780cc39a72413c5e747cbfc6ef6c0b GIT binary patch literal 352 zcmV-m0iXVfP)^7{>8uSeRrnNy&m0OS@;IBx!0SvD5epvP6nTLfObyu##C)Oj$8j7D#*p@-|IE zBa@f$KXpyrojQwI{1(@B?)%iK6BUk&))q?GRu1xuH}s&==;A7#vDWBfH#TvLPr1fA zxUT`vqVCCsFNId~o&sWApwBEOHTxKu zn}>Bci8Au&M`R3X_RNJ9g##pzGYh_b%`UpojFYRG8>ZA8nkmHSr6AXBf9|!p6j7JdoSibFe!VcYcYFkiaSyFPyk=W2K?)zr|e> z_fqlH#ItX41_@+dJVNcnHHJ1G;0}qnqOb7|k}&^-O;keSX+1lWko_s-O_daw@jU6nz=iR zZ!u@i-_*!rxlRQrTa+Nm1YJma=;MXN;;h0N_K49=2N4oHaQR^i!5AwvFhgF{3k8V9 zNbSwdT*Y4D0ika^Q1>U)vBSm{7x7g8(Sq5(x#I8>UD1K~#yJepL;!KdHvb)0Ji_XC l93#o-XyPfN4B;I;$Qw*qQ{cg5E(rht002ovPDHLkV1o5;V>ti- literal 0 HcmV?d00001 diff --git a/cms/static/img/content-types/problemset.png b/cms/static/img/content-types/problemset.png new file mode 100644 index 0000000000000000000000000000000000000000..85576db2ac0273d138a9276fc5354ecc6cae0d05 GIT binary patch literal 222 zcmV<403rX0P)6YMG*H@OBuFle)wgspz@F!Zzt~NWl-R7xmm9$ z>|H3R=IEnf=F!doS5?9Z=w5P3V8{ z*SfqYf8%1gL&iHq{4dO67d&!we#2pP!w(8AD}EP>|D37#!u5}JQ(82(*I1)78&qol`;+09EWTT>t<8 literal 0 HcmV?d00001 diff --git a/cms/static/img/content-types/video.png b/cms/static/img/content-types/video.png new file mode 100644 index 0000000000000000000000000000000000000000..1c9f0176bcd469d73eefe1c097dc5d11a0e24eea GIT binary patch literal 129 zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_DGyH<$B>F!ZzmgaF(`1j{y(@Y zGdzP|D*KII>_M(6W}5BOr0#`3Jk9QSWQwoPN@lAi4bsO&txjt*zt!W?S2OFazbf5% d?}O|@=BBQ|FHZ9-b^^_0@O1TaS?83{1OUxWDLDWD literal 0 HcmV?d00001 diff --git a/cms/static/img/content-types/videosequence.png b/cms/static/img/content-types/videosequence.png new file mode 100644 index 0000000000000000000000000000000000000000..3a6c85843b6dfedc5cacdc00f8632c6880dae125 GIT binary patch literal 176 zcmeAS@N?(olHy`uVBq!ia0vp^B0wy}!3HFwFZ>e#Qstg5jv*Ddu1+@OYA_IB`MlxJ z75y9RI$OW!+Z{A!KNPuUwVs5B;gS>2jB-4*F6$(w3EYp-{?^#aXXAV`JWq7z^F~Ld zJttqbnF}~Cj84;-seD*hU{`K}#6drv!tK9H*LOZ_$iHmO@}liUv-kQlZ2yuvc0cW@ bd&e-t_0akgnvZ4yoxtGf>gTe~DWM4fp8Q1Y literal 0 HcmV?d00001 diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 08101ad1b9..d110a4cadf 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -20,11 +20,13 @@ section.cal { font-size: 14px; padding: 6px 6px 6px 0; font-size: 12px; + margin: 0; } ul { @include inline-block; float: right; + margin: 0; li { @include inline-block; @@ -48,6 +50,7 @@ section.cal { ul { @include inline-block(); + margin: 0; li { @include inline-block(); @@ -66,6 +69,8 @@ section.cal { border-top: 1px solid lighten($dark-blue, 40%); width: 100%; @include box-sizing(border-box); + margin: 0; + padding: 0; > li { border-right: 1px solid lighten($dark-blue, 40%); @@ -94,6 +99,7 @@ section.cal { border-bottom: 1px solid lighten($dark-blue, 60%); padding: 6px; color: $bright-blue; + margin: 0; a { color: $bright-blue; @@ -109,6 +115,9 @@ section.cal { } ul { + margin: 0; + padding: 0; + li { background: #fff; color: #888; @@ -120,8 +129,8 @@ section.cal { ul { list-style: none; - margin-bottom: 1px; - + margin: 0 0 1px 0; + padding: 0; li { border-bottom: 1px solid darken($light-blue, 8%); @@ -133,6 +142,7 @@ section.cal { a.draggable { background-color: lighten($yellow, 14%); + opacity: 1; } } @@ -157,6 +167,7 @@ section.cal { @include position(absolute, 0px 0px 0 0); width: 30px; z-index: 99; + opacity: .3; &:hover { cursor: move; diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/_content-types.scss new file mode 100644 index 0000000000..6df113df78 --- /dev/null +++ b/cms/static/sass/_content-types.scss @@ -0,0 +1,55 @@ +.content-type { + padding-left: 34px; + background-position: 8px center; + background-repeat: no-repeat; +} + +.videosequence a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/videosequence.png'); +} + +.video a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/video.png'); +} + +.problemset a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/problemset.png'); +} + +.problem a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/problem.png'); +} + +.lab a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/lab.png'); +} + +.tab a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/lab.png'); +} + +.html a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/html.png'); +} + +.vertical a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/vertical.png'); +} + +.sequential a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/sequential.png'); +} + +.chapter a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/chapter.png'); +} diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index af59ddf6d4..f4c9f63ea6 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -26,7 +26,7 @@ body { font-size: 14px; text-transform: uppercase; float: left; - margin-right: 15px; + margin: 0 15px 0 0; a { color: #fff; @@ -47,6 +47,7 @@ body { ul { float: left; + margin: 0; &.user-nav { float: right; diff --git a/cms/static/sass/_normalize.scss b/cms/static/sass/_normalize.scss new file mode 100644 index 0000000000..4474dee25a --- /dev/null +++ b/cms/static/sass/_normalize.scss @@ -0,0 +1,504 @@ +/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ + +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying 'audio' without controls + * Remove excess height in iOS5 devices + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ + +[hidden] { + display: none; +} + + +/* ============================================================================= + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE6/7 + */ + +body { + margin: 0; +} + + +/* ============================================================================= + Links + ========================================================================== */ + +/* + * Addresses outline displayed oddly in Chrome + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ + +a:hover, +a:active { + outline: 0; +} + + +/* ============================================================================= + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9 + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7 + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ + +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ + +/* 1 */ + +q { + quotes: none; +} + +/* 2 */ + +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + + +/* ============================================================================= + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE6/7 + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7 + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7 + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + + +/* ============================================================================= + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9 + */ + +svg:not(:root) { + overflow: hidden; +} + + +/* ============================================================================= + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ + +figure { + margin: 0; +} + + +/* ============================================================================= + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE6/7 + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ + +button, +input { + line-height: normal; /* 1 */ +} + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; /* 1 */ + -webkit-appearance: button; /* 2 */ + *overflow: visible; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves readability and alignment in all browsers + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + + +/* ============================================================================= + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss deleted file mode 100644 index bfe619c1b0..0000000000 --- a/cms/static/sass/_reset.scss +++ /dev/null @@ -1,229 +0,0 @@ -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, -del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, -b, i, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin:0; - padding:0; - border:0; - outline:0; - vertical-align:baseline; - background:transparent; -} - -html,body { - font-size: 100%; -} - -// Corrects block display not defined in IE8/9 & FF3 -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { - display: block; -} - -// Corrects inline-block display not defined in IE8/9 & FF3 -audio, canvas, video { - display: inline-block; -} - -// Prevents modern browsers from displaying 'audio' without controls -audio:not([controls]) { - display: none; -} - -// Addresses styling for 'hidden' attribute not present in IE8/9, FF3, S4 -[hidden] { - display: none; -} - -// Prevents iOS text size adjust after orientation change, without disabling user zoom -// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -// Addresses font-family inconsistency between 'textarea' and other form elements. -html, button, input, select, textarea { - font-family: sans-serif; -} - -a { - // Addresses outline displayed oddly in Chrome - &:focus { - outline: thin dotted; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - } - - // Improves readability when focused and also mouse hovered in all browsers - // people.opera.com/patrickl/experiments/keyboard/test - &:hover, &:active { - outline: 0; - } -} - -// Addresses styling not present in IE8/9, S5, Chrome -abbr[title] { - border-bottom: 1px dotted; -} - -// Addresses style set to 'bolder' in FF3+, S4/5, Chrome -b, strong { - font-weight: bold; -} - -blockquote { - margin: 1em 40px; -} - -// Addresses styling not present in S5, Chrome -dfn { - font-style: italic; -} - -// Addresses styling not present in IE8/9 -mark { - background: #ff0; - color: #000; -} - -// Corrects font family set oddly in S4/5, Chrome -// en.wikipedia.org/wiki/User:Davidgothberg/Test59 -pre, code, kbd, samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -// Improves readability of pre-formatted text in all browsers -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -// Addresses quote property not supported in S4 -blockquote, q { - quotes: none; - &:before, &:after { - content: ''; - content: none; - } -} - -small { - font-size: 75%; -} - -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -nav { - ul, ol { - list-style: none; - list-style-image: none; - } -} - -// Removes border when inside 'a' element in IE8/9, FF3 -img { - border: 0; - height: auto; - max-width: 100%; - -ms-interpolation-mode: bicubic; -} - -// Corrects overflow displayed oddly in IE9 -svg:not(:root) { - overflow: hidden; -} - -// Define consistent border, margin, and padding -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -legend { - border: 0; // Corrects color not being inherited in IE8/9 - padding: 0; - white-space: normal; // Corrects text not wrapping in FF3 -} - -button, input, select, textarea { - font-size: 100%; // Corrects font size not being inherited in all browsers - margin: 0; // Addresses margins set differently in FF3+, S5, Chrome - vertical-align: baseline; // Improves appearance and consistency in all browsers -} - -// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet -button, input { - line-height: normal; -} - -button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; // Improves usability and consistency of cursor style between image-type 'input' and others - -webkit-appearance: button; // Corrects inability to style clickable 'input' types in iOS -} - -// Re-set default cursor for disabled elements -button[disabled], input[disabled] { - cursor: default; -} - -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; // Addresses box sizing set to content-box in IE8/9 - padding: 0; //Removes excess padding in IE8/9 -} - -input[type="search"] { - -webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; // Addresses box-sizing set to border-box in S5, Chrome (-moz to future-proof) - box-sizing: content-box; -} - -// Removes inner padding and search cancel button in S5, Chrome on OS X -input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -// Removes inner padding and border in FF3+ -// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; -} - -textarea { - overflow: auto; // Removes default vertical scrollbar in IE8/9 - vertical-align: top; // Improves readability and alignment in all browsers -} - -// Remove most spacing between table cells -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index a0507679b4..ca16a4093e 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -16,11 +16,14 @@ section#unit-wrapper { font-size: 14px; padding: 6px 6px 6px 0; font-size: 12px; + margin: 0; } ul { @include clearfix(); list-style: none; + margin: 0; + padding: 0; li { @include inline-block; @@ -66,6 +69,7 @@ section#unit-wrapper { letter-spacing: 1px; line-height: 19px; text-transform: uppercase; + margin: 0; } } @@ -88,6 +92,8 @@ section#unit-wrapper { ol { list-style: none; + margin: 0; + padding: 0; li { border-bottom: 1px solid lighten($dark-blue, 60%); @@ -98,6 +104,8 @@ section#unit-wrapper { ol { list-style: none; + margin: 0; + padding: 0; li { padding: 6px; @@ -128,13 +136,15 @@ section#unit-wrapper { h3 { font-size: 14px; + margin: 0; } } - ol { border-left: 4px solid #999; border-bottom: 0; + margin: 0; + padding: 0; li { &:last-child { @@ -157,6 +167,8 @@ section#unit-wrapper { ol { list-style: none; + margin: 0; + padding: 0; li { border-bottom: 1px solid darken($light-blue, 8%); @@ -180,6 +192,8 @@ section#unit-wrapper { ul { list-style: none; + margin: 0; + padding: 0; li { padding: 6px; diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index d39f7c713e..d8613be3c2 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -14,13 +14,19 @@ section#unit-wrapper { letter-spacing: 1px; @include inline-block(); color: $bright-blue; + margin: 0; } p { @include inline-block(); - margin-left: 10px; - color: #999; - font-size: 12px; + margin: 0; + + a { + text-indent: -9999px; + @include inline-block(); + width: 1px; + height: 100%; + } } } @@ -71,10 +77,12 @@ section#unit-wrapper { @include clearfix; ul { - list-style: none; border: 1px solid darken($light-blue, 15%); @include clearfix(); float: left; + list-style: none; + margin: 0; + padding: 0; li { border-right: 1px solid darken($light-blue, 15%); @@ -144,10 +152,12 @@ section#unit-wrapper { h2 { font-size: 14px; @include inline-block(); + margin: 0; } p { @include inline-block(); + margin: 0; } } } @@ -212,6 +222,8 @@ section#unit-wrapper { ul { list-style: none; + margin: 0; + padding: 0; li { margin-bottom: 20px; diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 3a6c6e0cea..c85b87f453 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -1,6 +1,6 @@ @import 'bourbon/bourbon'; -@import 'reset'; +@import 'normalize'; -@import 'base', 'layout'; +@import 'base', 'layout', 'content-types'; @import 'calendar'; @import 'section', 'unit'; diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 34e21ca049..cd921d2be2 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -2,7 +2,7 @@

${name}

-

${category}

+

${category}

diff --git a/cms/templates/widgets/navigation.html b/cms/templates/widgets/navigation.html index 587aba6982..07a5747b09 100644 --- a/cms/templates/widgets/navigation.html +++ b/cms/templates/widgets/navigation.html @@ -1,6 +1,7 @@
Timeline view + Multi-Module edit

  • Sort:

    diff --git a/cms/templates/widgets/sequence-edit.html b/cms/templates/widgets/sequence-edit.html index 86a1a03aa0..203afe181f 100644 --- a/cms/templates/widgets/sequence-edit.html +++ b/cms/templates/widgets/sequence-edit.html @@ -35,7 +35,7 @@
    • % for child in module.get_children(): -
    1. +
    2. ${child.name} handle
      3. From dbcad03ddd16c314f174080342db83cc116ec552 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Jul 2012 10:22:55 -0400 Subject: [PATCH 09/14] Added some fixes for some small things adn reset the js --- cms/static/coffee/main.coffee | 50 ++++++++++++++++++++------- cms/static/sass/_base.scss | 7 +++- cms/static/sass/_calendar.scss | 15 ++++---- cms/static/sass/_section.scss | 4 ++- cms/templates/widgets/navigation.html | 7 ++-- 5 files changed, 59 insertions(+), 24 deletions(-) diff --git a/cms/static/coffee/main.coffee b/cms/static/coffee/main.coffee index bd4992930a..8f7d7d7323 100644 --- a/cms/static/coffee/main.coffee +++ b/cms/static/coffee/main.coffee @@ -1,13 +1,7 @@ class @CMS @setHeight = => - windowHeight = $(window).height() - headerHeight = $('body > header').outerHeight() - contentHeight = $('.main-content').height() - @sidebarHeight = if windowHeight > contentHeight then windowHeight - headerHeight else contentHeight - headerHeight - @minContentHeight = windowHeight - headerHeight - - $('.cal').css('height', @sidebarHeight) - $('.main-content').css('min-height', @minContentHeight) + windowHeight = $(this).height() + @contentHeight = windowHeight - 29 @bind = => $('a.module-edit').click -> @@ -19,9 +13,8 @@ class @CMS $.get('/edit_item', {id: id}, (data) => $('#module-html').empty().append(data) CMS.bind() - CMS.setHeight() + $('body.content .cal').css('height', @contentHeight) $('body').addClass('content') - $('body.content .cal ol > li').css('height','auto') $('section.edit-pane').show() new Unit('unit-wrapper', id) ) @@ -38,7 +31,6 @@ $ -> heighest = if $(this).height() > heighest then $(this).height() else heighest $('.cal ol > li').css('height',heighest + 'px') - $('body.content .cal ol > li').css('height','auto') $('.add-new-section').click -> return false @@ -51,6 +43,40 @@ $ -> $(this).parent().parent().hide() return false + # $('html').keypress -> + # $('.wip').css('visibility', 'visible') + + setHeight = -> + windowHeight = $(this).height() + contentHeight = windowHeight - 29 + + $('section.main-content > section').css('min-height', contentHeight) + $('body.content .cal').css('height', contentHeight) + + $('.edit-week').click -> + $('body').addClass('content') + $('body.content .cal').css('height', contentHeight) + $('section.edit-pane').show() + return false + + $('a.week-edit').click -> + $('body').addClass('content') + $('body.content .cal').css('height', contentHeight) + $('section.edit-pane').show() + return false + + $('a.sequence-edit').click -> + $('body').addClass('content') + $('body.content .cal').css('height', contentHeight) + $('section.edit-pane').show() + return false + + $('a.module-edit').click -> + $('body.content .cal').css('height', contentHeight) + + $(document).ready(setHeight) + $(window).bind('resize', setHeight) + $('.video-new a').click -> $('section.edit-pane').show() return false @@ -58,7 +84,7 @@ $ -> $('.problem-new a').click -> $('section.edit-pane').show() return false - + CMS.setHeight() CMS.bind() diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index e9403dcffc..8478a98583 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -104,7 +104,12 @@ textarea { background: url('../img/drag-handle.png') no-repeat center; text-indent: -9999px; display: block; - float: right; + cursor: move; + height: 100%; + padding: 0; + @include position(absolute, 0px 0px 0 0); + width: 30px; + z-index: 99; } .editable { diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index d110a4cadf..53f31b449c 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -27,12 +27,17 @@ section.cal { @include inline-block; float: right; margin: 0; + padding: 0; + + &.actions { + float: left; + } li { @include inline-block; margin-right: 6px; border-right: 1px solid #ddd; - padding: 0 6px; + padding: 0 6px 0 0; &:last-child { border-right: 0; @@ -161,16 +166,10 @@ section.cal { &.draggable { background-color: $light-blue; - float: none; - height: 100%; - padding: 0; - @include position(absolute, 0px 0px 0 0); - width: 30px; - z-index: 99; opacity: .3; + padding: 0; &:hover { - cursor: move; background-color: lighten($yellow, 10%); } } diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index ca16a4093e..fa08e02901 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -109,6 +109,7 @@ section#unit-wrapper { li { padding: 6px; + position: relative; &:last-child { border-bottom: 0; @@ -124,7 +125,7 @@ section#unit-wrapper { a.draggable { float: right; - opacity: .5; + opacity: .4; } &.group { @@ -198,6 +199,7 @@ section#unit-wrapper { li { padding: 6px; border-collapse: collapse; + position: relative; &:last-child { border-bottom: 1px solid darken($light-blue, 8%); diff --git a/cms/templates/widgets/navigation.html b/cms/templates/widgets/navigation.html index 07a5747b09..69e2b005d0 100644 --- a/cms/templates/widgets/navigation.html +++ b/cms/templates/widgets/navigation.html @@ -1,7 +1,10 @@
      - Timeline view - Multi-Module edit + +

      • Sort:

        From 19bd613f6df0456ee365bb31be6b3397e7f19140 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Jul 2012 10:25:52 -0400 Subject: [PATCH 10/14] Readd the wip class --- cms/static/sass/_base.scss | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 8478a98583..07f96afb8a 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -99,8 +99,6 @@ textarea { } .draggable { - width: 7px; - min-height: 14px; background: url('../img/drag-handle.png') no-repeat center; text-indent: -9999px; display: block; @@ -122,16 +120,16 @@ textarea { } } -// .wip { -// outline: 1px solid #f00 !important; -// position: relative; +.wip { + outline: 1px solid #f00 !important; + position: relative; -// &:after { -// content: "WIP"; -// font-size: 8px; -// padding: 2px; -// background: #f00; -// color: #fff; -// @include position(absolute, 0px 0px 0 0); -// } -// } + &:after { + content: "WIP"; + font-size: 8px; + padding: 2px; + background: #f00; + color: #fff; + @include position(absolute, 0px 0px 0 0); + } +} From 93f8f7685ad7c7c6121ea1c2a1059685ae10f318 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Jul 2012 10:37:37 -0400 Subject: [PATCH 11/14] Added more wip and fixed issue with after --- cms/static/sass/_base.scss | 16 ++++++++-------- cms/templates/widgets/navigation.html | 4 ++-- cms/templates/widgets/sequence-edit.html | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 07f96afb8a..fc6c952ba5 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -124,12 +124,12 @@ textarea { outline: 1px solid #f00 !important; position: relative; - &:after { - content: "WIP"; - font-size: 8px; - padding: 2px; - background: #f00; - color: #fff; - @include position(absolute, 0px 0px 0 0); - } + // &:after { + // content: "WIP"; + // font-size: 8px; + // padding: 2px; + // background: #f00; + // color: #fff; + // @include position(absolute, 0px 0px 0 0); + // } } diff --git a/cms/templates/widgets/navigation.html b/cms/templates/widgets/navigation.html index 69e2b005d0..420500ffae 100644 --- a/cms/templates/widgets/navigation.html +++ b/cms/templates/widgets/navigation.html @@ -64,7 +64,7 @@
      %endfor -
    3. +

    4. Course Scratch Pad

      @@ -92,7 +92,7 @@
    - + Add New Section + + Add New Section diff --git a/cms/templates/widgets/sequence-edit.html b/cms/templates/widgets/sequence-edit.html index 203afe181f..fb29bd01ed 100644 --- a/cms/templates/widgets/sequence-edit.html +++ b/cms/templates/widgets/sequence-edit.html @@ -1,5 +1,5 @@
    -
    +

    • Sort:

      @@ -46,7 +46,7 @@
    -
    +
    1. <%include file="new-module.html"/> From 389fd7111a169e30081818a0a63f34b9e3abc1ea Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Jul 2012 11:08:07 -0400 Subject: [PATCH 12/14] Get rid of comments --- cms/static/sass/_base.scss | 13 ++---- cms/templates/widgets/module-dropdown.html | 47 +++++++++++----------- cms/templates/widgets/navigation.html | 46 ++++++++++----------- 3 files changed, 51 insertions(+), 55 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index fc6c952ba5..9cbc4ed048 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -123,13 +123,8 @@ textarea { .wip { outline: 1px solid #f00 !important; position: relative; - - // &:after { - // content: "WIP"; - // font-size: 8px; - // padding: 2px; - // background: #f00; - // color: #fff; - // @include position(absolute, 0px 0px 0 0); - // } +} + +.hidden { + display: none; } diff --git a/cms/templates/widgets/module-dropdown.html b/cms/templates/widgets/module-dropdown.html index d5115d90c8..2fdd327cdd 100644 --- a/cms/templates/widgets/module-dropdown.html +++ b/cms/templates/widgets/module-dropdown.html @@ -2,27 +2,28 @@ + Add new module - - - - - - - - - - - - - - - - - - - - - - - + +
      2. diff --git a/cms/templates/widgets/navigation.html b/cms/templates/widgets/navigation.html index 420500ffae..7d47d8b92f 100644 --- a/cms/templates/widgets/navigation.html +++ b/cms/templates/widgets/navigation.html @@ -94,30 +94,30 @@
      + Add New Section - - - - - - - - - - - - - - - +
    From 8a4d860a1e0a01022fe4318f754fbfd2b10a2351 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Jul 2012 11:26:46 -0400 Subject: [PATCH 13/14] put normalize in vendor folder --- cms/static/sass/base-style.scss | 2 +- cms/static/sass/{ => vendor}/_normalize.scss | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename cms/static/sass/{ => vendor}/_normalize.scss (100%) diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index c85b87f453..6d45331576 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -1,5 +1,5 @@ @import 'bourbon/bourbon'; -@import 'normalize'; +@import 'vendor/normalize'; @import 'base', 'layout', 'content-types'; @import 'calendar'; diff --git a/cms/static/sass/_normalize.scss b/cms/static/sass/vendor/_normalize.scss similarity index 100% rename from cms/static/sass/_normalize.scss rename to cms/static/sass/vendor/_normalize.scss From 6f40b4641539d8fa5154d245e284bb12239bc4ad Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Mon, 9 Jul 2012 12:02:38 -0400 Subject: [PATCH 14/14] Fixed overflow and fixed hover on new module --- cms/static/sass/_calendar.scss | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 53f31b449c..4070766617 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -140,7 +140,7 @@ section.cal { li { border-bottom: 1px solid darken($light-blue, 8%); position: relative; - overflow-y: hidden; + overflow: hidden; &:hover { background-color: lighten($yellow, 14%); @@ -192,16 +192,6 @@ section.cal { width: 90%; z-index: 99; - &:before { - background: $dark-blue; - content: " "; - display: block; - height: 10px; - @include position(absolute, -5px 0 0 50%); - @include transform(rotate(45deg)); - width: 10px; - } - ul { li { border-bottom: 0; @@ -240,12 +230,6 @@ section.cal { } } } - - &:hover { - div { - display: block; - } - } } } } @@ -319,12 +303,6 @@ section.cal { } } } - - &:hover { - section { - display: block; - } - } } }