Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
oleg
/
reveal.js
spogulis no https://github.com/hakimel/reveal.js.git
1
0
Atdalīts 0
Faili Problēmas 0 Vikivietne
Pārlūkot izejas kodu

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

Hakim El Hattab 5 gadi atpakaļ
vecāks
1288a3280c
revīzija
eeedaa17e1
7 mainītis faili ar 119 papildinājumiem un 9 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 17 2
      css/reveal.scss
  2. 1 1
      dist/reveal.css
  3. 0 0
      dist/reveal.esm.js
  4. 0 0
      dist/reveal.js
  5. 92 0
      examples/layout-helpers.html
  6. 7 4
      js/config.js
  7. 2 2
      js/reveal.js

+ 17 - 2
css/reveal.scss
Parādīt failu 

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

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 1
dist/reveal.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
dist/reveal.esm.js


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
dist/reveal.js


+ 92 - 0
examples/layout-helpers.html
Parādīt failu 

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

+ 7 - 4
js/config.js
Parādīt failu 

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

+ 2 - 2
js/reveal.js
Parādīt failu 

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

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels