From 423dbd17b52b94cfb5c55412c660c04255315757 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 2 Oct 2012 10:32:04 -0400 Subject: [PATCH 1/2] new unit publish settings --- cms/static/sass/_base.scss | 4 +- cms/static/sass/_subsection.scss | 8 +- cms/static/sass/_unit.scss | 659 ++++++++++++++++--------------- cms/templates/unit.html | 20 +- 4 files changed, 349 insertions(+), 342 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index e6568b14d9..abacff87c3 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -183,8 +183,8 @@ label { } .row { - margin-bottom: 15px; - padding-bottom: 15px; + margin-bottom: 10px; + padding-bottom: 10px; border-bottom: 1px solid #cbd1db; } } diff --git a/cms/static/sass/_subsection.scss b/cms/static/sass/_subsection.scss index 1550c3daf4..b45d7d4af6 100644 --- a/cms/static/sass/_subsection.scss +++ b/cms/static/sass/_subsection.scss @@ -83,7 +83,7 @@ label { display: inline-block !important; margin-right: 10px; - line-height: 31px; + line-height: 21px; } a { @@ -100,6 +100,10 @@ .large-toggle { width: 41px; background: url(../img/large-toggles.png) no-repeat; - background-position: 0 -5px; + background-position: 0 -50px; + + .hidden { + background-position: 0 -5px; + } } } diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index 79f19e68fa..e563d93a4e 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -1,383 +1,388 @@ .unit .main-wrapper, .subsection .main-wrapper { - margin: 40px; + margin: 40px; } .main-column { - float: left; - width: 70%; + float: left; + width: 70%; } .unit-body.published { - .components > li { - border: none; + .components > li { + border: none; - .rendered-component { - padding: 0 20px; - } + .rendered-component { + padding: 0 20px; } + } } .unit-body { - .breadcrumbs { - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #cbd1db; - background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5; - box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; - @include clearfix; + .breadcrumbs { + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #cbd1db; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5; + box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; + @include clearfix; - li { - float: left; - } - - a, - .current-page { - display: block; - padding: 15px 35px 15px 30px; - font-size: 14px; - background: url(../img/breadcrumb-arrow.png) no-repeat right center; - } + li { + float: left; } - h2 { - margin: 30px 40px; - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - text-transform: uppercase; + a, + .current-page { + display: block; + padding: 15px 35px 15px 30px; + font-size: 14px; + background: url(../img/breadcrumb-arrow.png) no-repeat right center; } + } - .components { - > li { - position: relative; - z-index: 10; - margin: 20px 40px; - border: 1px solid #d1ddec; - border-radius: 3px; - background: #fff; - -webkit-transition: border-color .15s; + h2 { + margin: 30px 40px; + color: #646464; + font-size: 19px; + font-weight: 300; + letter-spacing: 1px; + text-transform: uppercase; + } - &:hover { - border-color: #6696d7; + .components { + > li { + position: relative; + z-index: 10; + margin: 20px 40px; + border: 1px solid #d1ddec; + border-radius: 3px; + background: #fff; + -webkit-transition: border-color .15s; - .drag-handle, - .component-actions a { - background-color: $blue; - } + &:hover { + border-color: #6696d7; - .drag-handle { - border-color: $blue; - } - } - - &.editing { - border-color: #6696d7; - - &:hover { - .drag-handle, - .component-actions a { - background-color: $blue; - } - - .drag-handle { - border-color: $blue; - } - } - } - - .rendered-component { - padding: 40px 20px 20px; - } - - .component-actions { - position: absolute; - top: 4px; - right: 4px; - -webkit-transition: opacity .15s; - } - - .edit-button, - .delete-button { - float: left; - padding: 3px 10px 4px; - margin-left: 3px; - border: 1px solid #fff; - border-radius: 3px; - // background: $blue; - background: #d1ddec; - font-size: 12px; - color: #fff; - -webkit-transition: all .15s; - - &:hover { - background-color: $blue; - color: #fff; - } - - .edit-icon, - .delete-icon { - margin-right: 4px; - } - } - - .drag-handle { - position: absolute; - display: block; - top: -1px; - right: -16px; - z-index: -1; - width: 15px; - height: 100%; - border-radius: 0 3px 3px 0; - border: 1px solid #d1ddec; - background: url(../img/drag-handles.png) center no-repeat #d1ddec; - cursor: move; - -webkit-transition: all .15s; - } - - &.new-component-item { - padding: 0; - border: 1px solid #8891a1; - border-radius: 3px; - background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3; - box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; - -webkit-transition: background-color .15s, border-color .15s; - - &.adding { - background-color: $blue; - border-color: #437fbf; - } - - .new-component-button { - display: block; - padding: 20px; - text-align: center; - color: #6d788b; - } - - h5 { - margin-bottom: 8px; - color: #fff; - font-weight: 700; - } - - .rendered-component { - display: none; - background: #fff; - border-radius: 3px 3px 0 0; - } - - .new-component-type, .new-component-template { - @include clearfix; - - a { - position: relative; - float: left; - width: 100px; - height: 100px; - margin-right: 10px; - margin-bottom: 10px; - border-radius: 8px; - font-size: 13px; - line-height: 14px; - color: #fff; - text-align: center; - box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset; - -webkit-transition: background-color .15s; - - &:hover { - background-color: rgba(255, 255, 255, .2); - } - - .name { - position: absolute; - bottom: 5px; - left: 0; - width: 100%; - padding: 10px; - box-sizing: border-box; - } - } - } - - .new-component-template { - a { - height: 60px; - } - } - - .new-component, - .new-component-templates { - display: none; - padding: 20px; - - .cancel-button { - @include blue-button; - border-color: #30649c; - } - } - } + .drag-handle, + .component-actions a { + background-color: $blue; } - } - .component-editor { - @include edit-box; - display: none; - padding: 20px; - border-radius: 0 0 3px 3px; - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue; + .drag-handle { + border-color: $blue; + } + } - .module-editor { - background: white; + &.editing { + border-color: #6696d7; + + &:hover { + .drag-handle, + .component-actions a { + background-color: $blue; + } + + .drag-handle { + border-color: $blue; + } + } + } + + .rendered-component { + padding: 40px 20px 20px; + } + + .component-actions { + position: absolute; + top: 4px; + right: 4px; + -webkit-transition: opacity .15s; + } + + .edit-button, + .delete-button { + float: left; + padding: 3px 10px 4px; + margin-left: 3px; + border: 1px solid #fff; + border-radius: 3px; + background: #d1ddec; + font-size: 12px; + color: #fff; + -webkit-transition: all .15s; + + &:hover { + background-color: $blue; + color: #fff; + } + + .edit-icon, + .delete-icon { + margin-right: 4px; + } + } + + .drag-handle { + position: absolute; + display: block; + top: -1px; + right: -16px; + z-index: -1; + width: 15px; + height: 100%; + border-radius: 0 3px 3px 0; + border: 1px solid #d1ddec; + background: url(../img/drag-handles.png) center no-repeat #d1ddec; + cursor: move; + -webkit-transition: all .15s; + } + + &.new-component-item { + padding: 0; + border: 1px solid #8891a1; + border-radius: 3px; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3; + box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; + -webkit-transition: background-color .15s, border-color .15s; + + &.adding { + background-color: $blue; + border-color: #437fbf; + } + + .new-component-button { + display: block; + padding: 20px; + text-align: center; + color: #6d788b; } h5 { - margin-bottom: 8px; + margin-bottom: 8px; + color: #fff; + font-weight: 700; + } + + .rendered-component { + display: none; + background: #fff; + border-radius: 3px 3px 0 0; + } + + .new-component-type, .new-component-template { + @include clearfix; + + a { + position: relative; + float: left; + width: 100px; + height: 100px; + margin-right: 10px; + margin-bottom: 10px; + border-radius: 8px; + font-size: 13px; + line-height: 14px; color: #fff; - font-weight: 700; + text-align: center; + box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset; + -webkit-transition: background-color .15s; + + &:hover { + background-color: rgba(255, 255, 255, .2); + } + + .name { + position: absolute; + bottom: 5px; + left: 0; + width: 100%; + padding: 10px; + box-sizing: border-box; + } + } } - .save-button { - margin-right: 8px; - } - } -} - -.unit-properties { - .window-contents { - padding: 10px 20px; - } - - .unit-actions { - border-bottom: none; - padding-bottom: 0; - } - - .published-alert { - padding: 10px; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - font-size: 14px; - line-height: 1.4; - - div { - margin-top: 15px; - } - } - - .status { - display: none; - } - - .visibility-options .option { - margin-right: 10px; - padding: 3px 13px 6px; - border-radius: 3px; - background: #edf1f5; - - &.checked { - background: #d1dae3; + .new-component-template { + a { + height: 60px; + } } - input[type="radio"] { - margin-right: 7px; + .new-component, + .new-component-templates { + display: none; + padding: 20px; + + .cancel-button { + @include blue-button; + border-color: #30649c; + } } + } + } + } + + .component-editor { + @include edit-box; + display: none; + padding: 20px; + border-radius: 0 0 3px 3px; + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue; + + .module-editor { + background: white; + } + + h5 { + margin-bottom: 8px; + color: #fff; + font-weight: 700; } .save-button { - @include white-button; - margin-top: 10px; + margin-right: 8px; + } + } +} + +.unit-properties { + .window-contents { + padding: 10px 20px; + } + + .unit-actions { + border-bottom: none; + padding-bottom: 0; + } + + .published-alert { + padding: 10px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + font-size: 14px; + line-height: 1.4; + + div { + margin-top: 15px; + } + } + + .visibility-options .option { + margin-right: 10px; + padding: 3px 13px 6px; + border-radius: 3px; + background: #edf1f5; + + &.checked { + background: #d1dae3; } - .preview-button { - @include white-button; - margin-top: 10px; + input[type="radio"] { + margin-right: 7px; } + } - .publish-button { - @include orange-button; - margin-top: 10px; - } + .status { + font-size: 12px; - .release-button { - @include blue-button; + strong { + font-weight: 700; } + } + + .preview-button { + @include white-button; + margin-bottom: 10px; + } + + .publish-button { + @include orange-button; + } + + .save-button { + @include blue-button; + } + + .save-button, + .preview-button, + .publish-button { + font-size: 11px; + margin-top: 10px; + padding: 6px 15px 8px; + } } .unit-history { - &.collapsed { - h4 { - border-bottom: none; - border-radius: 3px; - } - - .window-contents { - display: none; - } + &.collapsed { + h4 { + border-bottom: none; + border-radius: 3px; } - ol { - border: 1px solid #ced2db; - - li { - display: block; - padding: 6px 8px 8px 10px; - background: #edf1f5; - font-size: 12px; - - &:hover { - background: #fffcf1; - - .item-actions { - display: block; - } - } - - &.checked { - background: #d1dae3; - } - - .item-actions { - display: none; - } - - input[type="radio"] { - margin-right: 7px; - } - } + .window-contents { + display: none; } + } + + ol { + border: 1px solid #ced2db; + + li { + display: block; + padding: 6px 8px 8px 10px; + background: #edf1f5; + font-size: 12px; + + &:hover { + background: #fffcf1; + + .item-actions { + display: block; + } + } + + &.checked { + background: #d1dae3; + } + + .item-actions { + display: none; + } + + input[type="radio"] { + margin-right: 7px; + } + } + } } .unit-location { - .url { - width: 100%; - margin-bottom: 10px; - box-shadow: none; + .url { + width: 100%; + margin-bottom: 10px; + box-shadow: none; + } + + .window-contents > ol { + @include tree-view; + + ol { + .section-item { + padding-left: 30px; + } + + .new-unit-item { + margin-left: 30px; + } } - .window-contents > ol { - @include tree-view; + ol ol { + .section-item { + padding-left: 50px; + } - ol { - .section-item { - padding-left: 30px; - } - - .new-unit-item { - margin-left: 30px; - } - } - - ol ol { - .section-item { - padding-left: 50px; - } - - .new-unit-item { - margin-left: 50px; - } - } + .new-unit-item { + margin-left: 50px; + } } + } } diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 7b52424395..ace464468f 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -49,7 +49,7 @@ -
+

Unit Properties

@@ -61,21 +61,19 @@ Remove due date
-
- - hiddenshown -
-
- +
+
+
+

This unit is scheduled to be released to students on 10/12/2012 with the subsection "Administrivia and Circuit Elements."

+
- Save Draft + Save Preview - Release
From 76559af8f130c8d6f2c4b848354a845164e76133 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 2 Oct 2012 10:50:23 -0400 Subject: [PATCH 2/2] added wip tag to unit settings --- cms/templates/unit.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/templates/unit.html b/cms/templates/unit.html index ace464468f..f7264d25a9 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -50,7 +50,7 @@
-
+

Unit Properties