Skip to content

Commit 9e4a959

Browse files
author
jordanmccullough
committed
Update and fix timer, timer toggle control
1 parent 6392115 commit 9e4a959

File tree

4 files changed

+184
-117
lines changed

4 files changed

+184
-117
lines changed

‎_javascript/curriculum.js

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,21 +122,26 @@ $(function(){
122122
}
123123

124124
//Time toggle keybinding
125-
$(".timer-toggle").click(function(){
125+
$(".timer-label").click(function(){
126126
$(".timer-wrapper").toggleClass("fade-out");
127+
$(".timer-amount").show();
128+
resetTimer();
129+
});
130+
$(".timer-exit").click(function(){
131+
$(".timer-wrapper").toggleClass("fade-out");
132+
$("#timer-check").removeAttr("checked");
133+
// $(".timer-amount").();
127134
resetTimer();
128-
129-
if($(".timer-wrapper").hasClass("fade-out")){
130-
$(".timer-amount").toggle();
131-
}
132135
});
133136
$("#start-stop").click(function(){
134137
var timeLeftDisplay = $("#time-left")
135138
var min = $("#minutes").attr("value");
136139
var duration = min*60;
137140

138-
$(".timer-amount").toggle();
139141
resetTimer();
142+
143+
$(".timer-amount").hide();
144+
140145
timeLeftInterval = setInterval(function(){
141146
timeLeftDisplay.html( Math.floor((duration)/60) + ":" + (duration%60 < 10 ? "0"+duration%60:duration%60) );
142147
duration = --duration;
@@ -151,6 +156,7 @@ $(function(){
151156
$("#time-left").html("");
152157
}
153158

159+
154160
// Table of Contents header parsing and builder
155161
function buildToc(){
156162
var headings = $(".curriculum h2"),

‎_layouts/curriculum.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55

66
<div class="timer-wrapper fade-out">
77
<div class="timer">
8-
<div class="timer-toggle">
9-
<span class="octicon octicon-clock"></span>
10-
</div>
8+
<div class="timer-exit"><span class="octicon octicon-x"></span></div>
119
<div class="timer-amount">
1210
<input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
1311
<!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
@@ -20,9 +18,6 @@
2018
</div>
2119

2220
<div class="container curriculum">
23-
24-
25-
2621
<div class="row">
2722
<div class="col-md-9 materials">
2823
<div id="teacher" class="hidden">
@@ -81,6 +76,10 @@
8176
<input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
8277
<label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
8378
</li>
79+
<li>
80+
<input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
81+
<label for="timer-check" class="timer-label">Timer</label>
82+
</li>
8483
</ul>
8584
</div>
8685
</div>

‎_stylesheets/curriculum.css

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,38 @@
2424
margin-top: 5px;
2525
padding-top: 10px; }
2626

27+
.timer-check {
28+
visibility: hidden;
29+
height: 0;
30+
width: 0; }
31+
.timer-check:checked + label {
32+
color: #1875c6; }
33+
.timer-check:checked + label:before {
34+
content: '\f046';
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+
.timer-label {
42+
line-height: 18px;
43+
padding-left: 25px; }
44+
.timer-label:before {
45+
content: '\f046';
46+
font: normal normal normal 16px/1 octicons;
47+
text-align: center;
48+
position: absolute;
49+
left: 0;
50+
display: inline-block;
51+
border-radius: 50%;
52+
color: rgba(69, 69, 69, 0);
53+
-webkit-transition: all 180ms;
54+
width: 18px;
55+
height: 18px;
56+
box-shadow: 0 0 0 2px #454545;
57+
padding-top: 1px; }
58+
2759
.slide-only-check {
2860
visibility: hidden;
2961
height: 0;
@@ -39,7 +71,6 @@
3971
line-height: 1em; }
4072

4173
.slides-only-label {
42-
color: rgba(69, 69, 69, 0.5);
4374
line-height: 18px;
4475
padding-left: 25px; }
4576
.slides-only-label:before {
@@ -55,7 +86,7 @@
5586
padding-left: 5px;
5687
width: 18px;
5788
height: 18px;
58-
box-shadow: 0 0 0 2px rgba(69, 69, 69, 0.5);
89+
box-shadow: 0 0 0 2px #454545;
5990
line-height: .2em; }
6091

6192
.timer-wrapper {
@@ -66,8 +97,6 @@
6697
z-index: 1000;
6798
top: 0;
6899
left: 0; }
69-
.timer-wrapper .octicon {
70-
font-size: 50px; }
71100
.timer-wrapper .timer {
72101
transition: all 300ms;
73102
position: relative;

‎_stylesheets/curriculum.scss

Lines changed: 134 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,32 @@ $mono-dark: #454545;
1616

1717

1818
.fade-out{
19-
background: none !important;
20-
margin-left: 100%;
21-
position: fixed;
22-
left: -35px !important;
23-
24-
.octicon{
25-
font-size: 14px !important;
26-
}
27-
28-
&.timer-wrapper{
29-
background-color: none !important;
30-
}
31-
32-
.timer{
33-
margin: 0 0 !important;
34-
}
35-
36-
.timer-toggle{
37-
padding-left: 0px !important;
38-
opacity: .3;
39-
text-align: left !important;
40-
}
41-
42-
.timer-amount{
43-
visibility: hidden;
44-
}
19+
background: none !important;
20+
margin-left: 100%;
21+
position: fixed;
22+
left: -35px !important;
23+
24+
.octicon{
25+
font-size: 14px !important;
26+
}
27+
28+
&.timer-wrapper{
29+
background-color: none !important;
30+
}
31+
32+
.timer{
33+
margin: 0 0 !important;
34+
}
35+
36+
.timer-toggle{
37+
padding-left: 0px !important;
38+
opacity: .3;
39+
text-align: left !important;
40+
}
41+
42+
.timer-amount{
43+
visibility: hidden;
44+
}
4545
}
4646

4747
.display-controls{
@@ -50,87 +50,120 @@ $mono-dark: #454545;
5050
padding-top: 10px;
5151
}
5252

53-
.slide-only-check{
54-
visibility: hidden;
55-
height: 0;
56-
width: 0;
57-
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-
}
53+
.timer-check{
54+
visibility: hidden;
55+
height: 0;
56+
width: 0;
57+
58+
&:checked + label{
59+
color: $color-dark;
60+
61+
&:before{
62+
content: '\f046';
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+
.timer-label{
72+
line-height: 18px;
73+
padding-left: 25px;
74+
75+
&:before{
76+
content: '\f046';
77+
font: normal normal normal 16px/1 octicons;
78+
text-align: center;
79+
position: absolute;
80+
left: 0;
81+
display: inline-block;
82+
border-radius: 50%;
83+
color: rgba($mono-dark, 0);
84+
-webkit-transition: all 180ms;
85+
width: 18px;
86+
height: 18px;
87+
box-shadow: 0 0 0 2px $mono-dark;
88+
padding-top: 1px;
89+
}
7090
}
7191

92+
.slide-only-check{
93+
visibility: hidden;
94+
height: 0;
95+
width: 0;
96+
97+
&:checked + label{
98+
color: $color-dark;
99+
100+
&:before{
101+
content: '\f03a';
102+
color: rgba($mono-bright, 1);
103+
background-color: $color-dark;
104+
box-shadow: 0 0 0 2px $color-dark;
105+
padding-left: 0px;
106+
line-height: 1em;
107+
}
108+
}
109+
}
72110
.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-
}
111+
line-height: 18px;
112+
padding-left: 25px;
113+
114+
&:before{
115+
content: '\f03a';
116+
font: normal normal normal 16px/1 octicons;
117+
text-align: center;
118+
position: absolute;
119+
left: 0;
120+
display: inline-block;
121+
border-radius: 50%;
122+
color: rgba($mono-dark, 0);
123+
-webkit-transition: all 180ms;
124+
padding-left: 5px;
125+
width: 18px;
126+
height: 18px;
127+
box-shadow: 0 0 0 2px $mono-dark;
128+
line-height: .2em;
129+
}
93130
}
94131

95132
.timer-wrapper{
96-
background: rgba(255,255,255,.93);
97-
height: 100%;
98-
width: 100%;
99-
position: fixed;
100-
z-index: 1000;
101-
top: 0;
102-
left: 0;
103-
104-
.octicon{
105-
font-size: 50px;
106-
}
107-
108-
.timer{
109-
transition: all 300ms;
110-
position: relative;
111-
margin: 10% auto;
112-
border-radius: 10px;
113-
height: 150px;
114-
width: 150px;
115-
display: block;
116-
text-align: center;
117-
118-
.timer-toggle{
119-
width: 100%;
120-
border-top-left-radius: 5px;
121-
border-bottom-left-radius: 5px;
122-
text-align: center;
123-
}
124-
125-
.timer-content{
126-
text-align: center;
127-
}
128-
129-
.time-left{
130-
font-size: 72px;
131-
display: block;
132-
}
133-
}
133+
background: rgba(255,255,255,.93);
134+
height: 100%;
135+
width: 100%;
136+
position: fixed;
137+
z-index: 1000;
138+
top: 0;
139+
left: 0;
140+
141+
.timer{
142+
transition: all 300ms;
143+
position: relative;
144+
margin: 10% auto;
145+
border-radius: 10px;
146+
height: 150px;
147+
width: 150px;
148+
display: block;
149+
text-align: center;
150+
151+
.timer-toggle{
152+
width: 100%;
153+
border-top-left-radius: 5px;
154+
border-bottom-left-radius: 5px;
155+
text-align: center;
156+
}
157+
158+
.timer-content{
159+
text-align: center;
160+
}
161+
162+
.time-left{
163+
font-size: 72px;
164+
display: block;
165+
}
166+
}
134167
}
135168

136169
.nav-list>li>a{

0 commit comments

Comments
 (0)