Przeglądaj źródła

reduce lightbox header in small windows

Hakim El Hattab 1 miesiąc temu
rodzic
commit
722b14b89f

+ 7 - 1
css/reveal.scss

@@ -39,6 +39,12 @@ html.reveal-full-page {
 	--r-overlay-gap: 5px;
 	--r-overlay-gap: 5px;
 }
 }
 
 
+@media screen and (max-width: 1024px), (max-height: 768px) {
+	.reveal-viewport {
+		--r-overlay-header-height: 26px;
+	}
+}
+
 // Force the presentation to cover the full viewport when we
 // Force the presentation to cover the full viewport when we
 // enter fullscreen mode. Fixes sizing issues in Safari.
 // enter fullscreen mode. Fixes sizing issues in Safari.
 .reveal-viewport:fullscreen {
 .reveal-viewport:fullscreen {
@@ -1492,7 +1498,7 @@ $controlsArrowAngleActive: 36deg;
 	justify-content: center;
 	justify-content: center;
 	min-width: var(--r-overlay-header-height);
 	min-width: var(--r-overlay-header-height);
 	min-height: var(--r-overlay-header-height);
 	min-height: var(--r-overlay-header-height);
-	padding: 0 10px;
+	padding: 0 calc(var(--r-overlay-header-height) / 4);
 	opacity: 1;
 	opacity: 1;
 	border-radius: 6px;
 	border-radius: 6px;
 	font-size: 18px;
 	font-size: 18px;

Plik diff jest za duży
+ 0 - 0
dist/reveal.css


Plik diff jest za duży
+ 0 - 0
dist/reveal.esm.js


Plik diff jest za duży
+ 0 - 0
dist/reveal.esm.js.map


Plik diff jest za duży
+ 0 - 0
dist/reveal.js


Plik diff jest za duży
+ 0 - 0
dist/reveal.js.map


+ 9 - 2
js/controllers/overlay.js

@@ -13,6 +13,7 @@ export default class Overlay {
 		this.iframeTriggerSelector = null;
 		this.iframeTriggerSelector = null;
 		this.mediaTriggerSelector = '[data-preview-image], [data-preview-video]';
 		this.mediaTriggerSelector = '[data-preview-image], [data-preview-video]';
 
 
+		this.stateProps = ['previewIframe', 'previewImage', 'previewVideo', 'previewFit'];
 		this.state = {};
 		this.state = {};
 
 
 	}
 	}
@@ -64,7 +65,7 @@ export default class Overlay {
 
 
 		this.close();
 		this.close();
 
 
-		this.state.previewIframe = url;
+		this.state = { previewIframe: url };
 
 
 		this.createOverlay( 'r-overlay-preview' );
 		this.createOverlay( 'r-overlay-preview' );
 		this.dom.dataset.state = 'loading';
 		this.dom.dataset.state = 'loading';
@@ -313,6 +314,12 @@ export default class Overlay {
 
 
 	setState( state ) {
 	setState( state ) {
 
 
+		// Ignore the incoming state if none of the preview related
+		// props have changed
+		if( this.stateProps.every( key => this.state[ key ] === state[ key ] ) ) {
+			return;
+		}
+
 		if( state.previewIframe ) {
 		if( state.previewIframe ) {
 			this.previewIframe( state.previewIframe );
 			this.previewIframe( state.previewIframe );
 		}
 		}
@@ -338,7 +345,7 @@ export default class Overlay {
 		// Was an iframe lightbox trigger clicked?
 		// Was an iframe lightbox trigger clicked?
 		if( linkTarget ) {
 		if( linkTarget ) {
 			if( event.metaKey || event.shiftKey || event.altKey ) {
 			if( event.metaKey || event.shiftKey || event.altKey ) {
-				// Let the browser handle meta keys naturally so users can cmd+click, cmd+shift+click, shift+click, alt+click, etc.
+				// Let the browser handle meta keys naturally so users can cmd+click
 				return;
 				return;
 			}
 			}
 			let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
 			let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików