aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Bidelman2012-04-18 17:42:08 -0700
committerEric Bidelman2012-04-18 17:43:20 -0700
commit782b971d157b041f223dfd3c2027428f06b1c8c9 (patch)
tree8524f5e77608fdb3aba88580e48cf7091233da8c
parenta8e534158525f69db7276cded5f79e6fb6819754 (diff)
downloadio-slides-remote-782b971d157b041f223dfd3c2027428f06b1c8c9.tar.gz
Sytling for notes not in preso mode. <base> tag FTR
Diffstat
-rw-r--r--js/slide-controller.js2
-rw-r--r--js/slides.js9
-rw-r--r--template.html29
-rw-r--r--theme/css/default.css212
-rw-r--r--theme/sass/_base.scss4
-rw-r--r--theme/sass/default.scss141
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() {
56 evt.initEvent('keydown', true, true); 56 evt.initEvent('keydown', true, true);
57 evt.keyCode = 'P'.charCodeAt(0); 57 evt.keyCode = 'P'.charCodeAt(0);
58 this.popup.document.dispatchEvent(evt); 58 this.popup.document.dispatchEvent(evt);
59 // this.popup.document.body.classList.add('with-notes');
60 // document.body.classList.add('popup');
59 }.bind(this), false); 61 }.bind(this), false);
60 } 62 }
61 } 63 }
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) {
80 slide.dataset.totalSlides = this.slides_.length; 80 slide.dataset.totalSlides = this.slides_.length;
81 } 81 }
82 82
83 // This is an app! Make all links open in a new tab.
84 [].forEach.call(document.querySelectorAll('a'), function(a) {
85 a.target = '_blank';
86 });
87
88 // Note: this needs to come after addEventListeners_(), which adds a 83 // Note: this needs to come after addEventListeners_(), which adds a
89 // 'keydown' listener that this controller relies on. 84 // 'keydown' listener that this controller relies on.
90 // Also, no need to set this up if we're on mobile. 85 // Also, no need to set this up if we're on mobile.
91 if (!Modernizr.touch) { 86 if (!Modernizr.touch) {
92 this.controller = new SlideController(this); 87 this.controller = new SlideController(this);
88 if (this.controller.isPopup) {
89 document.body.classList.add('popup');
90 }
93 } 91 }
94}; 92};
95 93
@@ -603,6 +601,7 @@ SlideDeck.prototype.updateHash_ = function(dontPush) {
603 window.location.replace(hash); 601 window.location.replace(hash);
604 } 602 }
605 603
604 // Record GA hit on this slide.
606 window['_gaq'] && window['_gaq'].push(['_trackPageview', 605 window['_gaq'] && window['_gaq'].push(['_trackPageview',
607 document.location.href]); 606 document.location.href]);
608 } 607 }
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
18 <!--<meta name="viewport" content="initial-scale=0.4">--> 18 <!--<meta name="viewport" content="initial-scale=0.4">-->
19 <link rel="stylesheet" media="all" href="theme/css/default.css"> 19 <link rel="stylesheet" media="all" href="theme/css/default.css">
20 <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css"> 20 <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css">
21 <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->
21</head> 22</head>
22<body> 23<body>
23 24
@@ -91,7 +92,7 @@ URL: https://code.google.com/p/io-2012-slides
91 </ul> 92 </ul>
92 </li> 93 </li>
93 <li>Subtitle capitalization is title case</li> 94 <li>Subtitle capitalization is title case</li>
94 <li>Titles and <a href="http://google.com">subtitles</a> should never have a period at the end</li> 95 <li>All <a href="http://google.com">links</a> open in new tabs. To change that add a <code>target="_self"</code>.</li>
95 </ul> 96 </ul>
96 </article> 97 </article>
97 </slide> 98 </slide>
@@ -162,8 +163,6 @@ function helloWorld(world) {
162 <li>Point I wanted to make #1</li> 163 <li>Point I wanted to make #1</li>
163 <li>Point I wanted to make #2</li> 164 <li>Point I wanted to make #2</li>
164 <li>Point I wanted to make #3</li> 165 <li>Point I wanted to make #3</li>
165 <li>Point I wanted to make #3</li>
166 <li>Point I wanted to make #3</li>
167 <li>Example <a href="#">link</a> in notes.</li> 166 <li>Example <a href="#">link</a> in notes.</li>
168 </ul> 167 </ul>
169 <p><b>Remember to say this tag line!</b></p> 168 <p><b>Remember to say this tag line!</b></p>
@@ -173,9 +172,27 @@ function helloWorld(world) {
173 <h2>Slide with Speaker Notes</h2> 172 <h2>Slide with Speaker Notes</h2>
174 </hgroup> 173 </hgroup>
175 <article> 174 <article>
176 Add <code>?presentme=true</code> to the URL to enabled presenter mode. 175 <p>Press 'p' to toggle speaker notes.</p>
177 The setting is sticky, so refreshing the slides will persist presenter mode. 176 </article>
178 Use <code>?presentme=false</code> to turn off presenter mode. 177 </slide>
178
179 <slide>
180 <aside class="note">
181 <section>
182 <ul>
183 <li>See this amazing link: <a href="#">link</a>.</li>
184 </ul>
185 <p><b>Remember to say this tag line!</b></p>
186 </section>
187 </aside>
188 <hgroup>
189 <h2>Presenter Mode</h2>
190 </hgroup>
191 <article>
192 <p>Add <code><a href="?presentme=true" target="_self">?presentme=true</a></code> to the URL to enabled presenter mode.
193 This setting is sticky, meaning refreshing the page will persist presenter
194 mode.</p>
195 <p>Hit <code><a href="?presentme=false" target="_self">?presentme=false</a></code> to disable presenter mode.</p>
179 </article> 196 </article>
180 </slide> 197 </slide>
181 198
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 {
98} 98}
99 99
100/* line 68, ../sass/_base.scss */ 100/* line 68, ../sass/_base.scss */
101input, button {
102 vertical-align: middle;
103}
104
105/* line 72, ../sass/_base.scss */
101slides > slide[hidden] { 106slides > slide[hidden] {
102 display: none !important; 107 display: none !important;
103} 108}
104 109
105/* line 72, ../sass/_base.scss */ 110/* line 76, ../sass/_base.scss */
106slides { 111slides {
107 width: 100%; 112 width: 100%;
108 height: 100%; 113 height: 100%;
@@ -120,7 +125,7 @@ slides {
120 transform-style: preserve-3d; 125 transform-style: preserve-3d;
121} 126}
122 127
123/* line 83, ../sass/_base.scss */ 128/* line 87, ../sass/_base.scss */
124slides > slide { 129slides > slide {
125 display: block; 130 display: block;
126 position: absolute; 131 position: absolute;
@@ -887,26 +892,89 @@ article.smaller q:before, article.smaller q:after {
887 color: #515151; 892 color: #515151;
888} 893}
889 894
890/* line 638, ../sass/default.scss */ 895/* line 632, ../sass/default.scss */
891.with-notes slides.layout-widescreen slide.next, 896.note {
892.with-notes slides.layout-faux-widescreen slide.next { 897 position: absolute;
898 z-index: 100;
899 width: 100%;
900 height: 100%;
901 top: 0;
902 left: 0;
903 padding: 1em;
904 background: rgba(0, 0, 0, 0.3);
905 opacity: 0;
906 pointer-events: none;
907 display: -webkit-box !important;
908 display: -moz-box !important;
909 display: -ms-box !important;
910 display: -o-box !important;
911 display: box !important;
912 -webkit-box-orient: vertical;
913 -moz-box-orient: vertical;
914 -ms-box-orient: vertical;
915 box-orient: vertical;
916 -webkit-box-align: center;
917 -moz-box-align: center;
918 -ms-box-align: center;
919 box-align: center;
920 -webkit-box-pack: center;
921 -moz-box-pack: center;
922 -ms-box-pack: center;
923 box-pack: center;
924 -webkit-border-radius: 5px;
925 -moz-border-radius: 5px;
926 -ms-border-radius: 5px;
927 -o-border-radius: 5px;
928 border-radius: 5px;
929 -webkit-box-sizing: border-box;
930 -moz-box-sizing: border-box;
931 box-sizing: border-box;
932 -webkit-transform: translateY(350px);
933 -moz-transform: translateY(350px);
934 -ms-transform: translateY(350px);
935 -o-transform: translateY(350px);
936 transform: translateY(350px);
937 -webkit-transition: all 0.4s ease-in-out;
938 -moz-transition: all 0.4s ease-in-out;
939 -ms-transition: all 0.4s ease-in-out;
940 -o-transition: all 0.4s ease-in-out;
941 transition: all 0.4s ease-in-out;
942}
943/* line 650, ../sass/default.scss */
944.note > section {
945 background: #fff;
946 -webkit-border-radius: 5px;
947 -moz-border-radius: 5px;
948 -ms-border-radius: 5px;
949 -o-border-radius: 5px;
950 border-radius: 5px;
951 -webkit-box-shadow: 0 0 10px #797979;
952 -moz-box-shadow: 0 0 10px #797979;
953 box-shadow: 0 0 10px #797979;
954 width: 60%;
955 padding: 2em;
956}
957
958/* line 667, ../sass/default.scss */
959.with-notes.popup slides.layout-widescreen slide.next,
960.with-notes.popup slides.layout-faux-widescreen slide.next {
893 -webkit-transform: translate3d(690px, 80px, 0) scale(0.35); 961 -webkit-transform: translate3d(690px, 80px, 0) scale(0.35);