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

new 'r-stack' helper class for stacking & centering multiple elements

master
Hakim El Hattab 2 years ago
parent
1288a3280c
commit
eeedaa17e1
7 changed files with 122 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      css/reveal.scss
  2. 4
      dist/reveal.css
  3. 2
      dist/reveal.esm.js
  4. 2
      dist/reveal.js
  5. 92
      examples/layout-helpers.html
  6. 11
      js/config.js
  7. 4
      js/reveal.js

19
css/reveal.scss
View File

@ -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
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js
View File

File diff suppressed because one or more lines are too long

92
examples/layout-helpers.html
View 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
View File

@ -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,

4
js/reveal.js
View File

@ -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 );

Write Preview
Loading…
Cancel
Save