new 'r-stack' helper class for stacking & centering multiple elements
This commit is contained in:
Hakim El Hattab
parent
1288a3280c
commit
eeedaa17e1
7 changed files with 122 additions and 12 deletions
|
|
@ -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
|
||||
|
|
|
|||
4
dist/reveal.css
vendored
4
dist/reveal.css
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js
vendored
2
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js
vendored
2
dist/reveal.js
vendored
File diff suppressed because one or more lines are too long
92
examples/layout-helpers.html
Normal file
92
examples/layout-helpers.html
Normal file
|
|
@ -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 a new issue