diff --git a/cms/static/img/plus-icon-white.png b/cms/static/img/plus-icon-white.png new file mode 100644 index 0000000000..d2c5263f93 Binary files /dev/null and b/cms/static/img/plus-icon-white.png differ diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index c1875edb06..36d5faf746 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -180,6 +180,11 @@ code { padding: 20px; } + .details { + margin-bottom: 30px; + font-size: 14px; + } + h4 { padding: 6px 14px; border-bottom: 1px solid #cbd1db; @@ -337,4 +342,14 @@ body.show-wip { content: ''; @extend .spinner-icon; } +} + +.new-button { + @include grey-button; + padding: 20px 0; + text-align: center; + + &.big { + display: block; + } } \ No newline at end of file diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 094b6183dd..6e70766949 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -5,12 +5,7 @@ input.courseware-unit-search-input { } .courseware-overview { - .new-courseware-section-button { - @include grey-button; - display: block; - text-align: center; - padding: 12px 0; - } + } .courseware-section { diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss index c6d775ed12..4a63a8a885 100644 --- a/cms/static/sass/_graphics.scss +++ b/cms/static/sass/_graphics.scss @@ -137,6 +137,10 @@ height: 11px; margin-right: 8px; background: url(../img/plus-icon.png) no-repeat; + + &.white { + background: url(../img/plus-icon-white.png) no-repeat; + } } .plus-icon-small { diff --git a/cms/static/sass/_lms.scss b/cms/static/sass/_lms.scss index 6c5fca36cf..1ddc48edaf 100644 --- a/cms/static/sass/_lms.scss +++ b/cms/static/sass/_lms.scss @@ -1,4 +1,4 @@ -.components li { +.component { font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/_static-pages.scss index 628d537f90..4c7d95f2f8 100644 --- a/cms/static/sass/_static-pages.scss +++ b/cms/static/sass/_static-pages.scss @@ -6,6 +6,65 @@ padding: 12px 0; } + .unit-body { + padding: 30px 40px; + } + + .components > li { + margin: 20px 0; + } + + .component { + border: none; + + &:hover { + border: none; + + .drag-handle { + background: url(../img/drag-handles.png) center no-repeat $lightGrey; + } + } + + .drag-handle { + top: 0; + right: 0; + z-index: 11; + width: 35px; + border: none; + background: url(../img/drag-handles.png) center no-repeat $lightGrey; + + &:hover { + background: url(../img/drag-handles.png) center no-repeat $lightGrey; + } + } + + .component-actions { + top: 26px; + right: 44px; + } + + .edit-button, + .delete-button { + // @include grey-button; + border: none; + background: none; + color: $darkGrey; + } + } + + .component.editing { + .xmodule_display { + display: none; + } + } + + .xmodule_display { + padding: 20px 20px 22px; + font-size: 24px; + font-weight: 300; + background: $lightGrey; + } + .static-page-item { position: relative; margin: 10px 0; diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index 220bec507d..460640a10f 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -54,94 +54,11 @@ position: relative; z-index: 10; margin: 20px 40px; - border: 1px solid #d1ddec; - border-radius: 3px; - background: #fff; - @include transition(none); - - &:hover { - border-color: #6696d7; - - .drag-handle, - .component-actions a { - background-color: $blue; - } - - .drag-handle { - border-color: $blue; - } - } - - &.editing { - border-color: #6696d7; - - .drag-handle, - .component-actions { - display: none; - } - } - - &.component-placeholder { - border-color: #6696d7; - } - - .xmodule_display { - padding: 40px 20px 20px; - } - - .component-actions { - position: absolute; - top: 4px; - right: 4px; - @include 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; - @include 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/white-drag-handles.png) center no-repeat #d1ddec; - cursor: move; - @include transition(all .15s); - } &.new-component-item { padding: 0; - border: 1px solid #8891a1; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); - background-color: #d1dae3; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset); - @include transition(background-color .15s, border-color .15s); + border: none; + border-radius: 0; &.adding { background-color: $blue; @@ -223,8 +140,86 @@ } } + .component { + border: 1px solid #d1ddec; + border-radius: 3px; + background: #fff; + @include transition(none); + + &:hover { + border-color: #6696d7; + + .drag-handle, + .component-actions a { + background-color: $blue; + } + + .drag-handle { + border-color: $blue; + } + } + + &.editing { + border-color: #6696d7; + + .drag-handle, + .component-actions { + display: none; + } + } + + &.component-placeholder { + border-color: #6696d7; + } + + .component-actions { + position: absolute; + top: 4px; + right: 4px; + @include 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; + @include 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/white-drag-handles.png) center no-repeat #d1ddec; + cursor: move; + @include transition(all .15s); + } + } + .xmodule_display { - padding: 10px 20px; + padding: 40px 20px 20px; } .component-editor { diff --git a/cms/static/sass/_users.scss b/cms/static/sass/_users.scss index 7c60ee5c3b..bca9b4f2fb 100644 --- a/cms/static/sass/_users.scss +++ b/cms/static/sass/_users.scss @@ -2,11 +2,6 @@ .user-overview { @extend .window; padding: 30px 40px; - - .details { - margin-bottom: 20px; - font-size: 14px; - } } .new-user-button { diff --git a/cms/templates/edit-tabs.html b/cms/templates/edit-tabs.html index 0c89800c21..41dee15a7a 100644 --- a/cms/templates/edit-tabs.html +++ b/cms/templates/edit-tabs.html @@ -21,6 +21,9 @@

Static Tabs

+
+

Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.

+
    % for id in components: @@ -28,7 +31,7 @@ % endfor
  1. - + New Tab
    2. diff --git a/cms/templates/overview.html b/cms/templates/overview.html index cc0d7e8e32..4a59b7c723 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -75,7 +75,7 @@

    Courseware

    - New Section + New Section % for section in sections:
    diff --git a/cms/templates/unit.html b/cms/templates/unit.html index a94557b760..f2601c7c7e 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -33,7 +33,7 @@
  2. % endfor
  3. - + New Component