Skip to content

Commit 24abf22

Browse files
author
Jordan McCullough
committed
Merge pull request #242 from github/slide-only-toggle-feature
Slide-only toggle mode for curriculum
2 parents 4660ba5 + 461f9ed commit 24abf22

File tree

5 files changed

+114
-17
lines changed

5 files changed

+114
-17
lines changed

‎_includes/lab‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
<div class="slide">
2-
<div class="alignment">
3-
<div class="panel panel-primary lab">
4-
<div class="panel-heading">Lab</div>
5-
<div class="panel-body">
6-
{{ lab | markdownify }}
7-
</div>
8-
<!--<div class="panel-footer">Footer</div>-->
9-
</div>
1+
<div class="panel panel-primary lab">
2+
<div class="panel-heading">Lab</div>
3+
<div class="panel-body">
4+
{{ lab | markdownify }}
105
</div>
116
</div>

‎_javascript/curriculum.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
$(function(){
2-
// Global-ish vars
32
var timeLeftInterval = 0;
43

4+
$("#slide-only-toggle").change(function(){
5+
var checkState = $("#slide-only-toggle").attr("checked");
6+
$(".materials > *").toggleClass("hidden");
7+
$(".slide").toggleClass("hidden");
8+
});
9+
510

611
// WARNING This only anticipates one querystring value
712
var urlSearch = window.location.search,
@@ -81,7 +86,7 @@ $(function(){
8186
// Startup slide scrollsnap watching
8287
$(document).scrollsnap({
8388
snaps: '.slide',
84-
proximity: 200
89+
proximity: 160
8590
});
8691

8792
function updateSlideSize(){

‎_layouts/curriculum.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,23 @@
88
<div class="timer-toggle">
99
<span class="octicon octicon-clock"></span>
1010
</div>
11-
1211
<div class="timer-amount">
1312
<input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
1413
<!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
1514
<button id="start-stop" type="submit" class="btn btn-default">Start</button>
1615
</div>
17-
1816
<div class="timer-content">
1917
<span class="time-left" id="time-left"></span>
2018
</div>
21-
22-
2319
</div>
2420
</div>
2521

2622
<div class="container curriculum">
23+
24+
25+
2726
<div class="row">
28-
<div class="col-md-9">
27+
<div class="col-md-9 materials">
2928
<div id="teacher" class="hidden">
3029
<div class="alignment">
3130
<div id="teacher-avatar" class=""></div>
@@ -69,8 +68,20 @@
6968
</div>
7069
<div class="col-md-3">
7170
<div id="toc-wrapper">
71+
7272
<div id="toc" data-spy="affix" data-offset-top="145">
73-
<ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist"></ul>
73+
<ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
74+
<li>
75+
76+
77+
</li>
78+
</ul>
79+
<ul class="nav display-controls">
80+
<li>
81+
<input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
82+
<label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
83+
</li>
84+
</ul>
7485
</div>
7586
</div>
7687
</div>

‎_stylesheets/curriculum.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,45 @@
1919
.fade-out .timer-amount {
2020
visibility: hidden; }
2121

22+
.display-controls {
23+
border-top: solid 2px #f3f3f3;
24+
margin-top: 5px;
25+
padding-top: 10px; }
26+
27+
.slide-only-check {
28+
visibility: hidden;
29+
height: 0;
30+
width: 0; }
31+
.slide-only-check:checked + label {
32+
color: #1875c6; }
33+
.slide-only-check:checked + label:before {
34+
content: '\f03a';
35+
color: white;
36+
background-color: #1875c6;
37+
box-shadow: 0 0 0 2px #1875c6;
38+
padding-left: 0px;
39+
line-height: 1em; }
40+
41+
.slides-only-label {
42+
color: rgba(69, 69, 69, 0.5);
43+
line-height: 18px;
44+
padding-left: 25px; }
45+
.slides-only-label:before {
46+
content: '\f03a';
47+
font: normal normal normal 16px/1 octicons;
48+
text-align: center;
49+
position: absolute;
50+
left: 0;
51+
display: inline-block;
52+
border-radius: 50%;
53+
color: rgba(69, 69, 69, 0);
54+
-webkit-transition: all 180ms;
55+
padding-left: 5px;
56+
width: 18px;
57+
height: 18px;
58+
box-shadow: 0 0 0 2px rgba(69, 69, 69, 0.5);
59+
line-height: .2em; }
60+
2261
.timer-wrapper {
2362
background: rgba(255, 255, 255, 0.93);
2463
height: 100%;

‎_stylesheets/curriculum.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,54 @@ $mono-dark: #454545;
4242
.timer-amount{
4343
visibility: hidden;
4444
}
45+
}
46+
47+
.display-controls{
48+
border-top: solid 2px $mono-light;
49+
margin-top: 5px;
50+
padding-top: 10px;
51+
}
52+
53+
.slide-only-check{
54+
visibility: hidden;
55+
height: 0;
56+
width: 0;
4557

58+
&:checked + label{
59+
color: $color-dark;
60+
61+
&:before{
62+
content: '\f03a';
63+
color: rgba($mono-bright, 1);
64+
background-color: $color-dark;
65+
box-shadow: 0 0 0 2px $color-dark;
66+
padding-left: 0px;
67+
line-height: 1em;
68+
}
69+
}
70+
}
71+
72+
.slides-only-label{
73+
color: rgba($mono-dark, .5);
74+
line-height: 18px;
75+
padding-left: 25px;
76+
77+
&:before{
78+
content: '\f03a';
79+
font: normal normal normal 16px/1 octicons;
80+
text-align: center;
81+
position: absolute;
82+
left: 0;
83+
display: inline-block;
84+
border-radius: 50%;
85+
color: rgba($mono-dark, 0);
86+
-webkit-transition: all 180ms;
87+
padding-left: 5px;
88+
width: 18px;
89+
height: 18px;
90+
box-shadow: 0 0 0 2px rgba($mono-dark, .5);
91+
line-height: .2em;
92+
}
4693
}
4794

4895
.timer-wrapper{

0 commit comments

Comments
 (0)