mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-17 18:37:00 +02:00
Code Issues Releases Wiki Activity

Fix responsive zoom for some resolutions

Browse Source
This commit is contained in:
Luis
2017-04-13 16:17:43 +02:00
parent b41cf41ac9
commit 5a7c84891a
4 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/plugins/zoom.js
View File

@@ -133,7 +133,7 @@ export default class Zoom {
elem.el.style.height = `${(wsW - marginH) * 1.5}px`; elem.el.style.height = `${(wsW - marginH) * 1.5}px`;
elem.el.style.minHeight = scale == 1? 'auto' : ''; elem.el.style.minHeight = scale == 1? 'auto' : '';
// Because of flexbox, wrap height is required // Because of flexbox, wrap height is required
wrap.style.height = `${window.innerWidth / 1.5}px`; wrap.style.height = `${(wsW - marginH) * 1.5 / 2}px`;
} else { } else {
elem.el.style.width = `${window.innerWidth - marginW * scale}px`; elem.el.style.width = `${window.innerWidth - marginW * scale}px`;
elem.el.style.height = `${window.innerHeight - marginH * scale}px`; elem.el.style.height = `${window.innerHeight - marginH * scale}px`;
@@ -178,6 +178,8 @@ export default class Zoom {
* @param {Event} ev * @param {Event} ev
*/ */
onWindowResize(ev) { onWindowResize(ev) {
if (this.isZoomed_) this.zoomOut();
this.zws_.slides.forEach( elem => { this.zws_.slides.forEach( elem => {
const wrap = elem.el.parentElement; const wrap = elem.el.parentElement;
const div = wrap.parentElement; const div = wrap.parentElement;

4
static/css/base.css
View File

@@ -3385,7 +3385,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
/*border-radius: .3rem; /*border-radius: .3rem;
padding: 0 1.6rem;*/ padding: 0 1.6rem;*/
margin: .8rem auto; margin: .8rem auto;
} }
@media all and (orientation: portrait) { @media all and (orientation: portrait) {
#webslides-zoomed.grid > .column { #webslides-zoomed.grid > .column {
@@ -3401,6 +3401,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
width: 100%; width: 100%;
} }
#webslides-zoomed.grid > .column > .wrap-zoom > .slide { #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
transform: scale(0.5) translate(-50%, -30vh); transform: scale(0.5) translate(-50%, -50%);
} }
} }

6
static/js/webslides.js
View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.2.1 * Version: 1.2.1
* Date: 2017-04-12 * Date: 2017-04-13
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2608,7 +2608,7 @@ var Zoom = function () {
elem.el.style.height = (wsW - marginH) * 1.5 + 'px'; elem.el.style.height = (wsW - marginH) * 1.5 + 'px';
elem.el.style.minHeight = scale == 1 ? 'auto' : ''; elem.el.style.minHeight = scale == 1 ? 'auto' : '';
// Because of flexbox, wrap height is required // Because of flexbox, wrap height is required
wrap.style.height = window.innerWidth / 1.5 + 'px'; wrap.style.height = (wsW - marginH) * 1.5 / 2 + 'px';
} else { } else {
elem.el.style.width = window.innerWidth - marginW * scale + 'px'; elem.el.style.width = window.innerWidth - marginW * scale + 'px';
elem.el.style.height = window.innerHeight - marginH * scale + 'px'; elem.el.style.height = window.innerHeight - marginH * scale + 'px';
@@ -2667,6 +2667,8 @@ var Zoom = function () {
value: function onWindowResize(ev) { value: function onWindowResize(ev) {
var _this3 = this; var _this3 = this;
if (this.isZoomed_) this.zoomOut();
this.zws_.slides.forEach(function (elem) { this.zws_.slides.forEach(function (elem) {
var wrap = elem.el.parentElement; var wrap = elem.el.parentElement;
var div = wrap.parentElement; var div = wrap.parentElement;

4
static/js/webslides.min.js vendored
View File

File diff suppressed because one or more lines are too long