diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 2b84cb8..2433585 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -42,7 +42,6 @@ export default class Zoom { this.preBuildZoom_(); document.body.addEventListener('keydown', this.onKeyDown.bind(this)); - window.addEventListener('resize', this.onWindowResize.bind(this)); } /** @@ -115,42 +114,6 @@ export default class Zoom { const slideNumber = DOM.createNode('p', '', `${elem.i+1}`); slideNumber.className = 'text-slide-number'; div.appendChild(slideNumber); - - this.setSizes_(div, wrap, elem); - } - - /** - * Sets layers size - * @param {Element} div flexbox element - * @param {Element} wrap wrapping element - * @param {Element} elem slide element - */ - setSizes_(div, wrap, elem) { - // Calculates the margins in relation to window width - const divCSS = window.getComputedStyle(div); - const marginW = DOM.parseSize(divCSS.paddingLeft) - + DOM.parseSize(divCSS.paddingRight); - const marginH = DOM.parseSize(divCSS.paddingTop) - + DOM.parseSize(divCSS.paddingBottom); - - // Sets element size: window size - relative margins - const scale = divCSS.width.includes('%') ? - 100 / DOM.parseSize(divCSS.width) : - window.innerWidth / DOM.parseSize(divCSS.width); - if (scale === 1) { - // If the scale is 100% means it is mobile - const wsW = this.ws_.el.clientWidth; - elem.el.style.width = `${(wsW - marginW) * 2}px`; - elem.el.style.height = `${(wsW - marginH) * 1.5}px`; - elem.el.style.minHeight = scale === 1 ? 'auto' : ''; - // Because of flexbox, wrap height is required - wrap.style.height = `${(wsW - marginH) * 1.5 / 2}px`; - } else { - elem.el.style.width = `${window.innerWidth - marginW * scale}px`; - elem.el.style.height = `${window.innerHeight - marginH * scale}px`; - // Because of flexbox, wrap height is required - wrap.style.height = `${window.innerHeight / scale}px`; - } } /** @@ -198,17 +161,4 @@ export default class Zoom { this.isZoomed_ = false; document.body.style.overflow = ''; } - - /** - * When windows resize it is necessary to recalculate layers sizes. - */ - onWindowResize() { - if (this.isZoomed_) this.zoomOut(); - - this.zws_.slides.forEach(elem => { - const wrap = elem.el.parentElement; - const div = wrap.parentElement; - this.setSizes_(div, wrap, elem); - }); - } } diff --git a/src/scss/modules/_zoom.scss b/src/scss/modules/_zoom.scss index dbf701f..baafc28 100644 --- a/src/scss/modules/_zoom.scss +++ b/src/scss/modules/_zoom.scss @@ -12,10 +12,25 @@ position: relative; z-index: 2; + .slide { + height: 100%; + width: 400%; + + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + height: 200%; + width: 200%; + } + + @media (max-aspect-ratio: 2 / 3) { + height: 200%; + width: 200%; + } + } + > .wrap { @media (min-width: 1024px) { + padding-bottom: 12rem; padding-top: 12rem; - padding-bottom:12rem; } } @@ -23,13 +38,32 @@ align-self: auto; flex: 0 1 auto; order: 0; + position: relative; width: 25%; + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + width: 50%; + } + + @media (max-aspect-ratio: 2 / 3) { + width: 100%; + } + > .wrap-zoom { + display: inline-block; + height: 25vh; overflow: hidden; position: relative; transition: .3s; + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + height: 50vh; + } + + @media (max-aspect-ratio: 2 / 3) { + height: 50vh; + } + &:hover { transform: scale(1.02); z-index: 2; @@ -61,16 +95,6 @@ transform: scale(.5) translate(-50%, -50%); } } - - #webslides-zoomed .column { - @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { - width: 50%; - } - - @media (max-aspect-ratio: 2 / 3) { - width: 100%; - } - } } .text-slide-number { diff --git a/static/css/webslides.css b/static/css/webslides.css index 466e782..0e5bcd3 100644 --- a/static/css/webslides.css +++ b/static/css/webslides.css @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-21 + * Date: 2017-06-27 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -1922,6 +1922,10 @@ About, Philosophy... float: left; margin-right: 2.4rem; } } +/*================================================= +6.6 Reasons/Why/Numbers (counter-increment) +