Zoom responsive

.eslintrc

@@ -8,7 +8,7 @@
   },
   "rules": {
     "no-cond-assign": 0,
-    "no-console": 0,
+    "no-console": 2,
     "no-constant-condition": 2,
     "no-control-regex": 2,
     "no-debugger": 2,

src/js/plugins/zoom.js

@@ -95,19 +95,15 @@ export default class Zoom {
     divLayer.addEventListener('click', e => {
       this.zoomOut();
       this.ws_.goToSlide(elem.i);
-      e.stopPropagation();
     });
     wrap.appendChild(divLayer);
     // Slide number
     const slideNumber = document.createElement('span');
     slideNumber.className = 'slide-number';
-    slideNumber.textContent = `${elem.i+1} / ${this.zws_.slides.length}`;
+    slideNumber.textContent = `${elem.i+1}`;
     div.appendChild(slideNumber);
     // Zoom out when click in slide "border"
-    div.addEventListener('click', e => {
-      this.ws_.toggleZoom();
-      e.stopPropagation();
-    });
+    div.addEventListener('click', this.ws_.toggleZoom);
 
     this.setSizes_(div, wrap, elem);
   }
@@ -130,11 +126,20 @@ export default class Zoom {
     const scale = divCSS.width.includes('%') ?
       100 / DOM.parseSize(divCSS.width) :
       window.innerWidth / DOM.parseSize(divCSS.width);
-    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`;
+    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 = `${window.innerWidth / 1.5}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`;
+    }
   }
 
   /**

static/css/base.css

@@ -705,7 +705,7 @@ footer,
   height: 100%;
   margin: 0;
 }
-/* -- Responsive background video 
+/* -- Responsive background video
 https://fvsch.com/code/video-background/ -- */
 
 .fullscreen > .embed {
@@ -723,18 +723,18 @@ https://fvsch.com/code/video-background/ -- */
   .fullscreen > .embed > iframe,
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
-  .fullscreen > .embed > video { 
-    height: 300%; 
-    top: -100%; 
+  .fullscreen > .embed > video {
+    height: 300%;
+    top: -100%;
   }
 }
 @media (max-aspect-ratio: 16/9) {
   .fullscreen > .embed > iframe,
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
-  .fullscreen > .embed > video { 
-    width: 300%; 
-    left: -100%; 
+  .fullscreen > .embed > video {
+    width: 300%;
+    left: -100%;
   }
 }
 /* 2. If supporting object-fit, overriding (1): */
@@ -743,9 +743,9 @@ https://fvsch.com/code/video-background/ -- */
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
   .fullscreen > .embed > video {
-    top: 0; 
+    top: 0;
     left: 0;
-    width: 100%; 
+    width: 100%;
     height: 100%;
     object-fit: cover;
   }
@@ -3227,14 +3227,14 @@ button:disabled:hover {
 }
 
 /*=========================================
-15. Longform 
+15. Longform
 =========================================== */
 
 /* -- Posts = .wrap.longform -- */
 
 .longform {
-width: 72rem; 
-/* Why 72rem=720px? 
+width: 72rem;
+/* Why 72rem=720px?
 90-95 characters per line = better reading speed */
 }
 .longform .alignleft, .longform .alignright {
@@ -3351,12 +3351,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 }
 #webslides-zoomed.grid > .column {
   width: 25%;
-      -webkit-order: 0;
-    order: 0;
-    -webkit-flex: 0 1 auto;
-    flex: 0 1 auto;
-    -webkit-align-self: auto;
-    align-self: auto;
+  -webkit-order: 0;
+  order: 0;
+  -webkit-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  align-self: auto;
 }
 
 #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
@@ -3376,7 +3376,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   cursor: pointer;
 }
 #webslides-zoomed.grid > .column > .wrap-zoom:hover {
-transform: scale(1.02);
+  transform: scale(1.02);
 }
 
 .text-slide-number {
@@ -3385,4 +3385,22 @@ transform: scale(1.02);
   /*border-radius: .3rem;
   padding: 0 1.6rem;*/
   margin: .8rem auto;
- }
+ }
+
+@media all and (orientation: portrait) {
+  #webslides-zoomed.grid > .column {
+    width: 50%;
+  }
+  #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+    transform: scale(0.5) translate(-50%, -50vh);
+  }
+}
+
+@media (max-aspect-ratio: 2/3) {
+  #webslides-zoomed.grid > .column {
+    width: 100%;
+  }
+  #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+    transform: scale(0.5) translate(-50%, -30vh);
+  }
+}

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.2.1
- * Date: 2017-04-09
+ * Date: 2017-04-12
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2571,19 +2571,15 @@ var Zoom = function () {
       divLayer.addEventListener('click', function (e) {
         _this2.zoomOut();
         _this2.ws_.goToSlide(elem.i);
-        e.stopPropagation();
       });
       wrap.appendChild(divLayer);
       // Slide number
       var slideNumber = document.createElement('span');
       slideNumber.className = 'slide-number';
-      slideNumber.textContent = elem.i + 1 + ' / ' + this.zws_.slides.length;
+      slideNumber.textContent = '' + (elem.i + 1);
       div.appendChild(slideNumber);
       // Zoom out when click in slide "border"
-      div.addEventListener('click', function (e) {
-        _this2.ws_.toggleZoom();
-        e.stopPropagation();
-      });
+      div.addEventListener('click', this.ws_.toggleZoom);
 
       this.setSizes_(div, wrap, elem);
     }
@@ -2605,11 +2601,20 @@ var Zoom = function () {
 
       // Sets element size: window size - relative margins
       var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width);
-      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';
+      if (scale == 1) {
+        // If the scale is 100% means it is mobile
+        var 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 = window.innerWidth / 1.5 + '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';
+      }
     }
 
     /**