Bootstrap updates and transport bar per #70

Author: scottgarner

_includes/hint_6.html

@@ -4,24 +4,23 @@ <h2>Thanks for participating!</h2>
 <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>
 
 <div class="text-center">
-
-<div id="videoCommands" class="btn-group">
-  <a id="forum" class="btn btn-default btn-primary" href="/about/">
-    <span class="glyphicon glyphicon-star"></span> Info &amp; Credits
-  </a>
-
-  <a id="forum" class="btn btn-default btn-primary" href="http://processing.org/">
-    <span class="glyphicon glyphicon-download"></span> Get Processing
-  </a>
-
-  <a id="forum" class="btn btn-default btn-primary" href="http://forum.processing.org/two/categories/hello-processing">
-    <span class="glyphicon glyphicon-bullhorn"></span> Discuss Tutorial
-  </a>
-</div>
-
+  <p>
+    <div class="btn-group">
+      <a id="forum" class="btn btn-default btn-primary" href="/about/">
+        <span class="glyphicon glyphicon-star"></span> Info &amp; Credits
+      </a>
+
+      <a id="forum" class="btn btn-default btn-primary" href="http://processing.org/">
+        <span class="glyphicon glyphicon-download"></span> Get Processing
+      </a>
+
+      <a id="forum" class="btn btn-default btn-primary" href="http://forum.processing.org/two/categories/hello-processing">
+        <span class="glyphicon glyphicon-bullhorn"></span> Discuss Tutorial
+      </a>
+    </div>
+  </p>
 </div>
 
-<br/><br/>
 
 <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>
 

css/bootstrap.min.css

@@ -4,6 +4,8 @@
 ---
 
 $light-color: #FcFcFf;
+$mid-color: #efefef;
+
 $primary-color: #4D7E9E;
 $primary-color-dark: darken($primary-color, 20%);
 $secondary-color: #E67AC2;
@@ -62,7 +64,7 @@ a:hover {
 	color: $secondary-color-dark;
 }
 
-.btn {
+#videoCommands .btn, #editorCommands .btn {
   -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
           border-radius: 0 !important;
@@ -178,7 +180,7 @@ div#title {
 	left:0;
 	border-width: 0 1px 0 1px;
 	border-style: solid;
-	border-color: #efefef;
+	border-color: $mid-color;
 	height: 40px;
 	padding: 7px 12px 0 12px;
 }
@@ -398,6 +400,41 @@ div#videoContainer:hover div#videoSubtitlesContainer {
 	display: none;
 }
 
+div#footer {
+	position: fixed;
+	bottom:0;
+	left: 0;
+	z-index: 1000;
+	height: 24px;
+	width: 100%;
+	min-width: 1024px;
+	background: $light-color;
+}
+
+div#transport {
+	position: relative;
+	top: 8px;
+	width: 95%;
+	margin: 0 auto;
+}
+
+div#transport #track {
+	top: 0;
+	left: 0;	
+	background: $mid-color;
+	height: 8px;
+	width: 100%;
+}
+
+div#transport #progress {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: $secondary-color;
+	height: 8px;
+	width: 0%;
+}
+
 #hints {
 	display: none;
 }

css/main.scss

@@ -94,6 +94,14 @@
   </div>
 </div>
 
+<div id="footer">
+
+  <div id="transport">
+    <div id="track"></div>
+    <div id="progress"></div>
+  </div>
+
+</div>
 
 <!-- Modal Error Window -->
 

editor/index.html

@@ -400,14 +400,20 @@ var helloEditor = {
         helloEditor.popcorn.parseSRT( subtitleURL );
         helloEditor.popcorn.disable("subtitle");
 
+        helloEditor.popcorn.on("timeupdate", function(e) {
+          var position = helloEditor.popcorn.currentTime() / helloEditor.popcorn.duration();
+          var width = position * $("#transport").width();
+          $("#progress").css('width', width);
+        });
+
     },
     /**
      * Try to keep a sane layout at any browser size.
      */
     refreshUI: function () {
 
         var viewportWidth = $("#interface").innerWidth(),
-            viewportHeight = $("#interface").innerHeight() - $("#header").height(),
+            viewportHeight = $("#interface").innerHeight() - $("#header").height() - $("#footer").height(),
             minVideoWidth = 320,
             maxVideoWidth = viewportWidth / 2,
             videoWidth,
@@ -424,6 +430,7 @@ var helloEditor = {
             videoHeight = videoWidth / 16 * 9;
 
             $("#header").css("width", videoWidth);
+            $("#transport").css("width", videoWidth);
 
             $("#videoContainer")
                 .css({
@@ -453,6 +460,7 @@ var helloEditor = {
             videoHeight = videoWidth / 16 * 9;
 
             $("#header").width(viewportWidth - 16);
+            $("#transport").css("width", viewportWidth - 16);
 
             $("#videoContainer")
                 .css({
@@ -542,6 +550,8 @@ var helloEditor = {
 
         scripts[index].init(time);
 
+        $("#progress").css('width', 0);
+
     },
     /**
      * Run current code in Ace