From ec8b7af3a3364538a8849b389eba5bf449497957 Mon Sep 17 00:00:00 2001 From: jordanmccullough Date: Wed, 1 Oct 2014 23:14:10 -0600 Subject: [PATCH 1/5] Rough draft of slide-only mode feature --- _javascript/curriculum.js | 13 ++++++++++++- _layouts/curriculum.html | 13 +++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/_javascript/curriculum.js b/_javascript/curriculum.js index 2de3b9cbf..e35f88d8f 100644 --- a/_javascript/curriculum.js +++ b/_javascript/curriculum.js @@ -2,6 +2,17 @@ $(function(){ // Global-ish vars var timeLeftInterval = 0; + // Slide only toggle on/off + console.log("Checked or not:" + $("#slide-only-toggle").attr("checked") ); + + $("#slide-only-toggle").change(function(){ + var checkState = $("#slide-only-toggle").attr("checked"); + + $(".materials > *").toggleClass("hidden"); + $(".slide").toggleClass("hidden"); + // $(".slide").toggleClass("hidden"); + }); + // WARNING This only anticipates one querystring value var urlSearch = window.location.search, @@ -81,7 +92,7 @@ $(function(){ // Startup slide scrollsnap watching $(document).scrollsnap({ snaps: '.slide', - proximity: 200 + proximity: 160 }); function updateSlideSize(){ diff --git a/_layouts/curriculum.html b/_layouts/curriculum.html index 646539ab7..3e56c0e62 100644 --- a/_layouts/curriculum.html +++ b/_layouts/curriculum.html @@ -24,8 +24,11 @@
+ + +
-
+
@@ -76,8 +72,14 @@
+
    +
  • + +
diff --git a/_stylesheets/curriculum.css b/_stylesheets/curriculum.css index 8a482b8f5..5dd13fd14 100644 --- a/_stylesheets/curriculum.css +++ b/_stylesheets/curriculum.css @@ -19,6 +19,38 @@ .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: #454545; } + .slide-only-check:checked + label:before { + content: '\f03a'; + color: white; + background-color: #5a5a5a; + box-shadow: 0 0 0 2px #5a5a5a; } + +.slides-only-label { + color: rgba(69, 69, 69, 0.5); } + .slides-only-label:before { + content: '\f03a'; + font: normal normal normal 16px/1 octicons; + text-align: center; + display: inline-block; + border-radius: 50%; + color: rgba(69, 69, 69, 0); + -webkit-transition: all 180ms; + margin-right: 5px; + width: 1em; + height: 1em; + box-shadow: 0 0 0 2px #f3f3f3; } + .timer-wrapper { background: rgba(255, 255, 255, 0.93); height: 100%; diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss index 2a3f7f9ad..10fef768f 100644 --- a/_stylesheets/curriculum.scss +++ b/_stylesheets/curriculum.scss @@ -42,7 +42,47 @@ $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: $mono-dark; + + &:before{ + content: '\f03a'; + color: rgba($mono-bright, 1); + background-color: $mono-medium; + box-shadow: 0 0 0 2px $mono-medium; + } + } +} +.slides-only-label{ + color: rgba($mono-dark, .5); + + &:before{ + content: '\f03a'; + font: normal normal normal 16px/1 octicons; + text-align: center; + display: inline-block; + border-radius: 50%; + color: rgba($mono-dark, 0); + -webkit-transition: all 180ms; + margin-right: 5px; + width: 1em; + height: 1em; + box-shadow: 0 0 0 2px $mono-light; + } } .timer-wrapper{ From b44a1757786e3145c5200e01db97a1faa4bd6a70 Mon Sep 17 00:00:00 2001 From: jordanmccullough Date: Thu, 2 Oct 2014 11:44:01 -0600 Subject: [PATCH 3/5] Final color adjustment to checkbox override --- _stylesheets/curriculum.css | 23 +++++++++++++++-------- _stylesheets/curriculum.scss | 21 ++++++++++++++------- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/_stylesheets/curriculum.css b/_stylesheets/curriculum.css index 5dd13fd14..9dd5b6637 100644 --- a/_stylesheets/curriculum.css +++ b/_stylesheets/curriculum.css @@ -29,27 +29,34 @@ height: 0; width: 0; } .slide-only-check:checked + label { - color: #454545; } + color: #1875c6; } .slide-only-check:checked + label:before { content: '\f03a'; color: white; - background-color: #5a5a5a; - box-shadow: 0 0 0 2px #5a5a5a; } + 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); } + 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; - margin-right: 5px; - width: 1em; - height: 1em; - box-shadow: 0 0 0 2px #f3f3f3; } + 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); diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss index 10fef768f..074007418 100644 --- a/_stylesheets/curriculum.scss +++ b/_stylesheets/curriculum.scss @@ -56,32 +56,39 @@ $mono-dark: #454545; width: 0; &:checked + label{ - color: $mono-dark; + color: $color-dark; &:before{ content: '\f03a'; color: rgba($mono-bright, 1); - background-color: $mono-medium; - box-shadow: 0 0 0 2px $mono-medium; + 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; - margin-right: 5px; - width: 1em; - height: 1em; - box-shadow: 0 0 0 2px $mono-light; + padding-left: 5px; + width: 18px; + height: 18px; + box-shadow: 0 0 0 2px rgba($mono-dark, .5); + line-height: .2em; } } From 57c1c50838d95ea5dfe89725ae5a22166f5de2cc Mon Sep 17 00:00:00 2001 From: jordanmccullough Date: Thu, 2 Oct 2014 21:53:56 -0600 Subject: [PATCH 4/5] Remove slide wrapper/styling on lab include With the slide toggle feature and spacebar browsing method of slides, precluding the Lab sections from appear permits a cleaner slide deck style presentation walkthrough. --- _includes/lab | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/_includes/lab b/_includes/lab index c08177cda..9fe5e95de 100644 --- a/_includes/lab +++ b/_includes/lab @@ -1,11 +1,6 @@ -
-
-
-
Lab
-
- {{ lab | markdownify }} -
- -
+
+
Lab
+
+ {{ lab | markdownify }}
From 461f9ed25261305b435650ddc6f8ea357dcb0aae Mon Sep 17 00:00:00 2001 From: jordanmccullough Date: Thu, 2 Oct 2014 21:54:27 -0600 Subject: [PATCH 5/5] Clean up curriculum JS comments, deprecated lines --- _javascript/curriculum.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/_javascript/curriculum.js b/_javascript/curriculum.js index e35f88d8f..0492a9638 100644 --- a/_javascript/curriculum.js +++ b/_javascript/curriculum.js @@ -1,16 +1,10 @@ $(function(){ - // Global-ish vars var timeLeftInterval = 0; - // Slide only toggle on/off - console.log("Checked or not:" + $("#slide-only-toggle").attr("checked") ); - $("#slide-only-toggle").change(function(){ var checkState = $("#slide-only-toggle").attr("checked"); - $(".materials > *").toggleClass("hidden"); $(".slide").toggleClass("hidden"); - // $(".slide").toggleClass("hidden"); });