blallo/presentazione-papero
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adjust controls layout when there are no vertical or horizontal slides in the deck

Browse Source
This commit is contained in:
Hakim El Hattab 2017-05-16 09:43:16 +02:00
parent f8b5813e59
commit 58dc6b7c36
3 changed files with 170 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
css/reveal.css
View File

File diff suppressed because one or more lines are too long

118
css/reveal.scss
View File

@ -236,13 +236,14 @@ body {
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
$size: 52px; $size: 46px;
$length: floor($size * 0.6); $length: floor($size * 0.7);
$spacing: 8px;
$thickness: 6px; $thickness: 6px;
$angle: 44deg; $angle: 44deg;
$angleHover: 40deg; $angleHover: 40deg;
$angleActive: 36deg; $angleActive: 36deg;
$spacing: 12px;
$innerSpacing: 18px;
@mixin arrowTransform( $angle ) { @mixin arrowTransform( $angle ) {
&:before { &:before {
@ -256,10 +257,10 @@ body {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: auto;
right: 0; bottom: $spacing;
bottom: 0; right: $spacing;
left: 0; left: auto;
z-index: 1; z-index: 1;
color: #fff; color: #fff;
pointer-events: none; pointer-events: none;
@ -315,26 +316,26 @@ body {
} }
.navigate-left { .navigate-left {
top: 50%; right: $size + $innerSpacing*2;
left: $spacing; bottom: $innerSpacing;
transform: translateY(-50%); transform: translateY(-50%);
} }
.navigate-right { .navigate-right {
top: 50%; right: 0;
right: $spacing; bottom: $innerSpacing;
transform: translateY(-50%) rotate( 180deg ); transform: translateY(-50%) rotate( 180deg );
} }
.navigate-up { .navigate-up {
top: $spacing; right: $innerSpacing;
left: 50%; bottom: $size + $innerSpacing*2;
transform: translateX(-50%) rotate( 90deg ); transform: translateX(-50%) rotate( 90deg );
} }
.navigate-down { .navigate-down {
bottom: $spacing; right: $innerSpacing;
left: 50%; bottom: 0;
transform: translateX(-50%) rotate( -90deg ); transform: translateX(-50%) rotate( -90deg );
} }
@ -376,52 +377,59 @@ body {
opacity: 1; opacity: 1;
} }
@mixin bottom-right-controls() { @media screen and (min-width: 500px) {
$spacing: 12px;
$innerSpacing: 20px;
& { $spacing: 8px;
top: auto;
bottom: $spacing; &[data-controls-layout="edges"] {
right: $spacing; & {
left: auto; top: 0;
transform: scale(0.85); right: 0;
transform-origin: 100% 100%; bottom: 0;
left: 0;
}
.navigate-left,
.navigate-right,
.navigate-up,
.navigate-down {
bottom: auto;
right: auto;
}
.navigate-left {
top: 50%;
left: $spacing;
}
.navigate-right {
top: 50%;
right: $spacing;
}
.navigate-up {
top: $spacing;
left: 50%;
}
.navigate-down {
bottom: $spacing;
left: 50%;
}
} }
.navigate-left,
.navigate-right,
.navigate-up,
.navigate-down {
top: auto;
left: auto;
}
.navigate-left {
right: $size + $innerSpacing*2;
bottom: $innerSpacing;
}
.navigate-right {
right: 0;
bottom: $innerSpacing;
}
.navigate-up {
right: $innerSpacing;
bottom: $size + $innerSpacing*2;
}
.navigate-down {
right: $innerSpacing;
bottom: 0;
}
} }
}
&[data-controls-layout="bottom-right"] { // Adjust the layout when there are no vertical slides
@include bottom-right-controls() .reveal:not(.has-vertical-slides) .controls .navigate-left,
} .reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 0;
}
@media screen and (max-width: 500px) { .reveal:not(.has-horizontal-slides) .controls .navigate-up,
@include bottom-right-controls() .reveal:not(.has-horizontal-slides) .controls .navigate-down {
} right: 0;
} }
.reveal.has-dark-background .controls button:after, .reveal.has-dark-background .controls button:after,

16
js/reveal.js
View File

@ -2739,6 +2739,22 @@
} }
} }
// Flag if there are ANY vertical slides, anywhere in the deck
if( dom.wrapper.querySelectorAll( '.slides>section>section' ).length ) {
dom.wrapper.classList.add( 'has-vertical-slides' );
}
else {
dom.wrapper.classList.remove( 'has-vertical-slides' );
}
// Flag if there are ANY horizontal slides, anywhere in the deck
if( dom.wrapper.querySelectorAll( '.slides>section:not(.stack)' ).length ) {
dom.wrapper.classList.add( 'has-horizontal-slides' );
}
else {
dom.wrapper.classList.remove( 'has-horizontal-slides' );
}
} }
} }