From 782b971d157b041f223dfd3c2027428f06b1c8c9 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Wed, 18 Apr 2012 17:42:08 -0700 Subject: Sytling for notes not in preso mode. tag FTR --- js/slide-controller.js | 2 + js/slides.js | 9 +- template.html | 29 +++++-- theme/css/default.css | 212 ++++++++++++++++++++++++++++++------------------ theme/sass/_base.scss | 4 + theme/sass/default.scss | 141 ++++++++++++++++++-------------- 6 files changed, 250 insertions(+), 147 deletions(-) diff --git a/js/slide-controller.js b/js/slide-controller.js index 594ee47..f93cd52 100644 --- a/js/slide-controller.js +++ b/js/slide-controller.js @@ -56,6 +56,8 @@ SlideController.prototype.setupDone = function() { evt.initEvent('keydown', true, true); evt.keyCode = 'P'.charCodeAt(0); this.popup.document.dispatchEvent(evt); + // this.popup.document.body.classList.add('with-notes'); + // document.body.classList.add('popup'); }.bind(this), false); } } diff --git a/js/slides.js b/js/slides.js index cd9e646..deaceb8 100644 --- a/js/slides.js +++ b/js/slides.js @@ -80,16 +80,14 @@ SlideDeck.prototype.onDomLoaded_ = function(e) { slide.dataset.totalSlides = this.slides_.length; } - // This is an app! Make all links open in a new tab. - [].forEach.call(document.querySelectorAll('a'), function(a) { - a.target = '_blank'; - }); - // Note: this needs to come after addEventListeners_(), which adds a // 'keydown' listener that this controller relies on. // Also, no need to set this up if we're on mobile. if (!Modernizr.touch) { this.controller = new SlideController(this); + if (this.controller.isPopup) { + document.body.classList.add('popup'); + } } }; @@ -603,6 +601,7 @@ SlideDeck.prototype.updateHash_ = function(dontPush) { window.location.replace(hash); } + // Record GA hit on this slide. window['_gaq'] && window['_gaq'].push(['_trackPageview', document.location.href]); } diff --git a/template.html b/template.html index ae5a81e..9b9e5be 100644 --- a/template.html +++ b/template.html @@ -18,6 +18,7 @@ URL: https://code.google.com/p/io-2012-slides + @@ -91,7 +92,7 @@ URL: https://code.google.com/p/io-2012-slides
  • Subtitle capitalization is title case
    • -
  • Titles and subtitles should never have a period at the end
    • +
  • All links open in new tabs. To change that add a target="_self".
    • @@ -162,8 +163,6 @@ function helloWorld(world) {
  • Point I wanted to make #1
  • Point I wanted to make #2
  • Point I wanted to make #3
    • -
  • Point I wanted to make #3
    • -
  • Point I wanted to make #3
  • Example link in notes.

    • Remember to say this tag line!

    @@ -173,9 +172,27 @@ function helloWorld(world) {

    Slide with Speaker Notes

    - Add ?presentme=true to the URL to enabled presenter mode. - The setting is sticky, so refreshing the slides will persist presenter mode. - Use ?presentme=false to turn off presenter mode. +

    Press 'p' to toggle speaker notes.

    +
    + + + + +
    +

    Presenter Mode

    +
    +
    +

    Add ?presentme=true to the URL to enabled presenter mode. + This setting is sticky, meaning refreshing the page will persist presenter + mode.

    +

    Hit ?presentme=false to disable presenter mode.

     diff --git a/theme/css/default.css b/theme/css/default.css index 92b9dbe..014e1e7 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -98,11 +98,16 @@ body.loaded { } /* line 68, ../sass/_base.scss */ +input, button { + vertical-align: middle; +} + +/* line 72, ../sass/_base.scss */ slides > slide[hidden] { display: none !important; } -/* line 72, ../sass/_base.scss */ +/* line 76, ../sass/_base.scss */ slides { width: 100%; height: 100%; @@ -120,7 +125,7 @@ slides { transform-style: preserve-3d; } -/* line 83, ../sass/_base.scss */ +/* line 87, ../sass/_base.scss */ slides > slide { display: block; position: absolute; @@ -887,26 +892,89 @@ article.smaller q:before, article.smaller q:after { color: #515151; } -/* line 638, ../sass/default.scss */ -.with-notes slides.layout-widescreen slide.next, -.with-notes slides.layout-faux-widescreen slide.next { +/* line 632, ../sass/default.scss */ +.note { + position: absolute; + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + padding: 1em; + background: rgba(0, 0, 0, 0.3); + opacity: 0; + pointer-events: none; + display: -webkit-box !important; + display: -moz-box !important; + display: -ms-box !important; + display: -o-box !important; + display: box !important; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-box-orient: vertical; + box-orient: vertical; + -webkit-box-align: center; + -moz-box-align: center; + -ms-box-align: center; + box-align: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-box-pack: center; + box-pack: center; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transform: translateY(350px); + -moz-transform: translateY(350px); + -ms-transform: translateY(350px); + -o-transform: translateY(350px); + transform: translateY(350px); + -webkit-transition: all 0.4s ease-in-out; + -moz-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; +} +/* line 650, ../sass/default.scss */ +.note > section { + background: #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 0 10px #797979; + -moz-box-shadow: 0 0 10px #797979; + box-shadow: 0 0 10px #797979; + width: 60%; + padding: 2em; +} + +/* line 667, ../sass/default.scss */ +.with-notes.popup slides.layout-widescreen slide.next, +.with-notes.popup slides.layout-faux-widescreen slide.next { -webkit-transform: translate3d(690px, 80px, 0) scale(0.35); -moz-transform: translate3d(690px, 80px, 0) scale(0.35); -ms-transform: translate3d(690px, 80px, 0) scale(0.35); -o-transform: translate3d(690px, 80px, 0) scale(0.35); transform: translate3d(690px, 80px, 0) scale(0.35); } -/* line 641, ../sass/default.scss */ -.with-notes slides.layout-widescreen slide .note, -.with-notes slides.layout-faux-widescreen slide .note { +/* line 670, ../sass/default.scss */ +.with-notes.popup slides.layout-widescreen slide .note, +.with-notes.popup slides.layout-faux-widescreen slide .note { -webkit-transform: translate3d(300px, 800px, 0) scale(1.5); -moz-transform: translate3d(300px, 800px, 0) scale(1.5); -ms-transform: translate3d(300px, 800px, 0) scale(1.5); -o-transform: translate3d(300px, 800px, 0) scale(1.5); transform: translate3d(300px, 800px, 0) scale(1.5); } -/* line 647, ../sass/default.scss */ -.with-notes slide { +/* line 676, ../sass/default.scss */ +.with-notes.popup slide { overflow: visible; background: white; -webkit-transition: none; @@ -921,8 +989,8 @@ article.smaller q:before, article.smaller q:after { -o-transform-origin: 0 0; transform-origin: 0 0; } -/* line 654, ../sass/default.scss */ -.with-notes slide:not(.backdrop) { +/* line 683, ../sass/default.scss */ +.with-notes.popup slide:not(.backdrop) { -webkit-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); -moz-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); -ms-transform: scale(0.6) translate3d(0.5em, 0.5em, 0); @@ -932,8 +1000,8 @@ article.smaller q:before, article.smaller q:after { -moz-box-shadow: 0 0 10px #797979; box-shadow: 0 0 10px #797979; } -/* line 659, ../sass/default.scss */ -.with-notes slide.backdrop { +/* line 688, ../sass/default.scss */ +.with-notes.popup slide.backdrop { background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #4387fd)); background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); @@ -941,8 +1009,8 @@ article.smaller q:before, article.smaller q:after { background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); background-image: radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px); } -/* line 665, ../sass/default.scss */ -.with-notes slide.next { +/* line 694, ../sass/default.scss */ +.with-notes.popup slide.next { -webkit-transform: translate3d(570px, 80px, 0) scale(0.35); -moz-transform: translate3d(570px, 80px, 0) scale(0.35); -ms-transform: translate3d(570px, 80px, 0) scale(0.35); @@ -950,34 +1018,16 @@ article.smaller q:before, article.smaller q:after { transform: translate3d(570px, 80px, 0) scale(0.35); opacity: 1 !important; } -/* line 669, ../sass/default.scss */ -.with-notes slide.next .note { - display: none; -} -/* line 674, ../sass/default.scss */ -.with-notes .note { - opacity: 1; - pointer-events: auto; +/* line 698, ../sass/default.scss */ +.with-notes.popup slide.next .note { + display: none !important; } - -/* line 680, ../sass/default.scss */ -.note { - position: absolute; - z-index: 100; +/* line 704, ../sass/default.scss */ +.with-notes.popup .note { width: 109%; height: 260px; - top: 0; - left: 0; background: #e6e6e6; - pointer-events: none; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + padding: 0; -webkit-box-shadow: 0 0 10px #797979; -moz-box-shadow: 0 0 10px #797979; box-shadow: 0 0 10px #797979; @@ -992,8 +1042,8 @@ article.smaller q:before, article.smaller q:after { -o-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } -/* line 697, ../sass/default.scss */ -.note > section { +/* line 715, ../sass/default.scss */ +.with-notes.popup .note > section { background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -1005,11 +1055,24 @@ article.smaller q:before, article.smaller q:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; overflow: auto; padding: 1em; } +/* line 728, ../sass/default.scss */ +.with-notes .note { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); + pointer-events: auto; +} -/* line 708, ../sass/default.scss */ +/* line 735, ../sass/default.scss */ .source { font-size: 14px; color: #a9a9a9; @@ -1018,11 +1081,6 @@ article.smaller q:before, article.smaller q:after { left: 60px; } -/* line 716, ../sass/default.scss */ -input, button { - vertical-align: middle; -} - /*.centered { text-align: center; } @@ -1034,7 +1092,7 @@ input, button { -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); }*/ -/* line 732, ../sass/default.scss */ +/* line 755, ../sass/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -1043,7 +1101,7 @@ input, button { display: box !important; } -/* line 736, ../sass/default.scss */ +/* line 759, ../sass/default.scss */ .flexbox.vcenter { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1061,7 +1119,7 @@ input, button { width: 100%; } -/* line 742, ../sass/default.scss */ +/* line 765, ../sass/default.scss */ .flexbox.vleft { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1079,7 +1137,7 @@ input, button { width: 100%; } -/* line 748, ../sass/default.scss */ +/* line 771, ../sass/default.scss */ .auto-fadein { -webkit-transition: opacity 0.6s ease-in 1s; -moz-transition: opacity 0.6s ease-in 1s; @@ -1090,7 +1148,7 @@ input, button { } /* Clickable/tappable areas */ -/* line 754, ../sass/default.scss */ +/* line 777, ../sass/default.scss */ .slide-area { z-index: 1000; position: absolute; @@ -1104,59 +1162,59 @@ input, button { margin-top: -350px; } -/* line 771, ../sass/default.scss */ +/* line 794, ../sass/default.scss */ #prev-slide-area { margin-left: -550px; } -/* line 776, ../sass/default.scss */ +/* line 799, ../sass/default.scss */ #next-slide-area { margin-left: 450px; } /* ===== SLIDE CONTENT ===== */ -/* line 784, ../sass/default.scss */ +/* line 807, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 790, ../sass/default.scss */ +/* line 813, ../sass/default.scss */ .segue { padding: 60px 120px; } -/* line 793, ../sass/default.scss */ +/* line 816, ../sass/default.scss */ .segue h2 { color: #e6e6e6; font-size: 60px; } -/* line 797, ../sass/default.scss */ +/* line 820, ../sass/default.scss */ .segue h3 { color: #e6e6e6; line-height: 2.8; } -/* line 801, ../sass/default.scss */ +/* line 824, ../sass/default.scss */ .segue hgroup { position: absolute; bottom: 225px; } -/* line 807, ../sass/default.scss */ +/* line 830, ../sass/default.scss */ .thank-you-slide { background: #4387fd; color: white; } -/* line 811, ../sass/default.scss */ +/* line 834, ../sass/default.scss */ .thank-you-slide h2 { font-size: 60px; color: inherit; } -/* line 816, ../sass/default.scss */ +/* line 839, ../sass/default.scss */ .thank-you-slide article > p { margin-top: 2em; font-size: 20pt; } -/* line 821, ../sass/default.scss */ +/* line 844, ../sass/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1164,7 +1222,7 @@ input, button { line-height: 1.3; } -/* line 829, ../sass/default.scss */ +/* line 852, ../sass/default.scss */ aside.gdbar { height: 97px; width: 215px; @@ -1193,7 +1251,7 @@ aside.gdbar { transition: all 0.5s ease-out 0.5s; /* Better to transition only on background-size, but not sure how to do that with the mixin. */ } -/* line 840, ../sass/default.scss */ +/* line 863, ../sass/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; @@ -1206,7 +1264,7 @@ aside.gdbar.right { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 847, ../sass/default.scss */ +/* line 870, ../sass/default.scss */ aside.gdbar.right img { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); @@ -1214,13 +1272,13 @@ aside.gdbar.right img { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 852, ../sass/default.scss */ +/* line 875, ../sass/default.scss */ aside.gdbar.bottom { top: -moz-initial; top: initial; bottom: 60px; } -/* line 858, ../sass/default.scss */ +/* line 881, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1229,24 +1287,24 @@ aside.gdbar img { margin: 8px 15px; } -/* line 869, ../sass/default.scss */ +/* line 892, ../sass/default.scss */ .title-slide hgroup { bottom: 100px; } -/* line 872, ../sass/default.scss */ +/* line 895, ../sass/default.scss */ .title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 879, ../sass/default.scss */ +/* line 902, ../sass/default.scss */ .title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 885, ../sass/default.scss */ +/* line 908, ../sass/default.scss */ .title-slide hgroup p { font-size: 20px; color: #797979; @@ -1254,11 +1312,11 @@ aside.gdbar img { margin-top: 2em; } -/* line 894, ../sass/default.scss */ +/* line 917, ../sass/default.scss */ .quote { color: #e6e6e6; } -/* line 897, ../sass/default.scss */ +/* line 920, ../sass/default.scss */ .quote .author { font-size: 24px; position: absolute; @@ -1266,12 +1324,12 @@ aside.gdbar img { line-height: 1.4; } -/* line 906, ../sass/default.scss */ +/* line 929, ../sass/default.scss */ [data-config-contact] a { color: white; border-bottom: none; } -/* line 910, ../sass/default.scss */ +/* line 933, ../sass/default.scss */ [data-config-contact] span { width: 115px; display: inline-block; diff --git a/theme/sass/_base.scss b/theme/sass/_base.scss index 265b77e..a3b00a8 100644 --- a/theme/sass/_base.scss +++ b/theme/sass/_base.scss @@ -65,6 +65,10 @@ body { } } +input, button { + vertical-align: middle; +} + slides > slide[hidden] { display: none !important; } diff --git a/theme/sass/default.scss b/theme/sass/default.scss index c0d9eb8..9d65994 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -629,82 +629,109 @@ article.smaller { color: $gray-4; } +.note { + position: absolute; + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + padding: 1em; + background: rgba(0, 0, 0, 0.3); + opacity: 0; + pointer-events: none; + @include flexbox; + @include flex-center-center; + @include border-radius($slide-border-radius); + + @include box-sizing(border-box); + @include transform(translateY($slide-height / 2));@include transition(all 0.4s ease-in-out); + + > section { + background: #fff; + @include border-radius($slide-border-radius); + @include box-shadow(0 0 10px $gray-3); + width: 60%; + padding: 2em; + } +} + // Speaker notes only show the current slide. .with-notes { - slides.layout-widescreen, - slides.layout-faux-widescreen { + &.popup { + + slides.layout-widescreen, + slides.layout-faux-widescreen { + slide { + &.next { + @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35)); + } + .note { + @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5)); + } + } + } + slide { - &.next { - @include transform(translate3d($slide-width-widescreen / 2 + 140, 80px, 0) scale(0.35)); + overflow: visible; + background: white; + @include transition(none); // No slide transition goodies when in presenter mode. + pointer-events: none; + @include transform-origin(0, 0); // For speaker note transition. + + &:not(.backdrop) { + @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0)); + @include box-shadow(0 0 10px $gray-3); } - .note { - @include transform(translate3d(300px, $slide-height + 100, 0) scale(1.5)); + + &.backdrop { + //@include background(linear-gradient($gray-1, white 30%, white 60%, $gray-1)); + @include background-image(radial-gradient(50% 50%, #b1dfff 0%, + $brand-blue 600px)); } - } - } - slide { - overflow: visible; - background: white; - @include transition(none); // No slide transition goodies when in presenter mode. - pointer-events: none; - @include transform-origin(0, 0); // For speaker note transition. + &.next { + @include transform(translate3d($slide-width / 2 + 120, 80px, 0) scale(0.35)); + opacity: 1 !important; - &:not(.backdrop) { - @include transform(scale(0.6) translate3d(0.5em, 0.5em, 0)); - @include box-shadow(0 0 10px $gray-3); + .note { + display: none !important; // Prevents seeing notes if we go to previous slide. + } + } } - &.backdrop { - //@include background(linear-gradient($gray-1, white 30%, white 60%, $gray-1)); - @include background-image(radial-gradient(50% 50%, #b1dfff 0%, - $brand-blue 600px)); - } + .note { + width: 109%; + height: $slide-height / 2 - 90; + background: $gray-1; + padding: 0; - &.next { - @include transform(translate3d($slide-width / 2 + 120, 80px, 0) scale(0.35)); - opacity: 1 !important; + @include box-shadow(0 0 10px $gray-3); - .note { - display: none; // Prevents seeing notes if we go to previous slide. + @include transform(translate3d(250px, $slide-height + 100, 0) scale(1.5)); + @include transition(opacity 400ms ease-in-out); + + > section { + background: #fff; + @include border-radius($slide-border-radius); + height: 100%; + width: 100%; + @include box-sizing(border-box); + @include box-shadow(none); + overflow: auto; + padding: 1em; } } } + .note { opacity: 1; + @include transform(translateY(0)); pointer-events: auto; // Allow people to do things like open links embedded in the speaker notes. } } -.note { - position: absolute; - z-index: 100; - width: 109%; - height: $slide-height / 2 - 90; - top: 0; - left: 0; - background: $gray-1; - pointer-events: none; - @include border-radius($slide-border-radius); - - @include box-sizing(border-box); - @include box-shadow(0 0 10px $gray-3); - - @include transform(translate3d(250px, $slide-height + 100, 0) scale(1.5)); - @include transition(opacity 400ms ease-in-out); - - > section { - background: #fff; - @include border-radius($slide-border-radius); - height: 100%; - width: 100%; - @include box-sizing(border-box); - overflow: auto; - padding: 1em; - } -} - .source { font-size: 14px; color: $gray-2; @@ -713,10 +740,6 @@ article.smaller { left: $slide-left-right-padding; } -input, button { - vertical-align: middle; -} - /*.centered { text-align: center; } -- cgit v1.2.3