From c4e8673db007e7327938c7956a300e87c2bbbefb Mon Sep 17 00:00:00 2001 From: Marco Morales Date: Wed, 12 Nov 2014 11:06:27 -0500 Subject: [PATCH] creation of a courseware preview menu to contain staff view toggle. --- lms/static/sass/base/_base.scss | 3 ++ lms/static/sass/base/_variables.scss | 6 ++- lms/static/sass/course-rtl.scss.mako | 1 + lms/static/sass/course.scss.mako | 1 + lms/static/sass/course/base/_base.scss | 10 +++- lms/static/sass/course/base/_extends.scss | 11 ++++ .../course/layout/_courseware_header.scss | 22 ++++---- .../course/layout/_courseware_preview.scss | 27 ++++++++++ .../course/layout/_courseware_subnav.scss | 52 ------------------- lms/static/sass/ie.scss | 2 +- .../courseware/course_navigation.html | 30 ++++++++++- 11 files changed, 94 insertions(+), 71 deletions(-) create mode 100644 lms/static/sass/course/layout/_courseware_preview.scss delete mode 100644 lms/static/sass/course/layout/_courseware_subnav.scss diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 6d279a8d47..d9ca9b74db 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -1,3 +1,6 @@ +// lms - base +// ==================== + // html { // overflow-y: scroll; // } diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 2d73b00afc..2e2f407a8b 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -360,12 +360,14 @@ $dashboard-course-cover-border: $light-gray; // MISC: course assets $content-wrapper-bg: $white; -$course-bg-color: #d6d6d6; -$course-bg-image: url(../images/bg-texture.png); +$course-bg-color: #f2f2f2; $account-content-wrapper-bg: shade($body-bg, 2%); $course-profile-bg: rgb(245,245,245); $course-header-bg: rgba(255,255,255, 0.93); +// MISC: course background texture +//$course-bg-image: url(../images/bg-texture.png); + // MISC: borders $border-color-1: rgb(190,190,190); $border-color-2: rgb(200,200,200); diff --git a/lms/static/sass/course-rtl.scss.mako b/lms/static/sass/course-rtl.scss.mako index e9d4d2930a..fdef27cbe2 100644 --- a/lms/static/sass/course-rtl.scss.mako +++ b/lms/static/sass/course-rtl.scss.mako @@ -32,6 +32,7 @@ // course - base @import 'course/layout/courseware_header'; +@import 'course/layout/courseware_preview'; @import 'course/layout/footer'; @import 'course/base/mixins'; @import 'course/base/base'; diff --git a/lms/static/sass/course.scss.mako b/lms/static/sass/course.scss.mako index 0fc53f0adf..7fb09e2677 100644 --- a/lms/static/sass/course.scss.mako +++ b/lms/static/sass/course.scss.mako @@ -31,6 +31,7 @@ // course - base @import 'course/layout/courseware_header'; +@import 'course/layout/courseware_preview'; @import 'course/layout/footer'; @import 'course/base/mixins'; @import 'course/base/base'; diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index cf8e9c4793..7b02e4f2a7 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,8 +1,13 @@ +// lms - course - base +// ==================== + body { min-width: 980px; min-height: 100%; - background-image: $course-bg-image; background-color: $course-bg-color; + + //for background texture: + //background-image: $course-bg-image; } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { @@ -27,7 +32,7 @@ a { } .container { - padding: 20px 0 0 0; + padding: 0; > div { display: table; @@ -53,6 +58,7 @@ form.choicegroup { } } + textarea, input[type="text"], input[type="email"], diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index c6652f94d6..cac78034be 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -1,3 +1,14 @@ +// lms - course - extends +// ==================== + +// lms inner wrapper +%inner-wrapper { + margin: 0 auto; + max-width: 1180px; + width: flex-grid(12); +} + +// Older Course Extends - to review/remove with LMS cleanup h1.top-header { border-bottom: 1px solid $border-color-2; @include text-align(left); diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 4b5fcc3e67..3e1e686802 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,22 +1,20 @@ -nav.course-material { +.wrapper-course-material { @include clearfix(); @include box-sizing(border-box); border-bottom: none; - margin: 0px auto 0px; - padding: 0px; + margin: 0 auto 0; + padding: 0; width: 100%; - .inner-wrapper { - margin: 0 auto; - max-width: 1200px; - width: flex-grid(12); + .course-material{ + @extend %inner-wrapper; } ol.course-tabs { @include border-top-radius(4px); @include clearfix(); - padding: 28px 0 10px 0; @include margin-left(10px); + padding: ($baseline*0.75) 0 ($baseline*0.75) 0; li { @include float(left); @@ -30,7 +28,7 @@ nav.course-material { } &.prominent + li { - padding-left: 15px; + padding-left: ($baseline*0.75); border-left: 1px solid #333; } @@ -39,7 +37,7 @@ nav.course-material { color: #555; display: block; text-align: center; - padding: 10px 13px 12px; + padding: ($baseline/2) 13px 12px; font-size: 14px; font-weight: bold; text-decoration: none; @@ -74,7 +72,7 @@ nav.course-material { header.global.slim { box-shadow: 0 1px 2px $shadow-l1; height: auto; - padding: 5px 0 10px 0; + padding: ($baseline/4) 0 ($baseline/2) 0; border-bottom: 1px solid $outer-border-color; background: $header-bg; @@ -119,7 +117,7 @@ header.global.slim { } h1.logo { - margin: 0 10px 0 13px; + margin: 0 ($baseline/2) 0 0; @include padding-right(20px); &:before { diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss new file mode 100644 index 0000000000..1b7cc6c531 --- /dev/null +++ b/lms/static/sass/course/layout/_courseware_preview.scss @@ -0,0 +1,27 @@ +.wrapper-preview-menu { + @include clearfix(); + @include box-sizing(border-box); + margin: 0 auto 0; + padding: ($baseline*0.75); + width: 100%; + background-color: $gray-l3; + + .preview-menu { + @extend %inner-wrapper; + } + + .preview-actions { + display: inline-block; + + .action-preview { + display: inline-block; + + .action-preview-label { + display: inline-block; + margin-right: ($baseline/2); + margin-bottom: 0; + vertical-align: middle; + } + } + } +} diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss deleted file mode 100644 index 38e088d66a..0000000000 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ /dev/null @@ -1,52 +0,0 @@ -nav.course-material { - @include clearfix(); - @include box-sizing(border-box); - background: none; - margin: 0px auto 0px; - padding: 0px; - width: 100%; - - .inner-wrapper { - margin: 0 auto; - max-width: 1200px; - width: flex-grid(12); - } - - ol.course-tabs { - @include border-top-radius(4px); - @include clearfix(); - padding: 10px 0 0 0; - - li { - @include float(left); - list-style: none; - - a { - color: darken($lighter-base-font-color, 20%); - display: block; - text-align: center; - padding: 8px 13px 12px; - font-size: 14px; - font-weight: 400; - text-decoration: none; - text-shadow: 0 1px rgb(255,255,255); - - &:hover, &:focus { - color: $base-font-color; - } - - &.active { - color: $blue; - } - } - } - } -} - -.course-content { - margin-top: ($baseline*1.5); - - .courseware { - min-height: 300px; - } -} diff --git a/lms/static/sass/ie.scss b/lms/static/sass/ie.scss index 3654d3957d..b4acb8dfa1 100644 --- a/lms/static/sass/ie.scss +++ b/lms/static/sass/ie.scss @@ -139,7 +139,7 @@ } // active navigation - nav.course-material ol.course-tabs li a.active, nav.course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.course-material ol.course-tabs li a.seq_video.active { + nav.wrapper-course-material ol.course-tabs li a.active, nav.wrapper-course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.wrapper-course-material ol.course-tabs li a.seq_video.active { background-color: #333; background-color: rgba(0, 0, 0, .4); } diff --git a/lms/templates/courseware/course_navigation.html b/lms/templates/courseware/course_navigation.html index 248ef0f45d..c60e6673b5 100644 --- a/lms/templates/courseware/course_navigation.html +++ b/lms/templates/courseware/course_navigation.html @@ -23,9 +23,35 @@ def url_class(is_active): user_is_enrolled = user.is_authenticated() and CourseEnrollment.is_enrolled(user, course.id) %> +% if show_preview_menu: + +% endif + % if disable_tabs is UNDEFINED or not disable_tabs: -