Skip to content

Commit 3795ef1

Browse files
hakimelhakimel
committed
update style of notes plugin to match Slides
1 parent 5b18c1f commit 3795ef1

1 file changed

Lines changed: 152 additions & 131 deletions

File tree

‎plugin/notes/notes.html‎

Lines changed: 152 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -10,157 +10,163 @@
1010
font-family: Helvetica;
1111
}
1212

13-
#notes {
14-
font-size: 24px;
15-
width: 640px;
16-
margin-top: 5px;
17-
clear: left;
13+
#current-slide,
14+
#next-slide,
15+
#speaker-controls {
16+
padding: 6px;
17+
box-sizing: border-box;
18+
-moz-box-sizing: border-box;
1819
}
1920

20-
#wrap-current-slide {
21-
width: 640px;
22-
height: 512px;
23-
float: left;
24-
overflow: hidden;
21+
#current-slide iframe,
22+
#next-slide iframe {
23+
width: 100%;
24+
height: 100%;
25+
border: 1px solid #ddd;
2526
}
2627

27-
#current-slide {
28-
width: 1280px;
29-
height: 1024px;
30-
border: none;
31-
32-
-webkit-transform-origin: 0 0;
33-
-moz-transform-origin: 0 0;
34-
-ms-transform-origin: 0 0;
35-
-o-transform-origin: 0 0;
36-
transform-origin: 0 0;
37-
38-
-webkit-transform: scale(0.5);
39-
-moz-transform: scale(0.5);
40-
-ms-transform: scale(0.5);
41-
-o-transform: scale(0.5);
42-
transform: scale(0.5);
28+
#current-slide .label,
29+
#next-slide .label {
30+
position: absolute;
31+
top: 10px;
32+
left: 10px;
33+
font-weight: bold;
34+
font-size: 14px;
35+
z-index: 2;
36+
color: rgba( 255, 255, 255, 0.9 );
4337
}
4438

45-
#wrap-next-slide {
46-
width: 448px;
47-
height: 358px;
48-
float: left;
49-
margin: 0 0 0 10px;
50-
overflow: hidden;
39+
#current-slide {
40+
position: absolute;
41+
width: 65%;
42+
height: 100%;
43+
top: 0;
44+
left: 0;
45+
padding-right: 0;
5146
}
5247

5348
#next-slide {
54-
width: 1280px;
55-
height: 1024px;
56-
border: none;
57-
58-
-webkit-transform-origin: 0 0;
59-
-moz-transform-origin: 0 0;
60-
-ms-transform-origin: 0 0;
61-
-o-transform-origin: 0 0;
62-
transform-origin: 0 0;
63-
64-
-webkit-transform: scale(0.35);
65-
-moz-transform: scale(0.35);
66-
-ms-transform: scale(0.35);
67-
-o-transform: scale(0.35);
68-
transform: scale(0.35);
69-
}
70-
71-
.slides {
72-
position: relative;
73-
margin-bottom: 10px;
74-
border: 1px solid black;
75-
border-radius: 2px;
76-
background: rgb(28, 30, 32);
49+
position: absolute;
50+
width: 35%;
51+
height: 40%;
52+
right: 0;
53+
top: 0;
7754
}
7855

79-
.slides span {
56+
#speaker-controls {
8057
position: absolute;
81-
top: 3px;
82-
left: 3px;
83-
font-weight: bold;
84-
font-size: 14px;
85-
z-index: 2;
86-
color: rgba( 255, 255, 255, 0.9 );
87-
}
58+
top: 40%;
59+
right: 0;
60+
width: 35%;
61+
height: 60%;
8862

89-
.error {
90-
font-weight: bold;
91-
color: red;
92-
font-size: 1.5em;
93-
text-align: center;
94-
margin-top: 10%;
63+
font-size: 18px;
9564
}
9665

