diff --git a/cms/static/img/content-types/module.png b/cms/static/img/content-types/module.png new file mode 100644 index 0000000000..643c12d1d9 Binary files /dev/null and b/cms/static/img/content-types/module.png differ diff --git a/cms/static/img/menu.png b/cms/static/img/menu.png new file mode 100644 index 0000000000..7449b34c1c Binary files /dev/null and b/cms/static/img/menu.png differ diff --git a/cms/static/img/noise.png b/cms/static/img/noise.png new file mode 100644 index 0000000000..8fa5168293 Binary files /dev/null and b/cms/static/img/noise.png differ diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 05014dbb7e..cad315f6e4 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -5,7 +5,7 @@ $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida $body-font-size: 14px; $body-line-height: 20px; -$light-blue: #f0f8fa; +$light-blue: #f0f7fd; $dark-blue: #50545c; $bright-blue: #3c8ebf; $orange: #f96e5b; @@ -13,6 +13,14 @@ $yellow: #fff8af; $cream: #F6EFD4; $mit-red: #933; +@mixin hide-text { + background-color: transparent; + border: 0; + color: transparent; + font: 0/0 a; + text-shadow: none; +} + // Base html styles html { height: 100%; @@ -34,14 +42,18 @@ input { button, input[type="submit"], .button { background-color: $orange; - border: 0; + border: 1px solid darken($orange, 15%); + @include border-radius(4px); + @include box-shadow(inset 0 0 0 1px adjust-hue($orange, 20%), 0 1px 0 #fff); color: #fff; font-weight: bold; - padding: 8px 10px; + @include linear-gradient(adjust-hue($orange, 8%), $orange); + padding: 6px 20px; + text-shadow: 0 1px 0 darken($orange, 10%); -webkit-font-smoothing: antialiased; - &:hover { - background-color: shade($orange, 10%); + &:hover, &:focus { + @include box-shadow(inset 0 0 6px 1px adjust-hue($orange, 30%)); } } @@ -122,10 +134,10 @@ textarea { } } -.wip { - outline: 1px solid #f00 !important; - position: relative; -} +// .wip { +// outline: 1px solid #f00 !important; +// position: relative; +// } .hidden { display: none; diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss index 4070766617..35609b2d56 100644 --- a/cms/static/sass/_calendar.scss +++ b/cms/static/sass/_calendar.scss @@ -1,13 +1,15 @@ section.cal { @include box-sizing(border-box); @include clearfix; - padding: 25px; + padding: 20px; > header { + display: none; @include clearfix; margin-bottom: 10px; opacity: .4; @include transition; + text-shadow: 0 1px 0 #fff; &:hover { opacity: 1; @@ -70,12 +72,15 @@ section.cal { ol { list-style: none; @include clearfix; - border-left: 1px solid lighten($dark-blue, 40%); - border-top: 1px solid lighten($dark-blue, 40%); + border: 1px solid lighten( $dark-blue , 30% ); + background: #FFF; width: 100%; @include box-sizing(border-box); margin: 0; padding: 0; + @include box-shadow(0 0 5px lighten($dark-blue, 45%)); + @include border-radius(3px); + overflow: hidden; > li { border-right: 1px solid lighten($dark-blue, 40%); @@ -84,6 +89,7 @@ section.cal { float: left; width: flex-grid(3) + ((flex-gutter() * 3) / 4); background-color: $light-blue; + @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%)); &:hover { li.create-module { @@ -91,6 +97,10 @@ section.cal { } } + &:nth-child(4n) { + border-right: 0; + } + header { border-bottom: 1px solid lighten($dark-blue, 40%); @include box-shadow(0 2px 2px $light-blue); @@ -128,6 +138,7 @@ section.cal { color: #888; border-bottom: 0; font-size: 12px; + @include box-shadow(none); } } } @@ -138,9 +149,11 @@ section.cal { padding: 0; li { - border-bottom: 1px solid darken($light-blue, 8%); - position: relative; + border-bottom: 1px solid darken($light-blue, 6%); + // @include box-shadow(0 1px 0 lighten($light-blue, 4%)); overflow: hidden; + position: relative; + text-shadow: 0 1px 0 #fff; &:hover { background-color: lighten($yellow, 14%); @@ -314,16 +327,13 @@ section.cal { @include box-sizing(border-box); opacity: .4; @include transition(); - background: darken($light-blue, 2%); &:hover { opacity: 1; width: flex-grid(5) + flex-gutter(); - background-color: transparent; + section.main-content { width: flex-grid(7); - opacity: .6; } } @@ -340,6 +350,7 @@ section.cal { display: block; li { + ul { display: inline; } @@ -351,6 +362,7 @@ section.cal { li { @include box-sizing(border-box); width: 100%; + border-right: 0; &.create-module { display: none; diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/_content-types.scss index 587646fb39..00af06d5ad 100644 --- a/cms/static/sass/_content-types.scss +++ b/cms/static/sass/_content-types.scss @@ -53,3 +53,13 @@ @extend .content-type; background-image: url('../img/content-types/chapter.png'); } + +.module a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/module.png'); +} + +.module a:first-child { + @extend .content-type; + background-image: url('/static/img/content-types/module.png'); +} diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss new file mode 100644 index 0000000000..a3e210b558 --- /dev/null +++ b/cms/static/sass/_index.scss @@ -0,0 +1,80 @@ +body.index { + > header { + display: none; + } + + > h1 { + font-weight: 300; + color: lighten($dark-blue, 40%); + text-shadow: 0 1px 0 #fff; + -webkit-font-smoothing: antialiased; + max-width: 600px; + text-align: center; + margin: 80px auto 30px; + } + + section.main-container { + border-right: 3px; + background: #FFF; + max-width: 600px; + margin: 0 auto; + display: block; + @include box-sizing(border-box); + border: 1px solid lighten( $dark-blue , 30% ); + @include border-radius(3px); + overflow: hidden; + @include bounce-in-animation(.8s); + + header { + border-bottom: 1px solid lighten($dark-blue, 50%); + @include linear-gradient(#fff, lighten($dark-blue, 62%)); + @include clearfix(); + @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff); + text-shadow: 0 1px 0 #fff; + + h1 { + font-size: 14px; + padding: 8px 20px; + float: left; + color: $dark-blue; + margin: 0; + } + + a { + float: right; + padding: 8px 20px; + border-left: 1px solid lighten($dark-blue, 50%); + @include box-shadow( inset -1px 0 0 #fff); + font-weight: bold; + font-size: 22px; + line-height: 1; + color: $dark-blue; + } + } + + ol { + list-style: none; + margin: 0; + padding: 0; + + li { + border-bottom: 1px solid lighten($dark-blue, 50%); + + a { + display: block; + padding: 10px 20px; + + &:hover { + color: $dark-blue; + background: lighten($yellow, 10%); + text-shadow: 0 1px 0 #fff; + } + } + + &:last-child { + border-bottom: none; + } + } + } + } +} diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss new file mode 100644 index 0000000000..7661f18980 --- /dev/null +++ b/cms/static/sass/_keyframes.scss @@ -0,0 +1,27 @@ +@mixin bounce-in { + 0% { + opacity: 0; + @include transform(scale(.3)); + } + + 50% { + opacity: 1; + @include transform(scale(1.05)); + } + + 100% { + @include transform(scale(1)); + } +} + +@-moz-keyframes bounce-in { @include bounce-in(); } +@-webkit-keyframes bounce-in { @include bounce-in(); } +@-o-keyframes bounce-in { @include bounce-in(); } +@keyframes bounce-in { @include bounce-in();} + +@mixin bounce-in-animation($duration, $timing: ease-in-out) { + @include animation-name(bounce-in); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); +} diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss index f4c9f63ea6..43308a973c 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -2,6 +2,8 @@ body { @include clearfix(); height: 100%; font: 14px $body-font-family; + background-color: lighten($dark-blue, 62%); + background-image: url('/static/img/noise.png'); > section { display: table; @@ -11,28 +13,53 @@ body { > header { background: $dark-blue; + @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue)); + border-bottom: 1px solid darken($dark-blue, 15%); + @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%)); + @include box-sizing(border-box); color: #fff; display: block; float: none; - padding: 8px 25px; + padding: 0 20px; + text-shadow: 0 -1px 0 darken($dark-blue, 15%); width: 100%; - @include box-sizing(border-box); - -webkit-font-smoothing: antialiased; nav { @include clearfix; - h2 { - font-size: 14px; - text-transform: uppercase; + > a { + @include hide-text; + background: url('/static/img/menu.png') 0 center no-repeat; + border-right: 1px solid darken($dark-blue, 10%); + @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); + display: block; float: left; - margin: 0 15px 0 0; + height: 19px; + padding: 8px 10px 8px 0; + width: 14px; + + &:hover, &:focus { + opacity: .7; + } + } + + h2 { + border-right: 1px solid darken($dark-blue, 10%); + @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); + float: left; + font-size: 14px; + margin: 0; + text-transform: uppercase; + -webkit-font-smoothing: antialiased; a { color: #fff; + padding: 8px 20px; + display: block; &:hover { - color: rgba(#fff, .6); + background-color: rgba(darken($dark-blue, 15%), .5); + color: $yellow; } } } @@ -48,21 +75,35 @@ body { ul { float: left; margin: 0; + padding: 0; + @include clearfix; &.user-nav { float: right; + border-left: 1px solid darken($dark-blue, 10%); } li { - @include inline-block(); + border-right: 1px solid darken($dark-blue, 10%); + float: left; + @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); a { - padding: 8px 10px; + padding: 8px 20px; display: block; - margin: -8px 0; &:hover { - background-color: darken($dark-blue, 15%); + background-color: rgba(darken($dark-blue, 15%), .5); + color: $yellow; + } + + &.new-module { + &:before { + @include inline-block; + content: "+"; + font-weight: bold; + margin-right: 10px; + } } } } @@ -76,8 +117,9 @@ body { @include box-sizing(border-box); width: flex-grid(9) + flex-gutter(); float: left; - @include box-shadow( -2px 0 0 darken($light-blue, 3%)); + @include box-shadow( -2px 0 0 lighten($dark-blue, 55%)); @include transition(); + background: #FFF; } } } diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss index fa08e02901..97818326be 100644 --- a/cms/static/sass/_section.scss +++ b/cms/static/sass/_section.scss @@ -1,6 +1,7 @@ section#unit-wrapper { section.filters { @include clearfix; + display: none; opacity: .4; margin-bottom: 10px; @include transition; @@ -52,22 +53,22 @@ section#unit-wrapper { display: table; border: 1px solid lighten($dark-blue, 40%); width: 100%; + @include border-radius(3px); + @include box-shadow(0 0 4px lighten($dark-blue, 50%)); section { header { background: #fff; padding: 6px; border-bottom: 1px solid lighten($dark-blue, 60%); - border-top: 1px solid lighten($dark-blue, 60%); - margin-top: -1px; @include clearfix; h2 { color: $bright-blue; - float: left; - font-size: 12px; + // float: left; + font-size: 14px; letter-spacing: 1px; - line-height: 19px; + // line-height: 20px; text-transform: uppercase; margin: 0; } @@ -172,7 +173,6 @@ section#unit-wrapper { padding: 0; li { - border-bottom: 1px solid darken($light-blue, 8%); background: $light-blue; &:last-child { @@ -181,6 +181,7 @@ section#unit-wrapper { &.new-module a { background-color: darken($light-blue, 2%); + border-bottom: 1px solid darken($light-blue, 8%); &:hover { background-color: lighten($yellow, 10%); @@ -199,6 +200,7 @@ section#unit-wrapper { li { padding: 6px; border-collapse: collapse; + border-bottom: 1px solid darken($light-blue, 8%); position: relative; &:last-child { diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index d8613be3c2..0ab0d1064d 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -1,19 +1,19 @@ section#unit-wrapper { > header { - border-bottom: 2px solid $dark-blue; + border-bottom: 1px solid lighten($dark-blue, 50%); + @include linear-gradient(#fff, lighten($dark-blue, 62%)); @include clearfix(); - @include box-shadow( 0 2px 0 darken($light-blue, 3%)); - padding: 6px 20px; + @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff); + text-shadow: 0 1px 0 #fff; section { float: left; + padding: 10px 20px; h1 { - font-size: 16px; - text-transform: uppercase; - letter-spacing: 1px; + font-size: 18px; @include inline-block(); - color: $bright-blue; + color: $dark-blue; margin: 0; } @@ -22,32 +22,41 @@ section#unit-wrapper { margin: 0; a { - text-indent: -9999px; @include inline-block(); - width: 1px; - height: 100%; + font-size: 12px; } } } div { - float: right; + @include clearfix; color: #666; + float: right; + padding: 6px 20px; a { - display: block; @include inline-block; - &.cancel { - margin-right: 20px; - font-style: italic; - font-size: 12px; - } + &.cancel { + margin-right: 20px; + font-style: italic; + font-size: 12px; + padding: 6px 0; + } - &.save-update { - @extend .button; - margin: -6px -21px -6px 0; - } + &.save-update { + padding: 6px 20px; + @include border-radius(3px); + border: 1px solid lighten($dark-blue, 40%); + @include box-shadow(inset 0 0 0 1px #fff); + color: $dark-blue; + @include linear-gradient(lighten($dark-blue, 60%), lighten($dark-blue, 55%)); + + &:hover, &:focus { + @include linear-gradient(lighten($dark-blue, 58%), lighten($dark-blue, 53%)); + @include box-shadow(inset 0 0 6px 1px #fff); + } + } } } } diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 35c02a4758..49a51a59fb 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -1,8 +1,9 @@ @import 'bourbon/bourbon'; @import 'vendor/normalize'; +@import 'keyframes'; @import 'base', 'layout', 'content-types'; @import 'calendar'; -@import 'section', 'unit'; +@import 'section', 'unit', 'index'; @import 'module/module-styles.scss'; diff --git a/cms/templates/base.html b/cms/templates/base.html index 96f881421a..dba7df95b9 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -15,7 +15,7 @@ - + <%include file="widgets/header.html"/> <%include file="courseware_vendor_js.html"/> diff --git a/cms/templates/course_index.html b/cms/templates/course_index.html index 92b5cc296c..e490ad7817 100644 --- a/cms/templates/course_index.html +++ b/cms/templates/course_index.html @@ -1,5 +1,6 @@ <%inherit file="base.html" /> <%block name="title">Course Manager +<%include file="widgets/header.html"/> <%block name="content">
diff --git a/cms/templates/index.html b/cms/templates/index.html index 2998cb8bd6..6e3cb648ae 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -1,8 +1,16 @@ <%inherit file="base.html" /> +<%block name="bodyclass">index <%block name="title">Courses <%block name="content"> +

edX Course Management

+
+
+

Courses

+ + +
+
    %for course, url in courses:
  1. ${course}
    2. diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index c1c05671fa..c0b9f9e3af 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -1,13 +1,14 @@ <%! from django.core.urlresolvers import reverse %>