From aee2cf4ed5aa62f3d5bff279d6df63a022313c72 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 26 Jun 2012 14:09:57 -0400 Subject: [PATCH] Added new styles for the sequence nav including completeness --- .../images/sequence-nav/status/check.png | Bin 0 -> 211 bytes .../images/sequence-nav/status/dash.png | Bin 0 -> 86 bytes .../sequence-nav/status/not-started.png | Bin 0 -> 124 bytes .../images/sequence-nav/status/wrong.png | Bin 0 -> 178 bytes lms/static/sass/README.md | 4 + lms/static/sass/base/_extends.scss | 4 +- lms/static/sass/courseware/_sequence-nav.scss | 86 +++++++++--------- 7 files changed, 50 insertions(+), 44 deletions(-) create mode 100644 lms/static/images/sequence-nav/status/check.png create mode 100644 lms/static/images/sequence-nav/status/dash.png create mode 100644 lms/static/images/sequence-nav/status/not-started.png create mode 100644 lms/static/images/sequence-nav/status/wrong.png diff --git a/lms/static/images/sequence-nav/status/check.png b/lms/static/images/sequence-nav/status/check.png new file mode 100644 index 0000000000000000000000000000000000000000..d13529338b4c1133dc4aad90ac857d175dd46f49 GIT binary patch literal 211 zcmeAS@N?(olHy`uVBq!ia0vp^d_c_2!3HG#TlXXZsac*bjv*Ddrk>r%)s!I8_AuGC z(RurYRuhYx3c8lAlf@rj5Zm(P+Ldb$cssY0Fe|CD{o-SjcU*Ls`MLd^>Gv1ikWT(N z_qdCDN(3*j?3@cFMLVhtehSB`{8G3i|9r<|9`-iPbwXDy4w(2nRXE6FelwIKasNZP ztul5gb;;bpziupaQufL*xe&lwQ5wj|e@$FV-hWM^v(wgwubGSsa;^o}J$w`obR~nQ LtDnm{r-UW|?6Od` literal 0 HcmV?d00001 diff --git a/lms/static/images/sequence-nav/status/dash.png b/lms/static/images/sequence-nav/status/dash.png new file mode 100644 index 0000000000000000000000000000000000000000..79e7fa8f7f4b0a5a68981e3d238577f3514dc58e GIT binary patch literal 86 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)K!3HF!%s-X@q+~r^978H@)t)qD1o9XSDwkex jWnoo)aKrS-m7>klm&!NZE#i&_N-=o4`njxgN@xNAENvGS literal 0 HcmV?d00001 diff --git a/lms/static/images/sequence-nav/status/not-started.png b/lms/static/images/sequence-nav/status/not-started.png new file mode 100644 index 0000000000000000000000000000000000000000..826e28609b3d220d744c2ba6ad6c196e700b0190 GIT binary patch literal 124 zcmeAS@N?(olHy`uVBq!ia0vp^>>$j+1|*LJg))c5*()+!>tz48{Jx*#96x)FkGwZ24`CwDYx_pD%J2yLFyF c?8if9jg@y(`?=Hq0v*BN>FVdQ&MBb@0F^aEm;e9( literal 0 HcmV?d00001 diff --git a/lms/static/sass/README.md b/lms/static/sass/README.md index dccb3a80c3..e94076e6e0 100644 --- a/lms/static/sass/README.md +++ b/lms/static/sass/README.md @@ -23,3 +23,7 @@ The dev server will automatically compile sass files that have changed. Simply s the server using: $ rake runserver + +To run it along side of development: + + $ sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index 880f6cd3ca..63c3a9de7a 100644 --- a/lms/static/sass/base/_extends.scss +++ b/lms/static/sass/base/_extends.scss @@ -205,7 +205,7 @@ h1.top-header { border-top: 1px solid #fff; // @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff); font-size: 12px; - height:46px; + // height:46px; line-height: 46px; margin: (-$body-line-height) (-$body-line-height) $body-line-height; text-shadow: 0 1px 0 #fff; @@ -224,7 +224,7 @@ h1.top-header { } &.block-link { - background: darken($cream, 5%); + // background: darken($cream, 5%); border-left: 1px solid darken($cream, 20%); @include box-shadow(inset 1px 0 0 lighten($cream, 5%)); display: block; diff --git a/lms/static/sass/courseware/_sequence-nav.scss b/lms/static/sass/courseware/_sequence-nav.scss index 4472724e6d..377464971b 100644 --- a/lms/static/sass/courseware/_sequence-nav.scss +++ b/lms/static/sass/courseware/_sequence-nav.scss @@ -17,7 +17,7 @@ nav.sequence-nav { } li { - border-left: 1px solid darken($cream, 20%); + border-left: 1px solid darken($cream, 10%); display: table-cell; min-width: 20px; @@ -29,18 +29,17 @@ nav.sequence-nav { background-repeat: no-repeat; &:hover { - background-color: lighten($cream, 3%); + background-color: lighten($cream, 8%); } } .visited { - background-color: #DCCDA2; + background-color: darken($cream, 4%); background-repeat: no-repeat; - @include box-shadow(inset 0 0 3px darken(#dccda2, 10%)); + @include box-shadow(0); &:hover { background-color: $cream; - background-position: center center; } } @@ -51,7 +50,6 @@ nav.sequence-nav { &:hover { background-color: #fff; - background-position: center; } } @@ -61,86 +59,87 @@ nav.sequence-nav { cursor: pointer; display: block; height: 17px; - padding: 15px 0 14px; + padding: 15px 0 17px; position: relative; @include transition(all, .4s, $ease-in-out-quad); width: 100%; - - &.progress { - border-bottom-style: solid; - border-bottom-width: 4px; - } - - &.progress-none { - @extend .progress; - border-bottom-color: red; - } - - &.progress-some { - @extend .progress; - border-bottom-color: yellow; - } - - &.progress-done { - @extend .progress; - border-bottom-color: green; - } + background-position: center 8px; //video &.seq_video_inactive { @extend .inactive; - background-image: url('../images/sequence-nav/video-icon-normal.png'); - background-position: center; + background-image: url('../images/sequence-nav/video-icon-visited.png'); } &.seq_video_visited { @extend .visited; - background-image: url('../images/sequence-nav/video-icon-visited.png'); - background-position: center; + background-image: url('../images/sequence-nav/video-icon-normal.png'); } &.seq_video_active { @extend .active; background-image: url('../images/sequence-nav/video-icon-current.png'); - background-position: center; } //other &.seq_other_inactive { @extend .inactive; - background-image: url('../images/sequence-nav/document-icon-normal.png'); - background-position: center; + background-image: url('../images/sequence-nav/document-icon-visited.png'); } &.seq_other_visited { @extend .visited; - background-image: url('../images/sequence-nav/document-icon-visited.png'); - background-position: center; + background-image: url('../images/sequence-nav/document-icon-normal.png'); } &.seq_other_active { @extend .active; background-image: url('../images/sequence-nav/document-icon-current.png'); - background-position: center; } //vertical & problems &.seq_vertical_inactive, &.seq_problem_inactive { @extend .inactive; - background-image: url('../images/sequence-nav/list-icon-normal.png'); - background-position: center; + background-image: url('../images/sequence-nav/list-icon-visited.png'); } &.seq_vertical_visited, &.seq_problem_visited { @extend .visited; - background-image: url('../images/sequence-nav/list-icon-visited.png'); - background-position: center; + background-image: url('../images/sequence-nav/list-icon-normal.png'); } &.seq_vertical_active, &.seq_problem_active { @extend .active; background-image: url('../images/sequence-nav/list-icon-current.png'); - background-position: center; + } + + &:after { + content: " "; + display: block; + width: 11px; + height: 11px; + background: url('../images/sequence-nav/status/dash.png') no-repeat center; + @include position( absolute, 0 0 6px 50% ); + margin-left: -5px; + } + + //progress + &.progress-none { + &:after { + background: url('../images/sequence-nav/status/not-started.png') no-repeat center; + } + } + + &.progress-some { + &:after { + background: url('../images/sequence-nav/status/wrong.png') no-repeat center; + } + } + + &.progress-done { + &:after { + background: url('../images/sequence-nav/status/check.png') no-repeat center; + } } p { @@ -180,6 +179,8 @@ nav.sequence-nav { } &:hover { + background-position: center 8px; + p { display: block; margin-top: 4px; @@ -215,6 +216,7 @@ nav.sequence-nav { display: block; text-indent: -9999px; @include transition(all, .2s, $ease-in-out-quad); + line-height: 49px; &:hover { opacity: .5;