Skip to content
Snippets Groups Projects
Commit 4d02f5d6 authored by Kyle Fiedler's avatar Kyle Fiedler
Browse files

Added fixes for bugs for the video

parent a7787d23
No related branches found
Tags release-2021-06-30-06.16
No related merge requests found
Hide whitespace changes
Inline Side-by-side
static/css/application.css
+ 55
− 34
View file @ 4d02f5d6
......@@ -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 {
......
static/images/open-arrow.png
+ 0
− 0
View replaced file @ a7787d23 View file @ 4d02f5d6
static/images/open-arrow.png

105 B | W: | H:

static/images/open-arrow.png

2.76 KiB | W: | H:

static/images/open-arrow.png
static/images/open-arrow.png
static/images/open-arrow.png
static/images/open-arrow.png
  • 2-up
  • Swipe
  • Onion skin
templates/sass/base/_variables.scss
+ 1
− 1
View file @ 4d02f5d6
......@@ -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
......
templates/sass/courseware/_video.scss
+ 34
− 33
View file @ 4d02f5d6
......@@ -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;
......
templates/sass/layout/_layout.scss
+ 2
− 2
View file @ 4d02f5d6
......@@ -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;
}
}
......
templates/video.html
+ 8
− 6
View file @ 4d02f5d6
......@@ -72,10 +72,10 @@
<script type="text/javascript" charset="utf-8">
$(function() {
$('.add-fullscreen, .hide-subtitles').qtip({
position: {
my: 'top center', // Position my top left...
at: 'bottom center', // at the bottom right
}
position: {
my: 'top right',
at: 'top right'
}
});
$('.add-fullscreen').click(function() {
......@@ -114,11 +114,13 @@ at: 'bottom center', // at the bottom right
return false;
});
$("ol#video_speeds").hide();
var dropUpHeight = $('ol#video_speeds').height();
console.log(dropUpHeight);
// $('ol#video_speeds').css('top', -(dropUpHeight));
$("div.speeds a").hover(function() {
$(this).toggleClass("open");
$("ol#video_speeds").slideToggle(150);
});
$("div.speeds a").click(function() {
......
templates/video_init.js
+ 4
− 0
View file @ 4d02f5d6
......@@ -88,6 +88,7 @@ function add_speed(key, stream) {
var active = $(this).text();
$("p.active").text(active);
});
}
var l=[]
......@@ -128,6 +129,9 @@ $(document).ready(function() {
add_speed(l[i], streams[l[i]])
}
var dropUpHeight = $('ol#video_speeds').height();
console.log(dropUpHeight);
$('ol#video_speeds').css('top', -(dropUpHeight));
});
function toggleVideo(){
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment