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 => {
+    div.addEventListener('click', this.ws_.toggleZoom);
-      this.ws_.toggleZoom();
-      e.stopPropagation();
-    });
 
     this.setSizes_(div, wrap, elem);
   }
@@ -130,12 +126,21 @@ export default class Zoom {
     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 = `${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`;
     }
+  }
 
   /**
    * Toggles zoom

static/css/base.css

@@ -3386,3 +3386,21 @@ transform: scale(1.02);
   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) {
+      div.addEventListener('click', this.ws_.toggleZoom);
-        _this2.ws_.toggleZoom();
-        e.stopPropagation();
-      });
 
       this.setSizes_(div, wrap, elem);
     }
@@ -2605,12 +2601,21 @@ 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);
+      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';
       }
+    }
 
     /**
      * Toggles zoom