projects / reveal.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a696977)
small tweaks to notes page style
authorHakim El Hattab <hakim.elhattab@gmail.com>
Wed, 4 Jul 2012 19:09:58 +0000 (15:09 -0400)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Wed, 4 Jul 2012 19:09:58 +0000 (15:09 -0400)
lib/slidenotes/notes.html patch | blob | history

diff --git a/lib/slidenotes/notes.html b/lib/slidenotes/notes.html
index 4201647e6569a6acd95b7c472d931104794fa08f..404b02349fddb2a862df7dc27e2904f912ffc0d1 100644 (file)
--- a/lib/slidenotes/notes.html
+++ b/lib/slidenotes/notes.html
@@ -6,22 +6,27 @@
                <title>reveal.js - Slide Notes</title>
 
                <style>
-                       #notes {
+                       body {
                                font-family: Helvetica;
+                       }
+
+                       #notes {
                                font-size: 24px;
                                width: 640px;
+                               margin-top: 5px;
                        }
 
-                       #wrap-slides {
+                       #wrap-current-slide {
                                width: 640px;
                                height: 512px;
                                float: left;
+                               overflow: hidden;
                        }
 
-                       #slides {
+                       #current-slide {
                                width: 1280px;
                                height: 1024px;
-                               border: 1px solid black;
+                               border: none;
                                -moz-transform: scale(0.5);
                                -moz-transform-origin: 0 0;
                                -o-transform: scale(0.5);
@@ -34,13 +39,14 @@
                                width: 320px;
                                height: 256px;
                                float: left;
-                               margin: 0 0 0 50px;
+                               margin: 0 0 0 10px;
+                               overflow: hidden;
                        }
 
                        #next-slide {
                                width: 1280px;
                                height: 1024px;
-                               border: 1px solid black;
+                               border: none;
                                -moz-transform: scale(0.25);
                                -moz-transform-origin: 0 0;
                                -o-transform: scale(0.25);
@@ -48,17 +54,35 @@
                                -webkit-transform: scale(0.25);
                                -webkit-transform-origin: 0 0;
                        }
+
+                       .slides {
+                               position: relative;
+                               margin-bottom: 10px;
+                               border: 1px solid black;
+                               border-radius: 2px;
+                               background: rgb(28, 30, 32);
+                       }
+
+                       .slides span {
+                               position: absolute;
+                               top: 3px;
+                               left: 3px;
+                               font-weight: bold;
+                               font-size: 14px;
+                               color: rgba( 255, 255, 255, 0.9 );
+                       }
                </style>
        </head>
 
        <body>
 
-               <div id="wrap-slides">
-                       <iframe src="/?receiver" width="1280" height="1024" id="slides"></iframe>
+               <div id="wrap-current-slide" class="slides">
+                       <iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
                </div>
 
-               <div id="wrap-next-slide">
+               <div id="wrap-next-slide" class="slides">
                        <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
+                       <span>UPCOMING</span>
                </div>
                <div id="notes"></div>
 
@@ -68,7 +92,7 @@
                var socketId = '{{socketId}}';
                var socket = io.connect(window.location.origin);
                var notes = document.getElementById('notes');
-               var slides = document.getElementById('slides');
+               var currentSlide = document.getElementById('current-slide');
                var nextSlide = document.getElementById('next-slide');
 
                socket.on('slidedata', function(data) {
@@ -76,7 +100,7 @@
                        if (data.socketId !== socketId) { return; }
 
                        notes.innerHTML = data.notes;
-                       slides.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
+                       currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
                        nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
                });
                </script>
Assorted talks written in reveal.js.