From 1a6f06416b47226c994fd5327c576b032e5b8ec3 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 28 Feb 2012 17:13:03 -0500 Subject: [PATCH 1/2] added new tooltips and styles for new tool tips --HG-- branch : kf-tooltips --- courseware.html | 8 +- main.html | 2 +- sass/application.scss | 2 +- sass/courseware/_sequence-nav.scss | 198 ++++++++++++++++++----------- sass/courseware/_video.scss | 27 ---- seq_module.html | 7 +- seq_module.js | 2 +- video.html | 8 -- 8 files changed, 134 insertions(+), 120 deletions(-) diff --git a/courseware.html b/courseware.html index 67e596545e..2d6cdbf937 100644 --- a/courseware.html +++ b/courseware.html @@ -4,8 +4,12 @@ diff --git a/main.html b/main.html index f7a4e2a90c..dea829f05f 100644 --- a/main.html +++ b/main.html @@ -85,6 +85,7 @@ + <%block name="js_extra"/> - diff --git a/sass/application.scss b/sass/application.scss index 20e50f8605..c3f529534e 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -4,7 +4,7 @@ @import "base/reset", "base/font-face"; @import "base/variables", "base/functions", "base/extends", "base/base"; @import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal"; -@import "jquery-ui-1.8.16.custom"; +@import "plugins/jquery-ui-1.8.16.custom"; // pages @import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier"; diff --git a/sass/courseware/_sequence-nav.scss b/sass/courseware/_sequence-nav.scss index fb2534c4f5..24d0687015 100644 --- a/sass/courseware/_sequence-nav.scss +++ b/sass/courseware/_sequence-nav.scss @@ -6,102 +6,150 @@ nav.sequence-nav { display: table-row; float: left; width: flex-grid(7.5,9) + flex-gutter(); + position: relative; a { @extend .block-link; } - .inactive { - background-repeat: no-repeat; - - &:hover { - background-color: lighten(#F6EFD4, 3%); - } - } - - .visited { - background-color: shade(#F6EFD4, 10%); - background-repeat: no-repeat; - border-color: shade(#F6EFD4, 10%); - - &:hover { - background-color: #F6EFD4; - } - } - - .active { - // @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%)); - @include box-shadow(0 1px 0 #fff); - background-color: #fff; - background-repeat: no-repeat; - - &:hover { - background-color: #fff; - } - } - li { - @include box-shadow(1px 0 0 #fff); - background-position: center center; - border: none; - border-right: 1px solid darken(#F6EFD4, 10%); - cursor: pointer; display: table-cell; - padding: 14px 4px; - width: 28px; - // @media screen and (max-width: 800px) { - // padding: 12px 8px; - // } + .inactive { + background-repeat: no-repeat; - //video - &.seq_video_inactive { - @extend .inactive; - background-image: url('/static/images/sequence-nav/video-icon-normal.png'); + &:hover { + background-color: lighten(#F6EFD4, 3%); + } } - &.seq_video_visited { - @extend .visited; - background-image: url('/static/images/sequence-nav/video-icon-visited.png'); + .visited { + background-color: shade(#F6EFD4, 10%); + background-repeat: no-repeat; + border-color: shade(#F6EFD4, 10%); + + &:hover { + background-color: #F6EFD4; + background-position: center center; + } } - &.seq_video_active { - @extend .active; - background-image: url('/static/images/sequence-nav/video-icon-current.png'); + .active { + // @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%)); + @include box-shadow(0 1px 0 #fff); + background-color: #fff; + background-repeat: no-repeat; + + &:hover { + background-color: #fff; + background-position: center; + } } - //other - &.seq_other_inactive { - @extend .inactive; - background-image: url('/static/images/sequence-nav/document-icon-normal.png'); - } + a { + @include box-shadow(1px 0 0 #fff); + background-position: center center; + border: none; + border-right: 1px solid darken(#F6EFD4, 10%); + cursor: pointer; + padding: 14px 4px; + width: 28px; + height: 17px; - &.seq_other_visited { - @extend .visited; - background-image: url('/static/images/sequence-nav/document-icon-visited.png'); - } + // @media screen and (max-width: 800px) { + // padding: 12px 8px; + // } - &.seq_other_active { - @extend .active; - background-image: url('/static/images/sequence-nav/document-icon-current.png'); - } + //video + &.seq_video_inactive { + @extend .inactive; + background-image: url('/static/images/sequence-nav/video-icon-normal.png'); + background-position: center; + } - //vertical & problems - &.seq_vertical_inactive, &.seq_problem_inactive { - @extend .inactive; - background-image: url('/static/images/sequence-nav/list-icon-normal.png'); - } + &.seq_video_visited { + @extend .visited; + background-image: url('/static/images/sequence-nav/video-icon-visited.png'); + background-position: center; + } - &.seq_vertical_visited, &.seq_problem_visited { - @extend .visited; - background-image: url('/static/images/sequence-nav/list-icon-visited.png'); - } + &.seq_video_active { + @extend .active; + background-image: url('/static/images/sequence-nav/video-icon-current.png'); + background-position: center; + } - &.seq_vertical_active, &.seq_problem_active { - @extend .active; - background-image: url('/static/images/sequence-nav/list-icon-current.png'); - } + //other + &.seq_other_inactive { + @extend .inactive; + background-image: url('/static/images/sequence-nav/document-icon-normal.png'); + background-position: center; + } + &.seq_other_visited { + @extend .visited; + background-image: url('/static/images/sequence-nav/document-icon-visited.png'); + background-position: center; + } + + &.seq_other_active { + @extend .active; + background-image: url('/static/images/sequence-nav/document-icon-current.png'); + background-position: center; + } + + //vertical & problems + &.seq_vertical_inactive, &.seq_problem_inactive { + @extend .inactive; + background-image: url('/static/images/sequence-nav/list-icon-normal.png'); + background-position: center; + } + + &.seq_vertical_visited, &.seq_problem_visited { + @extend .visited; + background-image: url('/static/images/sequence-nav/list-icon-visited.png'); + background-position: center; + } + + &.seq_vertical_active, &.seq_problem_active { + @extend .active; + background-image: url('/static/images/sequence-nav/list-icon-current.png'); + background-position: center; + } + } + + p { + position: absolute; + display: none; + background: #B3A87E; + padding: 6px; + white-space: pre-wrap; + z-index: 99; + margin: 4px 0 0 -5px; + text-shadow: 0 -1px 0 darken(#B3A87E, 10%); + color: #fff; + + &:empty { + background: none; + + &::after { + display: none; + } + } + + &::after { + background: #B3A87E; + content: " "; + display: block; + height: 10px; + position: absolute; + top: -5px; + left: 18px; + @include transform(rotate(45deg)); + @include transition(); + width: 10px; + } + } } } diff --git a/sass/courseware/_video.scss b/sass/courseware/_video.scss index 0949b96e64..cc176b71b1 100644 --- a/sass/courseware/_video.scss +++ b/sass/courseware/_video.scss @@ -167,33 +167,6 @@ section.course-content { @include inline-block(); } } - - // ol#video_speeds { - // @extend .clearfix; - // background: #333; - // border: 1px solid #000; - // font-weight: bold; - // @include inline-block(); - // padding: 0 lh(); - // position: absolute; - // right: 79px; - // @include box-shadow(inset 0 1px 0 #555); - - // li { - // cursor: pointer; - // float: left; - // margin-bottom: 0; - // margin-right: lh(.5); - - // &:last-child { - // margin-right: 0; - // } - - // &:hover { - // color: $mit-red; - // } - // } - // } } a.hide-subtitles { diff --git a/seq_module.html b/seq_module.html index 3f28739a55..3df90fc343 100644 --- a/seq_module.html +++ b/seq_module.html @@ -1,7 +1,7 @@ - - -
- +
diff --git a/seq_module.js b/seq_module.js index 9c52dacad2..c7b9fabab9 100644 --- a/seq_module.js +++ b/seq_module.js @@ -54,7 +54,7 @@ function ${ id }goto(i) { function ${ id }setup_click(i) { $('#tt_'+i).click(function(eo) { ${ id }goto(i);}); $('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive"); - $('#tt_'+i).attr("title", ${ id }titles[i-1]); + $('#tt_'+i).parent().append("

" + ${ id }titles[i-1] + "

"); } diff --git a/video.html b/video.html index 86c35364aa..3337ea45e3 100644 --- a/video.html +++ b/video.html @@ -69,14 +69,6 @@ $(this).text((link_text == 'on') ? 'off' : 'on'); return false; }); - - - /* $('.speeds ol').hide(); - - $('.speeds h3 a').click(function() { - $('.speeds ol').toggle(); - return false; - });*/ }); From 1628b3e59a08e664932235442d57353a774ef17e Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 28 Feb 2012 17:14:52 -0500 Subject: [PATCH 2/2] Moved jquery ui scss to its own folder --HG-- branch : kf-tooltips --- sass/{ => plugins}/_jquery-ui-1.8.16.custom.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename sass/{ => plugins}/_jquery-ui-1.8.16.custom.scss (100%) diff --git a/sass/_jquery-ui-1.8.16.custom.scss b/sass/plugins/_jquery-ui-1.8.16.custom.scss similarity index 100% rename from sass/_jquery-ui-1.8.16.custom.scss rename to sass/plugins/_jquery-ui-1.8.16.custom.scss