97-
.error code {
98-
font-family: monospace;
99-
}
66+
.speaker-controls-time.hidden,
67+
.speaker-controls-notes.hidden {
68+
display: none;
69+
}
70+
71+
.speaker-controls-time .label,
72+
.speaker-controls-notes .label {
73+
text-transform: uppercase;
74+
font-weight: normal;
75+
font-size: 0.66em;
76+
color: #666;
77+
margin: 0;
78+
}
79+
80+
.speaker-controls-time {
81+
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
82+
margin-bottom: 10px;
83+
padding: 10px 16px;
84+
padding-bottom: 20px;
85+
}
86+
87+
.speaker-controls-time .timer,
88+
.speaker-controls-time .clock {
89+
width: 50%;
90+
font-size: 1.9em;
91+
}
92+
93+
.speaker-controls-time .timer {
94+
float: left;
95+
}
10096

101-
.time {
102-
width: 448px;
103-
margin: 30px 0 0 10px;
104-
float: left;
105-
text-align: center;
106-
opacity: 0;
107-
108-
-webkit-transition: opacity 0.4s;
109-
-moz-transition: opacity 0.4s;
110-
-o-transition: opacity 0.4s;
111-
transition: opacity 0.4s;
97+
.speaker-controls-time .clock {
98+
float: right;
99+
text-align: right;
100+
}
101+
102+
.speaker-controls-time span.mute {
103+
color: #bbb;
104+
}
105+
106+
.speaker-controls-notes {
107+
padding: 10px 16px;
108+
}
109+
110+
.speaker-controls-notes .value {
111+
margin-top: 5px;
112+
line-height: 1.4;
113+
font-size: 1.2em;
114+
}
115+
116+
.clear {
117+
clear: both;
112118
}
113119

114-
.elapsed,
115-
.clock {
116-
color: #333;
117-
font-size: 2em;
118-
text-align: center;
119-
display: inline-block;
120-
padding: 0.5em;
121-
background-color: #eee;
122-
border-radius: 10px;
120+
@media screen and (max-width: 1080px) {
121+
#speaker-controls {
122+
font-size: 16px;
123+
}
123124
}
124125

125-
.elapsed h2,
126-
.clock h2 {
127-
font-size: 0.8em;
128-
line-height: 100%;
129-
margin: 0;
130-
color: #aaa;
126+
@media screen and (max-width: 900px) {
127+
#speaker-controls {
128+
font-size: 14px;
129+
}
131130
}
132131

133-
.elapsed .mute {
134-
color: #ddd;
132+
@media screen and (max-width: 800px) {
133+
#speaker-controls {
134+
font-size: 12px;
135+
}
135136
}
136137

137138
</style>
138139
</head>
139140

140141
<body>
141142

142-
<div id="wrap-current-slide" class="slides"></div>
143-
<div id="wrap-next-slide" class="slides"><span>UPCOMING:</span></div>
144-
145-
<div class="time">
146-
<div class="clock">
147-
<h2>Time</h2>
148-
<span id="clock">0:00:00 AM</span>
143+
<div id="current-slide"></div>
144+
<div id="next-slide"><span class="label">UPCOMING:</span></div>
145+
<div id="speaker-controls">
146+
<div class="speaker-controls-time">
147+
<h4 class="label">Time</h4>
148+
<div class="clock">
149+
<span class="clock-value">0:00 AM</span>
150+
</div>
151+
<div class="timer">
152+
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
153+
</div>
154+
<div class="clear"></div>
149155
</div>
150-
<div class="elapsed">
151-
<h2>Elapsed</h2>
152-
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
156+
157+
<div class="speaker-controls-notes hidden">
158+
<h4 class="label">Notes</h4>
159+
<div class="value"></div>
153160
</div>
154161
</div>
155162

156-
<div id="notes"></div>
157-
158163
<script src="../../plugin/markdown/marked.js"></script>
159164
<script>
160165

161166
(function() {
162167

163168
var notes,
169+
notesValue,
164170
currentState,
165171
currentSlide,
166172
nextSlide,
@@ -202,6 +208,7 @@ <h2>Elapsed</h2>
202208
connected = true;
203209

204210
setupIframes( data );
211+
setupNotes();
205212
setupTimer();
206213
}
207214

@@ -217,14 +224,18 @@ <h2>Elapsed</h2>
217224
currentState = JSON.stringify( data.state );
218225

219226
// No need for updating the notes in case of fragment changes
220-
if ( data.notes !== undefined) {
227+
if ( data.notes ) {
228+
notes.classList.remove( 'hidden' );
221229
if( data.markdown ) {
222-
notes.innerHTML = marked( data.notes );
230+
notesValue.innerHTML = marked( data.notes );
223231
}
224232
else {
225-
notes.innerHTML = data.notes;
233+
notesValue.innerHTML = data.notes;
226234
}
227235
}
236+
else {
237+
notes.classList.add( 'hidden' );
238+
}
228239

229240
// Update the note slides
230241
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
@@ -238,24 +249,30 @@ <h2>Elapsed</h2>
238249
*/
239250
function setupIframes( data ) {
240251

241-
notes = document.getElementById( 'notes' );
242-
243252
var url = data.url + '?receiver&progress=false&overview=false&history=false';
244253
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
245254

246255
currentSlide = document.createElement( 'iframe' );
247-
currentSlide.setAttribute( 'id', 'current-slide' );
248256
currentSlide.setAttribute( 'width', 1280 );
249257
currentSlide.setAttribute( 'height', 1024 );
250258
currentSlide.setAttribute( 'src', url + '&postMessageEvents=true' + hash );
251-
document.querySelector( '#wrap-current-slide' ).appendChild( currentSlide );
259+
document.querySelector( '#current-slide' ).appendChild( currentSlide );
252260

253261
nextSlide = document.createElement( 'iframe' );
254-
nextSlide.setAttribute( 'id', 'next-slide' );
255262
nextSlide.setAttribute( 'width', 640 );
256263
nextSlide.setAttribute( 'height', 512 );
257264
nextSlide.setAttribute( 'src', url + '&controls=false' + hash );
258-
document.querySelector( '#wrap-next-slide' ).appendChild( nextSlide );
265+
document.querySelector( '#next-slide' ).appendChild( nextSlide );
266+
267+
}
268+
269+
/**
270+
* Setup the notes UI.
271+
*/
272+
function setupNotes() {
273+
274+
notes = document.querySelector( '.speaker-controls-notes' );
275+
notesValue = document.querySelector( '.speaker-controls-notes .value' );
259276

260277
}
261278

@@ -266,15 +283,13 @@ <h2>Elapsed</h2>
266283
function setupTimer() {
267284

268285
var start = new Date(),
269-
timeEl = document.querySelector( '.time' ),
270-
clockEl = document.getElementById( 'clock' ),
271-
hoursEl = document.getElementById( 'hours' ),
272-
minutesEl = document.getElementById( 'minutes' ),
273-
secondsEl = document.getElementById( 'seconds' );
274-
275-
setInterval( function() {
286+
timeEl = document.querySelector( '.speaker-controls-time' ),
287+
clockEl = timeEl.querySelector( '.clock-value' ),
288+
hoursEl = timeEl.querySelector( '.hours-value' ),
289+
minutesEl = timeEl.querySelector( '.minutes-value' ),
290+
secondsEl = timeEl.querySelector( '.seconds-value' );
276291

277-
timeEl.style.opacity = 1;
292+
function _updateTimer() {
278293

279294
var diff, hours, minutes, seconds,
280295
now = new Date();
@@ -284,14 +299,20 @@ <h2>Elapsed</h2>
284299
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
285300
seconds = Math.floor( ( diff / 1000 ) % 60 );
286301

287-
clockEl.innerHTML = now.toLocaleTimeString();
302+
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
288303
hoursEl.innerHTML = zeroPadInteger( hours );
289304
hoursEl.className = hours > 0 ? '' : 'mute';
290305
minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
291306
minutesEl.className = minutes > 0 ? '' : 'mute';
292307
secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
293308

294-
}, 1000 );
309+
}
310+
311+
// Update once directly
312+
_updateTimer();
313+
314+
// Then update every second
315+
setInterval( _updateTimer, 1000 );
295316

296317
}
297318

0 commit comments

Comments
 (0)