aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-10-11 11:03:49 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-16 09:45:37 +0200
commit2cc5ae946b40f98a7a1f1a883d995615f69681e2 (patch)
tree30a2a4abe26e893162acf6363e943d4cab1f394f
parent44a355b6e969d6a1cfbf23cb44079104d4dc6945 (diff)
downloadfosdem-2018-presentation-2cc5ae946b40f98a7a1f1a883d995615f69681e2.tar
fosdem-2018-presentation-2cc5ae946b40f98a7a1f1a883d995615f69681e2.tar.gz
new, fixed, speaker notes layout
-rw-r--r--css/print/pdf.css5
-rw-r--r--css/reveal.css47
-rw-r--r--css/reveal.scss46
-rw-r--r--js/reveal.js10
4 files changed, 71 insertions, 37 deletions
diff --git a/css/print/pdf.css b/css/print/pdf.css
index 20c646a..2b86cb2 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -144,9 +144,14 @@ ul, ol, div, p {
}
/* Display slide speaker notes when 'showNotes' is enabled */
+.reveal.show-notes {
+ max-width: none;
+ max-height: none;
+}
.reveal .speaker-notes-pdf {
display: block;
width: 100%;
+ height: auto;
max-height: none;
top: auto;
right: auto;
diff --git a/css/reveal.css b/css/reveal.css
index 8ec6bbd..0c52205 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -269,11 +269,11 @@ body {
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); }
- .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
- .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
+ .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
+ .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
opacity: 0.3; }
- .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover,
- .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover {
+ .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
+ .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {
opacity: 1; }
.reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,
.reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {
@@ -1433,36 +1433,49 @@ body {
.reveal aside.notes {
display: none; }
+.reveal.show-notes {
+ max-width: 80vw;
+ overflow: visible; }
+
.reveal .speaker-notes {
- display: none;
+ display: block;
position: absolute;
- width: 70%;
- max-height: 15%;
- left: 15%;
- bottom: 26px;
- padding: 10px;
+ width: 20vw;
+ height: 100%;
+ top: 0;
+ left: 100%;
+ padding: 14px;
z-index: 1;
font-size: 18px;
line-height: 1.4;
- color: #fff;
- background-color: rgba(0, 0, 0, 0.5);
+ color: #222;
+ background-color: #f5f5f5;
overflow: auto;
box-sizing: border-box;
text-align: left;
font-family: Helvetica, sans-serif;
-webkit-overflow-scrolling: touch; }
-.reveal .speaker-notes.visible:not(:empty) {
- display: block; }
+.reveal .speaker-notes:before {
+ content: 'Speaker notes';
+ display: block;
+ margin-bottom: 10px;
+ opacity: 0.5; }
@media screen and (max-width: 1024px) {
+ .reveal.show-notes {
+ max-width: none;
+ max-height: 70vh;
+ overflow: visible; }
.reveal .speaker-notes {
- font-size: 14px; } }
+ top: 70vh;
+ left: 0;
+ width: 100%;
+ height: 30vh; } }
@media screen and (max-width: 600px) {
.reveal .speaker-notes {
- width: 90%;
- left: 5%; } }
+ font-size: 14px; } }
/*********************************************
* ZOOM PLUGIN
diff --git a/css/reveal.scss b/css/reveal.scss
index 42f5d5e..f24ed2c 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -335,11 +335,11 @@ body {
transform: translateX(-50%) rotate( -90deg );
}
- // Back arrow style: "deemphasized":
+ // Back arrow style: "faded":
// Strongly deemphasizes backwards navigation in favor of drawing
// attention to forwards navigation
- &[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
- &[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
+ &[data-controls-back-arrows="faded"] .navigate-left.enabled,
+ &[data-controls-back-arrows="faded"] .navigate-up.enabled {
opacity: 0.3;
&:hover {
@@ -1521,21 +1521,26 @@ body {
display: none;
}
+.reveal.show-notes {
+ max-width: 80vw;
+ overflow: visible;
+}
+
// An interface element that can optionally be used to show the
// speaker notes to all viewers, on top of the presentation
.reveal .speaker-notes {
- display: none;
+ display: block;
position: absolute;
- width: 70%;
- max-height: 15%;
- left: 15%;
- bottom: 26px;
- padding: 10px;
+ width: 20vw;
+ height: 100%;
+ top: 0;
+ left: 100%;
+ padding: 14px;
z-index: 1;
font-size: 18px;
line-height: 1.4;
- color: #fff;
- background-color: rgba(0,0,0,0.5);
+ color: #222;
+ background-color: #f5f5f5;
overflow: auto;
box-sizing: border-box;
text-align: left;
@@ -1543,20 +1548,31 @@ body {
-webkit-overflow-scrolling: touch;
}
-.reveal .speaker-notes.visible:not(:empty) {
+.reveal .speaker-notes:before {
+ content: 'Speaker notes';
display: block;
+ margin-bottom: 10px;
+ opacity: 0.5;
}
@media screen and (max-width: 1024px) {
+ .reveal.show-notes {
+ max-width: none;
+ max-height: 70vh;
+ overflow: visible;
+ }
+
.reveal .speaker-notes {
- font-size: 14px;
+ top: 70vh;
+ left: 0;
+ width: 100%;
+ height: 30vh;
}
}
@media screen and (max-width: 600px) {
.reveal .speaker-notes {
- width: 90%;
- left: 5%;
+ font-size: 14px;
}
}
diff --git a/js/reveal.js b/js/reveal.js
index 594093b..02dbebe 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -56,8 +56,8 @@
controlsLayout: 'bottom-right',
// Specifies the display rules for backwards navigation arrows;
- // "deemphasized", "hidden" or "visible"
- controlsBackArrows: 'deemphasized',
+ // "faded", "hidden" or "visible"
+ controlsBackArrows: 'faded',
// Display a presentation progress bar
progress: true,
@@ -106,7 +106,7 @@
// key is pressed
help: true,
- // Flags if it should be possible to pause the presentation (blackout)
+ // Flags if it should be possible to pause t.spehe presentation (blackout)
pause: true,
// Flags if speaker notes should be visible to all viewers
@@ -1032,11 +1032,11 @@
}
if( config.showNotes ) {
- dom.speakerNotes.classList.add( 'visible' );
+ dom.wrapper.classList.add( 'show-notes' );
dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
}
else {
- dom.speakerNotes.classList.remove( 'visible' );
+ dom.wrapper.classList.remove( 'show-notes' );
}
if( config.mouseWheel ) {