Skip to content

Commit 06c9bfb

Browse files
committed
Bootstrap updates and transport bar per #70
1 parent 8487cd0 commit 06c9bfb

File tree

5 files changed

+79
-20
lines changed

5 files changed

+79
-20
lines changed

_includes/hint_6.html

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,23 @@ <h2>Thanks for participating!</h2>
44
<p>If you'd like to learn more, we encourage you to visit the <a href="http://processing.org">Processing web site</a> as well as the other wonderful tutorials at <a href="http://code.org/learn">code.org</a>. If you have questions or feedback about the tutorial, we'd <a href="http://forum.processing.org/two/categories/hello-processing">love to hear from you</a>!</p>
55

66
<div class="text-center">
7-
8-
<div id="videoCommands" class="btn-group">
9-
<a id="forum" class="btn btn-default btn-primary" href="/about/">
10-
<span class="glyphicon glyphicon-star"></span> Info &amp; Credits
11-
</a>
12-
13-
<a id="forum" class="btn btn-default btn-primary" href="http://processing.org/">
14-
<span class="glyphicon glyphicon-download"></span> Get Processing
15-
</a>
16-
17-
<a id="forum" class="btn btn-default btn-primary" href="http://forum.processing.org/two/categories/hello-processing">
18-
<span class="glyphicon glyphicon-bullhorn"></span> Discuss Tutorial
19-
</a>
20-
</div>
21-
7+
<p>
8+
<div class="btn-group">
9+
<a id="forum" class="btn btn-default btn-primary" href="/about/">
10+
<span class="glyphicon glyphicon-star"></span> Info &amp; Credits
11+
</a>
12+
13+
<a id="forum" class="btn btn-default btn-primary" href="http://processing.org/">
14+
<span class="glyphicon glyphicon-download"></span> Get Processing
15+
</a>
16+
17+
<a id="forum" class="btn btn-default btn-primary" href="http://forum.processing.org/two/categories/hello-processing">
18+
<span class="glyphicon glyphicon-bullhorn"></span> Discuss Tutorial
19+
</a>
20+
</div>
21+
</p>
2222
</div>
2323

24-
<br/><br/>
2524

2625
<p>This tutorial was created for <a href="http://csedweek.org/">Computer Science Education Week</a>. To register your participation, please visit <a href="http://code.org/api/hour/finish">code.org</a>.</p>
2726

css/bootstrap.min.css

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/main.scss

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
---
55

66
$light-color: #FcFcFf;
7+
$mid-color: #efefef;
8+
79
$primary-color: #4D7E9E;
810
$primary-color-dark: darken($primary-color, 20%);
911
$secondary-color: #E67AC2;
@@ -62,7 +64,7 @@ a:hover {
6264
color: $secondary-color-dark;
6365
}
6466

65-
.btn {
67+
#videoCommands .btn, #editorCommands .btn {
6668
-webkit-border-radius: 0 !important;
6769
-moz-border-radius: 0 !important;
6870
border-radius: 0 !important;
@@ -178,7 +180,7 @@ div#title {
178180
left:0;
179181
border-width: 0 1px 0 1px;
180182
border-style: solid;
181-
border-color: #efefef;
183+
border-color: $mid-color;
182184
height: 40px;
183185
padding: 7px 12px 0 12px;
184186
}
@@ -398,6 +400,41 @@ div#videoContainer:hover div#videoSubtitlesContainer {
398400
display: none;
399401
}
400402

403+
div#footer {
404+
position: fixed;
405+
bottom:0;
406+
left: 0;
407+
z-index: 1000;
408+
height: 24px;
409+
width: 100%;
410+
min-width: 1024px;
411+
background: $light-color;
412+
}
413+
414+
div#transport {
415+
position: relative;
416+
top: 8px;
417+
width: 95%;
418+
margin: 0 auto;
419+
}
420+
421+
div#transport #track {
422+
top: 0;
423+
left: 0;
424+
background: $mid-color;
425+
height: 8px;
426+
width: 100%;
427+
}
428+
429+
div#transport #progress {
430+
position: absolute;
431+
top: 0;
432+
left: 0;
433+
background: $secondary-color;
434+
height: 8px;
435+
width: 0%;
436+
}
437+
401438
#hints {
402439
display: none;
403440
}

editor/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,14 @@
9494
</div>
9595
</div>
9696

97+
<div id="footer">
98+
99+
<div id="transport">
100+
<div id="track"></div>
101+
<div id="progress"></div>
102+
</div>
103+
104+
</div>
97105

98106
<!-- Modal Error Window -->
99107

js/editor.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,14 +400,20 @@ var helloEditor = {
400400
helloEditor.popcorn.parseSRT( subtitleURL );
401401
helloEditor.popcorn.disable("subtitle");
402402

403+
helloEditor.popcorn.on("timeupdate", function(e) {
404+
var position = helloEditor.popcorn.currentTime() / helloEditor.popcorn.duration();
405+
var width = position * $("#transport").width();
406+
$("#progress").css('width', width);
407+
});
408+
403409
},
404410
/**
405411
* Try to keep a sane layout at any browser size.
406412
*/
407413
refreshUI: function () {
408414

409415
var viewportWidth = $("#interface").innerWidth(),
410-
viewportHeight = $("#interface").innerHeight() - $("#header").height(),
416+
viewportHeight = $("#interface").innerHeight() - $("#header").height() - $("#footer").height(),
411417
minVideoWidth = 320,
412418
maxVideoWidth = viewportWidth / 2,
413419
videoWidth,
@@ -424,6 +430,7 @@ var helloEditor = {
424430
videoHeight = videoWidth / 16 * 9;
425431

426432
$("#header").css("width", videoWidth);
433+
$("#transport").css("width", videoWidth);
427434

428435
$("#videoContainer")
429436
.css({
@@ -453,6 +460,7 @@ var helloEditor = {
453460
videoHeight = videoWidth / 16 * 9;
454461

455462
$("#header").width(viewportWidth - 16);
463+
$("#transport").css("width", viewportWidth - 16);
456464

457465
$("#videoContainer")
458466
.css({
@@ -542,6 +550,8 @@ var helloEditor = {
542550

543551
scripts[index].init(time);
544552

553+
$("#progress").css('width', 0);
554+
545555
},
546556
/**
547557
* Run current code in Ace

0 commit comments

Comments
 (0)