From d53e4bd38fc1ca1ef3cd2afcd05a0080b661cfcd Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 12 Jul 2012 14:28:13 -0400 Subject: [PATCH] Added more styles includeing the index page more color changes and header styles --- cms/static/img/content-types/module.png | Bin 0 -> 1138 bytes cms/static/sass/_base.scss | 12 ++-- cms/static/sass/_content-types.scss | 5 ++ cms/static/sass/_index.scss | 80 ++++++++++++++++++++++++ cms/static/sass/_keyframes.scss | 27 ++++++++ cms/static/sass/_layout.scss | 4 +- cms/static/sass/_section.scss | 3 + cms/static/sass/_unit.scss | 65 ++++++++++++------- cms/static/sass/base-style.scss | 3 +- cms/templates/base.html | 2 +- cms/templates/course_index.html | 1 + cms/templates/index.html | 8 +++ 12 files changed, 180 insertions(+), 30 deletions(-) create mode 100644 cms/static/img/content-types/module.png create mode 100644 cms/static/sass/_index.scss create mode 100644 cms/static/sass/_keyframes.scss diff --git a/cms/static/img/content-types/module.png b/cms/static/img/content-types/module.png new file mode 100644 index 0000000000000000000000000000000000000000..643c12d1d99d9efb94d6e7f6149a0013444bd7ab GIT binary patch literal 1138 zcmbVMO-$2J9IpbyAWKjWiXrh)f?r{4yRF?;8Ek6@EU>YRMdppJeXt7suzj#WydWeZ zTueN8F-D^|6B94SL?a|}&>JQuenc(!K76 zlMMtxxRZTi7OzL}(|E{*-}CJkm+{h!5_vRajG~fcK_aFY1qhOwGzPO!Ql_uGft>_V zQ&e+#lur%tvY~k;N5@;%OpGRo&hD})$>R`#0vuEI2)XfmnFOj5A&1!%oiYVjRQqNu zI5d;a$ur|}SRuQ+Kxdi91R6vVC~FhC&6gwOHZPC&j+i3Bwh9`LkQJx$sSFSd3j)^b z_sBHE0FLuA0hZ&K4&b91A4TJv^DqIP<#=BZ>|7+aW+|h5R_xiag-;Q(h>*!sRH;<* zmi%7B8l#wSIP7rvd>*Xfv8Qz;l|8!MR%H;OEnBLIR6_?2qf{^^QG~>vRzlFsRBD%4 zw|5eSQ%02~lVZFyrD;xF+uAnD!ar{8scq+`O-N;-ZA@A+uE%Iw6^wJYzad8vd&3V} zDlUpNAsX_e26dDaBP9OfRaAwi{UMyiV1N$#XfDJsAv)ym3C1~&j)yoV?5lF@g%xNq z7UF^l!5?QBCc%W+KrGJrX)(wK5($B=Vw1X!BwdD8yDGN3gBAD1@`42=WLP=Fn5cF@ zrf49;E*d5fhB$CGCCRGp2+lbLs>CZoOPzvBk7a0JJHx!XhX-`{Uy)a^%Kv1I!p=}m zd;HZdRT1t%XS>_{_^>-ZP{%W4;o*380kz@5x|bAVx$>vN=a=8tYFsW?mn-+9X~EsR zP}>pRJibu(b~Sc&7 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 419f1df9d8..43308a973c 100644 --- a/cms/static/sass/_layout.scss +++ b/cms/static/sass/_layout.scss @@ -20,7 +20,7 @@ body { color: #fff; display: block; float: none; - padding: 0 25px; + padding: 0 20px; text-shadow: 0 -1px 0 darken($dark-blue, 15%); width: 100%; @@ -117,7 +117,7 @@ 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..7558a2193b 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,6 +53,8 @@ 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 { diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index d8613be3c2..8c42ba9d08 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,55 @@ 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: 0 20px; a { - display: block; @include inline-block; + padding: 13px 20px; - &.cancel { - margin-right: 20px; - font-style: italic; - font-size: 12px; - } + &.cancel { + margin-right: 20px; + font-style: italic; + font-size: 12px; + } - &.save-update { - @extend .button; - margin: -6px -21px -6px 0; - } + &.save-update { + border-left: 1px solid lighten($dark-blue, 40%); + border-right: 1px solid lighten($dark-blue, 40%); + // @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%)); + color: $bright-blue; + @include linear-gradient(lighten($dark-blue, 50%), lighten($bright-blue, 55%)); + + // &:hover, &:focus { + // color: $yellow; + // @include linear-gradient($bright-blue, darken($bright-blue, 10%)); + // @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%)); + // } + } + // &.save-update { + // border-left: 1px solid lighten($dark-blue, 10%); + // border-right: 1px solid lighten($dark-blue, 10%); + // @include box-shadow(inset 0 0 0 1px lighten($bright-blue, 15%)); + // color: #fff; + // @include linear-gradient(lighten($bright-blue, 10%), $bright-blue); + // text-shadow: 0 -1px 0 darken($bright-blue, 10%); + + // &:hover, &:focus { + // color: $yellow; + // @include linear-gradient($bright-blue, darken($bright-blue, 10%)); + // @include box-shadow(inset 0 0 3px 1px lighten($bright-blue, 10%)); + // } + // } } } } 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}