From 4d02f5d6aaaf55cda596e635ed3986d33dd8e45f Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 10 Apr 2012 12:08:44 -0400 Subject: [PATCH] Added fixes for bugs for the video --- static/css/application.css | 89 ++++++++++++++++---------- static/images/open-arrow.png | Bin 105 -> 2824 bytes templates/sass/base/_variables.scss | 2 +- templates/sass/courseware/_video.scss | 67 +++++++++---------- templates/sass/layout/_layout.scss | 4 +- templates/video.html | 14 ++-- templates/video_init.js | 4 ++ 7 files changed, 104 insertions(+), 76 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index ea3d290552..0710b39b3e 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -510,8 +510,8 @@ html body div.qtip div.ui-tooltip-content { border: none; background: rgba(0, 0, 0, 0.8); color: #fff; - font: 12px 14px; - margin-top: 5px; } + font: 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + margin-top: -30px; } html body section.outside-app { max-width: 600px; padding: 22.652px; } @@ -2909,16 +2909,12 @@ section.course-content div.video { background: #f3f3f3; display: block; } section.course-content div.video-subtitles { - display: table; zoom: 1; } section.course-content div.video-subtitles:before, section.course-content div.video-subtitles:after { content: ""; display: table; } section.course-content div.video-subtitles:after { clear: both; } -section.course-content div.video-subtitles div.tc-wrapper { - display: table-cell; - width: 100%; } section.course-content div.video-subtitles div.video-wrapper { float: left; width: 65.761%; @@ -3169,6 +3165,8 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr clear: both; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a.open { background: url("/static/images/open-arrow.png") 10px center no-repeat; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a.open ol#video_speeds { + opacity: 1; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a h3, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a div#wiki_panel input[type="button"], div#wiki_panel section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a input[type="button"] { color: #999; font-size: 12px; @@ -3185,22 +3183,36 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds { background-color: #444; border: 1px solid #000; - border-top: 0; - -webkit-box-shadow: inset 1px 0 0 #555555; - -moz-box-shadow: inset 1px 0 0 #555555; - box-shadow: inset 1px 0 0 #555555; - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; + border-bottom: 0; + -webkit-box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444; + -moz-box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444; + box-shadow: inset 1px 0 0 #555555, 0 2px 0 #444444; left: -1px; position: absolute; - top: 46px; + top: 0; width: 100%; - z-index: 10; } + z-index: 10; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + opacity: 0; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds a ol#video_speeds li { border-bottom: 1px solid #000; -webkit-box-shadow: 0 1px 0 #555555; @@ -3375,21 +3387,15 @@ section.course-content div.video-subtitles.fullscreen { top: 0; width: 100%; z-index: 999; } -section.course-content div.video-subtitles.fullscreen.closed div.video-wrapper { - width: 82.88%; - margin: 0 auto; - float: none; } -section.course-content div.video-subtitles.fullscreen.closed ol.subtitles { - width: 0px; - height: 0; } section.course-content div.video-subtitles.fullscreen a.exit { position: absolute; top: 20px; - right: 20px; + left: 20px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; - font-style: 12px; } + font-style: 12px; + display: none; } section.course-content div.video-subtitles.fullscreen a.exit::after { content: "✖"; display: -moz-inline-box; @@ -3402,14 +3408,29 @@ section.course-content div.video-subtitles.fullscreen a.exit::after { padding-left: 6px; } section.course-content div.video-subtitles.fullscreen a.exit:hover { color: #993333; } -section.course-content div.video-subtitles.fullscreen div.tc-wrapper { - padding: 20px; - vertical-align: middle; - max-height: 100%; - overflow-y: scroll; } section.course-content div.video-subtitles.fullscreen div.tc-wrapper object#myytplayer { - max-height: 100%; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; overflow: hidden; } +section.course-content div.video-subtitles.fullscreen div.tc-wrapper section.video-controls { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 9999; } +section.course-content div.video-subtitles.fullscreen ol.subtitles { + position: fixed; + top: 0; + right: 0; + bottom: 0; + height: 100%; + background: rgba(0, 0, 0, 0.8); + padding: 22.652px; + max-width: 23.482%; + max-height: 100%; } section.course-content div.video-subtitles.fullscreen ol.subtitles li { color: #aaa; } section.course-content div.video-subtitles.fullscreen ol.subtitles li.current { diff --git a/static/images/open-arrow.png b/static/images/open-arrow.png index 37bfa53eac297fe3049a45350e177b49b46cb7ac..4bedb610817803270c7334c93e4c07604c9b2c3a 100644 GIT binary patch delta 2815 zcmV3h>FVl;d`TNf7ZPB=FR@K*FNX0^PRKL z2fzpnmPj*EHGmAMLLL#|gU7_i;p8qrfeIvW01ybXWFd3?BLM*Temp!YBESc}00DT@ z3kU$fO`E_l9Ebl8>Oz@Z0f2-7z;ux~O9+4z06=<09Y^p6lP1rIRMx# z05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p00esgV8|mQcmRZ%02D^@S3L16t`O%c004NI zvOKvYIYoh62rY33S640`D9%Y2D-DpKGaQJ>aJVl|9x!Kv};eCNs@5@0A55SE>z01KgS3Fe*i?Ffhw>;8}z{#EWidF!3EsG3;bX< zghC|5!a@*23S@vBa$qT}fU&9EIRU@z1_9W=mEXoiz;4lcq~xDGvV5BgyUp1~-* zfe8db$Osc*A=-!mVv1NJjtCc-h4>-CNCXm#Bp}I%6j35eku^v$Qi@a{RY)E3J#qp$ ze}`N~x{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo8iYoo3(#bAF`ADSpqtQgv>H8(HlgRx zt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>Xu_CMttHv6zR;&ZNiS=X8v3CR#fknUx zHUxJb=$GgN^mhym zh82Uyh-WAnn-~WeXBl@Gub51x8Pkgy$5b#kG3%J;nGcz7Rah#vDtr}@$_kZAl_r%N zDlb&2s-~*mstZ-~Rm)V5sa{ikf38MVGgITK3DlOWRjQp(>r)$3XQ?}=hpK0&Z&W{| zep&sA23f;Q!%st`QJ}G3I zcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?2D1z#2HOnI7(B%_ac?{wFUQ;Q zQA1tBKtrWrm0_3Rgps+?e>|hrMvX=fjA_PP<0Rv4#%;!qeU1G+2MveW4yzqn9e#7PauhmNI^LSjobEq;#q^fxFK1ZK5YN~%R|78Dq|Iq-afF%KE1Brn_ zfm;Im_iKB_Ki zJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$3*&nim@mj(aCxE5!t{lw z7O5^0EIO7ze@uu@IF#@~5Gtq^j3x3DcO{MrdBPpSXCg1rHqnUKLtH8zPVz`9O?r~- zk-Rl|B*inOEaka`C#jIUObtxkn>wBrnsy*W_HW0 zWrec-#cqqYFCLW#$!oKatOZ#u3bsO~=u}!L*D43He`jS^X1~pe$~l&+o-57m%(Ked zkT;y~pa1O=!V=+2Q(!ODWcwE=7E3snl`g?;PX*X>OX6feMEuLErma3QLmkw?X+1j)X-&VBk_4Y;EFPF_I z+q;9dL%E~BJh;4Nr^(LEJ3myURP#>OB6F(@)2{oV%K? zxm;_x?s~noduI3P8=g1L-SoYA@fQEq)t)&$-M#aAZ}-Lb_1_lVesU-M&da;mcPH+x zyidGe^g!)F*+boj)jwPQ+}Q8je`>&Yf1vZx+(-8Yg@e!jk@b%cLj{kSkIRM)hU=a< zJ~=t!KXU!){HH_DWX~p^7yhFD%dQs|FMjyd>(|cFn9-q^@|TmpZG5Hu>cHz6uiM7L z#vZ=Ocr!6x^j7=r!FSwu9q*&x4^QNLAb%+TX!)`AQ_!dTlNpnf{{#b=^Za8oc`e%j z001CkNK#Dz0D2_=0Dyx40Qvs_0D$QL0Cg|`0P0`>06Lfe02gnPU&TfM001*dL_t(| z+G6bP0l+XkKB*Ywx diff --git a/templates/sass/base/_variables.scss b/templates/sass/base/_variables.scss index 60dd764872..192b5683d9 100644 --- a/templates/sass/base/_variables.scss +++ b/templates/sass/base/_variables.scss @@ -2,7 +2,7 @@ // ---------------------------------------- // // fonts -$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; +$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; $body-font-size: 14px; // grid diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss index d345dd02a5..b8f09ff089 100644 --- a/templates/sass/courseware/_video.scss +++ b/templates/sass/courseware/_video.scss @@ -18,14 +18,8 @@ section.course-content { } div.video-subtitles { - display: table; @include clearfix(); - div.tc-wrapper { - display: table-cell; - width: 100%; - } - div.video-wrapper { float: left; width: flex-grid(6, 9); @@ -212,6 +206,10 @@ section.course-content { &.open { background: url('/static/images/open-arrow.png') 10px center no-repeat; + + ol#video_speeds { + opacity: 1; + } } h3 { @@ -235,14 +233,15 @@ section.course-content { ol#video_speeds { background-color: #444; border: 1px solid #000; - border-top: 0; - @include box-shadow(inset 1px 0 0 #555); - @include inline-block(); + border-bottom: 0; + @include box-shadow(inset 1px 0 0 #555, 0 2px 0 #444); left: -1px; position: absolute; - top: 46px; + top:0; width: 100%; z-index: 10; + @include transition(); + opacity: 0; li { border-bottom: 1px solid #000; @@ -406,29 +405,15 @@ section.course-content { width: 100%; z-index: 999; - &.closed { - @extend .trans; - - div.video-wrapper { - width: flex-grid(7.5,9); - margin: 0 auto; - float: none; - } - - ol.subtitles { - width: 0px; - height: 0; - } - } - a.exit { position: absolute; top: 20px; - right: 20px; + left: 20px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; font-style: 12px; + display: none; &::after { content: "✖"; @@ -442,19 +427,35 @@ section.course-content { } div.tc-wrapper { - padding: 20px; - vertical-align: middle; - max-height: 100%; - overflow-y: scroll; - - object#myytplayer { - max-height: 100%; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; overflow: hidden; } + + section.video-controls { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 9999; + } } ol.subtitles { + position: fixed; + top: 0; + right: 0; + bottom: 0; + height: 100%; + background: rgba(#000, .8); + padding: lh(); + max-width: flex-grid(3); + max-height: 100%; + li { color: #aaa; diff --git a/templates/sass/layout/_layout.scss b/templates/sass/layout/_layout.scss index 187bcd4723..68e4960ea3 100644 --- a/templates/sass/layout/_layout.scss +++ b/templates/sass/layout/_layout.scss @@ -35,8 +35,8 @@ html { border: none; background: rgba(#000, .8); color: #fff; - font: 12px $body-font-size; - margin-top: 5px; + font: 12px $body-font-family; + margin-top: -30px; } } diff --git a/templates/video.html b/templates/video.html index 835998c7fa..76b0117f39 100644 --- a/templates/video.html +++ b/templates/video.html @@ -72,10 +72,10 @@