new 'r-stack' helper class for stacking & centering multiple elements
This commit is contained in:
Hakim El Hattab
parent
1288a3280c
commit
eeedaa17e1
|
|
@ -213,17 +213,32 @@ html.reveal-full-page {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.reveal .stretch {
|
||||
// Layout helper: Stretch an element vertically based on available space
|
||||
.reveal .stretch,
|
||||
.reveal .r-stretch {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.reveal pre.stretch code {
|
||||
.reveal pre.stretch code,
|
||||
.reveal pre.r-stretch code {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Layout helper: Stack multiple elements on top of each other
|
||||
.reveal .r-stack {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reveal .r-stack > * {
|
||||
grid-area: 1/1;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* CONTROLS
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,92 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Layout Helpers</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<link rel="stylesheet" href="../dist/reveal.css">
|
||||
<link rel="stylesheet" href="../dist/theme/white.css" id="theme">
|
||||
<link rel="stylesheet" href="../lib/css/monokai.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="reveal">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>
|
||||
<h2>Layout Helper Examples</h2>
|
||||
<ul>
|
||||
<li><a href="#/stretch">Stretch</a></li>
|
||||
<li><a href="#/stack">Stack</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="stretch">
|
||||
<h2>Stretch</h2>
|
||||
<p>Makes an element as tall as possible while remaining within the slide bounds.</p>
|
||||
<pre><code class="html" data-trim data-line-numbers>
|
||||
<h2>Stretch Example</h2>
|
||||
<img src="assets/image2.png" class="r-stretch">
|
||||
<p>Image byline</p>
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Stretch Example</h2>
|
||||
<img src="assets/image2.png" class="r-stretch">
|
||||
<p>Image byline</p>
|
||||
</section>
|
||||
|
||||
<section id="stack">
|
||||
<h2>Stack</h2>
|
||||
<p>Stacks multiple elements on top of each other, for use with fragments.</p>
|
||||
<pre><code class="html" data-trim data-line-numbers>
|
||||
<div class="r-stack">
|
||||
<img class="fragment" width="450" height="300" src="...">
|
||||
<img class="fragment" width="300" height="450" src="...">
|
||||
<img class="fragment" width="400" height="400" src="...">
|
||||
</div>
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Stack Example</h2>
|
||||
<div class="r-stack">
|
||||
<img src="https://placekitten.com/450/300" width="450" height="300" class="fragment">
|
||||
<img src="https://placekitten.com/300/450" width="300" height="450" class="fragment">
|
||||
<img src="https://placekitten.com/400/400" width="400" height="400" class="fragment">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Stack Example</h2>
|
||||
<p>One at a time.</p>
|
||||
<div class="r-stack">
|
||||
<img src="https://placekitten.com/450/300" width="450" height="300" class="fragment fade-out" data-fragment-index="0">
|
||||
<img src="https://placekitten.com/300/450" width="300" height="450" class="fragment current-visible" data-fragment-index="0">
|
||||
<img src="https://placekitten.com/400/400" width="400" height="400" class="fragment">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../dist/reveal.js"></script>
|
||||
<script src="../dist/plugin/highlight.js"></script>
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
center: true,
|
||||
hash: true,
|
||||
plugins: [ RevealHighlight ]
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
11
js/config.js
11
js/config.js
|
|
@ -72,15 +72,18 @@ export default {
|
|||
keyboard: true,
|
||||
|
||||
// Optional function that blocks keyboard events when retuning false
|
||||
//
|
||||
// If you set this to 'foucsed', we will only capture keyboard events
|
||||
// for embdedded decks when they are in focus
|
||||
keyboardCondition: null,
|
||||
|
||||
// Disables the default reveal.js slide layout (scaling and centering)
|
||||
// so that you can use custom CSS layout
|
||||
disableLayout: false,
|
||||
|
||||
// Enable the slide overview mode
|
||||
overview: true,
|
||||
|
||||
// Disables the default reveal.js slide layout so that you can use
|
||||
// custom CSS layout
|
||||
disableLayout: false,
|
||||
|
||||
// Vertical centering of slides
|
||||
center: true,
|
||||
|
||||
|
|
|
|||
|
|
@ -892,8 +892,8 @@ export default function( revealElement, options ) {
|
|||
*/
|
||||
function layoutSlideContents( width, height ) {
|
||||
|
||||
// Handle sizing of elements with the 'stretch' class
|
||||
Util.queryAll( dom.slides, 'section > .stretch' ).forEach( element => {
|
||||
// Handle sizing of elements with the 'r-stretch' class
|
||||
Util.queryAll( dom.slides, 'section > .stretch, section > .r-stretch' ).forEach( element => {
|
||||
|
||||
// Determine how much vertical space we can use
|
||||
let remainingHeight = Util.getRemainingHeight( element, height );
|
||||
|
|
|
|||
Loading…
Reference in New Issue