Merge pull request #242 from github/slide-only-toggle-feature

Slide-only toggle mode for curriculum

Author: Jordan McCullough

_includes/lab

@@ -1,11 +1,6 @@
-<div class="slide">
-  <div class="alignment">
-    <div class="panel panel-primary lab">
-      <div class="panel-heading">Lab</div>
-      <div class="panel-body">
-        {{ lab | markdownify }}
-      </div>
-      <!--<div class="panel-footer">Footer</div>-->
-    </div>
+<div class="panel panel-primary lab">
+  <div class="panel-heading">Lab</div>
+  <div class="panel-body">
+    {{ lab | markdownify }}
   </div>
 </div>

_javascript/curriculum.js

@@ -1,7 +1,12 @@
 $(function(){
-	// Global-ish vars
 	var timeLeftInterval = 0;
 
+	$("#slide-only-toggle").change(function(){
+		var checkState = $("#slide-only-toggle").attr("checked");
+		$(".materials > *").toggleClass("hidden");
+		$(".slide").toggleClass("hidden");
+	});
+
 
 	// WARNING This only anticipates one querystring value
 	var urlSearch = window.location.search,
@@ -81,7 +86,7 @@ $(function(){
 	// Startup slide scrollsnap watching
 	$(document).scrollsnap({
 		snaps: '.slide',
-		proximity: 200
+		proximity: 160
 	});
 
 	function updateSlideSize(){

_layouts/curriculum.html

@@ -8,24 +8,23 @@
     <div class="timer-toggle">
       <span class="octicon octicon-clock"></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>
     </div>
-
-
   </div>
 </div>
 
 <div class="container curriculum">
+
+
+
   <div class="row">
-    <div class="col-md-9">
+    <div class="col-md-9 materials">
       <div id="teacher" class="hidden">
         <div class="alignment">
           <div id="teacher-avatar" class=""></div>
@@ -69,8 +68,20 @@
     </div>
     <div class="col-md-3">
       <div id="toc-wrapper">
+
         <div id="toc" data-spy="affix" data-offset-top="145">
-          <ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist"></ul>
+          <ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
+            <li>
+
+
+            </li>
+          </ul>
+          <ul class="nav display-controls">
+            <li>
+              <input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
+              <label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

_stylesheets/curriculum.css

@@ -19,6 +19,45 @@
   .fade-out .timer-amount {
     visibility: hidden; }
 
+.display-controls {
+  border-top: solid 2px #f3f3f3;
+  margin-top: 5px;
+  padding-top: 10px; }
+
+.slide-only-check {
+  visibility: hidden;
+  height: 0;
+  width: 0; }
+  .slide-only-check:checked + label {
+    color: #1875c6; }
+    .slide-only-check:checked + label:before {
+      content: '\f03a';
+      color: white;
+      background-color: #1875c6;
+      box-shadow: 0 0 0 2px #1875c6;
+      padding-left: 0px;
+      line-height: 1em; }
+
+.slides-only-label {
+  color: rgba(69, 69, 69, 0.5);
+  line-height: 18px;
+  padding-left: 25px; }
+  .slides-only-label:before {
+    content: '\f03a';
+    font: normal normal normal 16px/1 octicons;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    display: inline-block;
+    border-radius: 50%;
+    color: rgba(69, 69, 69, 0);
+    -webkit-transition: all 180ms;
+    padding-left: 5px;
+    width: 18px;
+    height: 18px;
+    box-shadow: 0 0 0 2px rgba(69, 69, 69, 0.5);
+    line-height: .2em; }
+
 .timer-wrapper {
   background: rgba(255, 255, 255, 0.93);
   height: 100%;

_stylesheets/curriculum.scss

@@ -42,7 +42,54 @@ $mono-dark: #454545;
   .timer-amount{
     visibility: hidden;
   }
+}
+
+.display-controls{
+  border-top: solid 2px $mono-light;
+  margin-top: 5px;
+  padding-top: 10px;
+}
+
+.slide-only-check{
+  visibility: hidden;
+  height: 0;
+  width: 0;
 
+  &:checked + label{
+    color: $color-dark;
+
+    &:before{
+      content: '\f03a';
+      color: rgba($mono-bright, 1);
+      background-color: $color-dark;
+      box-shadow: 0 0 0 2px $color-dark;
+      padding-left: 0px;
+      line-height: 1em;
+    }
+  }
+}
+
+.slides-only-label{
+  color: rgba($mono-dark, .5);
+  line-height: 18px;
+  padding-left: 25px;
+
+  &:before{
+    content: '\f03a';
+    font: normal normal normal 16px/1 octicons;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    display: inline-block;
+    border-radius: 50%;
+    color: rgba($mono-dark, 0);
+    -webkit-transition: all 180ms;
+    padding-left: 5px;
+    width: 18px;
+    height: 18px;
+    box-shadow: 0 0 0 2px rgba($mono-dark, .5);
+    line-height: .2em;
+  }
 }
 
 .timer-wrapper{