From 3da8b8133f69c00f9731bb530fc952d0d3c859b4 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 15 Mar 2012 16:28:36 -0400 Subject: [PATCH] Added minor ui changes --- courseware.html | 2 +- sass/base/_extends.scss | 2 +- sass/courseware/_sequence-nav.scss | 37 ++++++++++++++++++++++-------- sass/courseware/_sidebar.scss | 25 ++++++++++++++++++-- sass/courseware/_video.scss | 26 ++++++++++++--------- video.html | 6 ++--- 6 files changed, 70 insertions(+), 28 deletions(-) diff --git a/courseware.html b/courseware.html index 2d6cdbf937..07d962957b 100644 --- a/courseware.html +++ b/courseware.html @@ -7,7 +7,7 @@ ${init} $(".sequence-nav li a").hover(function(){ - $(this).siblings().toggle(); + $(this).siblings().toggleClass("shown"); }); }); diff --git a/sass/base/_extends.scss b/sass/base/_extends.scss index 5aa3aa1816..4275a1cf67 100644 --- a/sass/base/_extends.scss +++ b/sass/base/_extends.scss @@ -74,7 +74,7 @@ h1.top-header { h1, h2 { font-size: 18px; - font-weight: 800; + font-weight: bold; letter-spacing: 0; text-transform: none; } diff --git a/sass/courseware/_sequence-nav.scss b/sass/courseware/_sequence-nav.scss index a1c086bc55..96e25be874 100644 --- a/sass/courseware/_sequence-nav.scss +++ b/sass/courseware/_sequence-nav.scss @@ -54,6 +54,7 @@ nav.sequence-nav { padding: 15px 4px 14px; width: 28px; height: 17px; + @include transition(all, .4s, $ease-in-out-quad); // @media screen and (max-width: 800px) { // padding: 12px 8px; @@ -118,16 +119,24 @@ nav.sequence-nav { } p { - position: absolute; - display: none; + // display: none; + // visibility: hidden; background: #333; - padding: 6px; - white-space: pre-wrap; - z-index: 99; - margin: 4px 0 0 -5px; - text-shadow: 0 -1px 0 #000; color: #fff; line-height: lh(); + margin: 0px 0 0 -5px; + opacity: 0; + padding: 6px; + position: absolute; + text-shadow: 0 -1px 0 #000; + @include transition(all, .6s, $ease-in-out-quart); + white-space: pre-wrap; + z-index: 99; + + &.shown { + opacity: 1; + margin-top: 4px; + } &:empty { background: none; @@ -146,7 +155,6 @@ nav.sequence-nav { top: -5px; left: 18px; @include transform(rotate(45deg)); - @include transition(); width: 10px; } } @@ -215,15 +223,23 @@ nav.sequence-nav { section.course-content { + position: relative; + + div#seq_content { + margin-bottom: 60px; + } + nav.sequence-bottom { - margin-bottom: -(lh()); + position: absolute; + bottom: 0; + right: 50%; + margin-right: -53px; ul { @extend .clearfix; border: 1px solid darken(#f6efd4, 20%); border-bottom: 0; @include border-radius(3px 3px 0 0); - margin: lh() auto 0; overflow: hidden; width: 106px; background-color: darken($cream, 5%); @@ -242,6 +258,7 @@ section.course-content { text-indent: -9999px; width: 45px; display: block; + @include transition(all, .4s, $ease-in-out-quad); &:hover { text-decoration: none; diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss index 98659f12e0..d93e672378 100644 --- a/sass/courseware/_sidebar.scss +++ b/sass/courseware/_sidebar.scss @@ -34,16 +34,37 @@ section.course-index { ul.ui-accordion-content { @include border-radius(0); @include box-shadow( inset -1px 0 0 #e6e6e6); - background: #d6d6d6; + background: #dadada; border: none; border-bottom: 1px solid #c3c3c3; font-size: 12px; margin: 0; - overflow: hidden; + // overflow: visible; li { + position: relative; + &.active { font-weight: bold; + + p.subtitle { + font-weight: normal; + } + + // &:after { + // content: " "; + // width: 16px; + // height: 16px; + // position: absolute; + // right: -35px; + // top: 7px; + // display: block; + // background-color: #dadada; + // border-top: 1px solid #c3c3c3; + // border-right: 1px solid #c3c3c3; + // z-index: 99; + // @include transform(rotate(45deg)); + // } } a { diff --git a/sass/courseware/_video.scss b/sass/courseware/_video.scss index 4402e968ad..2904ba44b9 100644 --- a/sass/courseware/_video.scss +++ b/sass/courseware/_video.scss @@ -141,20 +141,13 @@ section.course-content { line-height: 46px; //height of play pause buttons margin-right: 0; -webkit-font-smoothing: antialiased; + opacity: .7; + @include transition(); h3 { @include inline-block(); - - a { - color: #fff; - padding: 0 lh(.5); - @include inline-block(); - - &:hover { - text-decoration: none; - // background-color: #444; - } - } + padding: 0 lh(.5); + font-weight: normal; } // fix for now @@ -164,13 +157,23 @@ section.course-content { li { cursor: pointer; + color: #fff; @include inline-block(); &.active { font-weight: bold; } + + &:hover { + color: #aaa; + } } } + + &:hover { + opacity: 1; + background-color: #444; + } } a.hide-subtitles { @@ -184,6 +187,7 @@ section.course-content { font-weight: 800; background: url('/static/images/cc.png') 16px center no-repeat; -webkit-font-smoothing: antialiased; + @include transition(); &:hover { color: #fff; diff --git a/video.html b/video.html index e1548eade0..dd7f2e559b 100644 --- a/video.html +++ b/video.html @@ -28,11 +28,11 @@
-

Speed

+

Speed

    - on + turn off
    @@ -66,7 +66,7 @@ $('div.video-subtitles').toggleClass('closed'); var link_text = $('.hide-subtitles').text(); - $(this).text((link_text == 'on') ? 'off' : 'on'); + $(this).text((link_text == 'turn off') ? 'turn on' : 'turn off'); return false; }); });