new, fixed, speaker notes layout

This commit is contained in:
Hakim El Hattab 2016-10-11 11:03:49 +02:00
parent 44a355b6e9
commit 2cc5ae946b
4 changed files with 71 additions and 37 deletions

View File

@ -144,9 +144,14 @@ ul, ol, div, p {
} }
/* Display slide speaker notes when 'showNotes' is enabled */ /* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none;
max-height: none;
}
.reveal .speaker-notes-pdf { .reveal .speaker-notes-pdf {
display: block; display: block;
width: 100%; width: 100%;
height: auto;
max-height: none; max-height: none;
top: auto; top: auto;
right: auto; right: auto;

View File

@ -269,11 +269,11 @@ body {
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
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="faded"] .navigate-left.enabled,
.reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled { .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover, .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
.reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover { .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {
opacity: 1; } opacity: 1; }
.reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled, .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,
.reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled { .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {
@ -1433,36 +1433,49 @@ body {
.reveal aside.notes { .reveal aside.notes {
display: none; } display: none; }
.reveal.show-notes {
max-width: 80vw;
overflow: visible; }
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: block;
position: absolute; position: absolute;
width: 70%; width: 20vw;
max-height: 15%; height: 100%;
left: 15%; top: 0;
bottom: 26px; left: 100%;
padding: 10px; padding: 14px;
z-index: 1; z-index: 1;
font-size: 18px; font-size: 18px;
line-height: 1.4; line-height: 1.4;
color: #fff; color: #222;
background-color: rgba(0, 0, 0, 0.5); background-color: #f5f5f5;
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
.reveal .speaker-notes.visible:not(:empty) { .reveal .speaker-notes:before {
display: block; } content: 'Speaker notes';
display: block;
margin-bottom: 10px;
opacity: 0.5; }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.reveal.show-notes {
max-width: none;
max-height: 70vh;
overflow: visible; }
.reveal .speaker-notes { .reveal .speaker-notes {
font-size: 14px; } } top: 70vh;
left: 0;
width: 100%;
height: 30vh; } }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.reveal .speaker-notes { .reveal .speaker-notes {
width: 90%; font-size: 14px; } }
left: 5%; } }
/********************************************* /*********************************************
* ZOOM PLUGIN * ZOOM PLUGIN

View File

@ -335,11 +335,11 @@ body {
transform: translateX(-50%) rotate( -90deg ); transform: translateX(-50%) rotate( -90deg );
} }
// Back arrow style: "deemphasized": // Back arrow style: "faded":
// Strongly deemphasizes backwards navigation in favor of drawing // Strongly deemphasizes backwards navigation in favor of drawing
// attention to forwards navigation // attention to forwards navigation
&[data-controls-back-arrows="deemphasized"] .navigate-left.enabled, &[data-controls-back-arrows="faded"] .navigate-left.enabled,
&[data-controls-back-arrows="deemphasized"] .navigate-up.enabled { &[data-controls-back-arrows="faded"] .navigate-up.enabled {
opacity: 0.3; opacity: 0.3;
&:hover { &:hover {
@ -1521,21 +1521,26 @@ body {
display: none; display: none;
} }
.reveal.show-notes {
max-width: 80vw;
overflow: visible;
}
// An interface element that can optionally be used to show the // An interface element that can optionally be used to show the
// speaker notes to all viewers, on top of the presentation // speaker notes to all viewers, on top of the presentation
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: block;
position: absolute; position: absolute;
width: 70%; width: 20vw;
max-height: 15%; height: 100%;
left: 15%; top: 0;
bottom: 26px; left: 100%;
padding: 10px; padding: 14px;
z-index: 1; z-index: 1;
font-size: 18px; font-size: 18px;
line-height: 1.4; line-height: 1.4;
color: #fff; color: #222;
background-color: rgba(0,0,0,0.5); background-color: #f5f5f5;
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
@ -1543,20 +1548,31 @@ body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.reveal .speaker-notes.visible:not(:empty) { .reveal .speaker-notes:before {
content: 'Speaker notes';
display: block; display: block;
margin-bottom: 10px;
opacity: 0.5;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.reveal.show-notes {
max-width: none;
max-height: 70vh;
overflow: visible;
}
.reveal .speaker-notes { .reveal .speaker-notes {
font-size: 14px; top: 70vh;
left: 0;
width: 100%;
height: 30vh;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.reveal .speaker-notes { .reveal .speaker-notes {
width: 90%; font-size: 14px;
left: 5%;
} }
} }

View File

@ -56,8 +56,8 @@
controlsLayout: 'bottom-right', controlsLayout: 'bottom-right',
// Specifies the display rules for backwards navigation arrows; // Specifies the display rules for backwards navigation arrows;
// "deemphasized", "hidden" or "visible" // "faded", "hidden" or "visible"
controlsBackArrows: 'deemphasized', controlsBackArrows: 'faded',
// Display a presentation progress bar // Display a presentation progress bar
progress: true, progress: true,
@ -106,7 +106,7 @@
// key is pressed // key is pressed
help: true, 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, pause: true,
// Flags if speaker notes should be visible to all viewers // Flags if speaker notes should be visible to all viewers
@ -1032,11 +1032,11 @@
} }
if( config.showNotes ) { 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' ); dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
} }
else { else {
dom.speakerNotes.classList.remove( 'visible' ); dom.wrapper.classList.remove( 'show-notes' );
} }
if( config.mouseWheel ) { if( config.mouseWheel ) {