Update Timer with Bootstrap modal, styling

Author: jordanmccullough

_javascript/curriculum.js

@@ -138,24 +138,18 @@ $(function(){
 
 	//Time toggle keybinding
 	$(".timer-label").click(function(){
-		$(".timer-wrapper").toggleClass("fade-out");
-		$(".timer-amount").show();
-		resetTimer();
-	});
-	$(".timer-exit").click(function(){
-		$(".timer-wrapper").toggleClass("fade-out");
-		$("#timer-check").removeAttr("checked");
-		// $(".timer-amount").();
 		resetTimer();
 	});
 	$("#start-stop").click(function(){
+
 		var timeLeftDisplay = $("#time-left")
 		var min = $("#minutes").attr("value");
 		var duration = min*60;
 
 		resetTimer();
 
-		$(".timer-amount").hide();
+		$(".time-amount").hide();
+		$("#start-stop").hide();
 
 		timeLeftInterval = setInterval(function(){
 			timeLeftDisplay.html( Math.floor((duration)/60) + ":" + (duration%60 < 10 ? "0"+duration%60:duration%60) );
@@ -168,6 +162,8 @@ $(function(){
 	});
 	function resetTimer(){
 		clearInterval(timeLeftInterval);
+		$("#start-stop").show();
+		$(".time-amount").show();
 		$("#time-left").html("");
 	}
 

_layouts/curriculum.html

@@ -4,12 +4,12 @@
 ---
 
 <!-- Modal -->
-<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-        <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
+        <h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
       </div>
       <div class="modal-body">
         <table>
@@ -26,7 +26,7 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
             <td>Hide/show table of contents</td>
           </tr>
         </table>
-        
+
         <table>
           <tr>
             <th>URL Command</th>
@@ -48,16 +48,19 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
   </div>
 </div>
 
-<div class="timer-wrapper fade-out">
-  <div class="timer">
-    <div class="timer-exit"><span class="octicon octicon-x"></span></div>
-    <div class="timer-amount">
-      <input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
-      <!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
-      <button id="start-stop" type="submit" class="btn btn-default">Start</button>
-    </div>
-    <div class="timer-content">
-      <span class="time-left" id="time-left"></span>
+
+
+<!-- Modal -->
+<div class="modal fade" id="timerModal" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content text-center">
+      <input type="number" id="minutes" name="minutes" min="1" max="60" value="5" placeholder="min" class="form-control time-amount">
+      <div class="time-left" id="time-left"></div>
+
+      <div class="modal-footer">
+        <button id="start-stop" type="submit" class="btn btn-default">Start</button>
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
@@ -121,7 +124,7 @@ <h4>Table of Contents</h4>
         <li>
           <div class="timer-toggle"></div>
           <input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
-          <label for="timer-check" class="timer-label">Timer</label>
+          <label for="timer-check" class="timer-label" data-toggle="modal" data-target="#timerModal">Timer</label>
         </li>
       </ul>
     </div>

_stylesheets/curriculum.scss

@@ -62,43 +62,19 @@ table{
 	}
 }
 
-
-.fade-out{
-	background: none !important;
-	margin-left: 100%;
-	position: fixed;
-	left: -35px !important;
-
-	.octicon{
-		font-size: 14px !important;
-	}
-
-	&.timer-wrapper{
-		background-color: none !important;
-	}
-
-	.timer{
-		margin: 0 0 !important;
-	}
-
-	.timer-toggle{
-		padding-left: 0px !important;
-		opacity: .3;
-		text-align: left !important;
-	}
-
-	.timer-amount{
-		visibility: hidden;
-	}
-}
-
 .display-controls{
 	border-top: solid 2px $gray-lighter;
 	margin-top: 5px;
 	padding-top: 10px;
 }
 
 
+.time-amount{
+	text-align: center;
+}
+.time-left{
+	font-size: 88px;
+}
 
 .timer-check{
 	visibility: hidden;
@@ -135,7 +111,6 @@ table{
 		width: 14px;
 		height: 14px;
 		box-shadow: 0 0 0 1px $gray-light;
-		// padding-top: 1px;
 	}
 }
 
@@ -218,11 +193,11 @@ table{
 
 .deck{
 	position: relative;
-	font-size: 16px;
+	// font-size: 16px;
 
-	.mega-octicon{
-		font-size: 600%;
-	}
+	// .mega-octicon{
+	// 	font-size: 600%;
+	// }
 
 	#teacher-avatar{
 		img{
@@ -252,15 +227,15 @@ table{
 		background: #ffffff;
 		display: table;
 
-		h2,h3,h4,h5{
-			text-align: center;
-			font-size: 400%;
-		}
+		// h2,h3,h4,h5{
+		// 	text-align: center;
+		// 	font-size: 400%;
+		// }
 
-		h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
-			margin-left: 0;
-			margin-right: 0;
-		}
+		// h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
+		// 	margin-left: 0;
+		// 	margin-right: 0;
+		// }
 
 		pre{
 			width: 80%;
@@ -276,16 +251,6 @@ table{
 			}
 		}
 
-		ul,ol{
-			display: inline-block;
-			text-align: left;
-		}
-		.lab{
-			text-align: left;
-			ul, ol{
-					display: block;
-			}
-		}
 
 		.alignment{
 			display: table-cell;