Commit 58dc6b7c authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

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

parent f8b5813e
This diff is collapsed.
......@@ -236,13 +236,14 @@ body {
*********************************************/
.reveal .controls {
$size: 52px;
$length: floor($size * 0.6);
$spacing: 8px;
$size: 46px;
$length: floor($size * 0.7);
$thickness: 6px;
$angle: 44deg;
$angleHover: 40deg;
$angleActive: 36deg;
$spacing: 12px;
$innerSpacing: 18px;
@mixin arrowTransform( $angle ) {
&:before {
......@@ -256,10 +257,10 @@ body {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: auto;
bottom: $spacing;
right: $spacing;
left: auto;
z-index: 1;
color: #fff;
pointer-events: none;
......@@ -315,26 +316,26 @@ body {
}
.navigate-left {
top: 50%;
left: $spacing;
right: $size + $innerSpacing*2;
bottom: $innerSpacing;
transform: translateY(-50%);
}
.navigate-right {
top: 50%;
right: $spacing;
right: 0;
bottom: $innerSpacing;
transform: translateY(-50%) rotate( 180deg );
}
.navigate-up {
top: $spacing;
left: 50%;
right: $innerSpacing;
bottom: $size + $innerSpacing*2;
transform: translateX(-50%) rotate( 90deg );
}
.navigate-down {
bottom: $spacing;
left: 50%;
right: $innerSpacing;
bottom: 0;
transform: translateX(-50%) rotate( -90deg );
}
......@@ -376,52 +377,59 @@ body {
opacity: 1;
}
@mixin bottom-right-controls() {
$spacing: 12px;
$innerSpacing: 20px;
@media screen and (min-width: 500px) {
& {
top: auto;
bottom: $spacing;
right: $spacing;
left: auto;
transform: scale(0.85);
transform-origin: 100% 100%;
}
$spacing: 8px;
.navigate-left,
.navigate-right,
.navigate-up,
.navigate-down {
top: auto;
left: auto;
}
&[data-controls-layout="edges"] {
& {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.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;
.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%;
}
}
}
&[data-controls-layout="bottom-right"] {
@include bottom-right-controls()
}
}
@media screen and (max-width: 500px) {
@include bottom-right-controls()
}
// Adjust the layout when there are no vertical slides
.reveal:not(.has-vertical-slides) .controls .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 0;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 0;
}
.reveal.has-dark-background .controls button:after,
......
......@@ -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' );
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment