Add the possibility to specify the height of devices. Closes #599

src/canvas/view/FrameView.js

@@ -16,17 +16,19 @@ module.exports = require('backbone').View.extend({
     this.config = o.config || {};
     this.ppfx = this.config.pStylePrefix || '';
     this.em = this.config.em;
-    this.listenTo(this.em, 'change:device', this.updateWidth);
+    this.listenTo(this.em, 'change:device', this.updateDim);
   },
 
   /**
-   * Update width of the frame
+   * Update dimensions of the frame
    * @private
    */
-  updateWidth(model) {
+  updateDim(model) {
     const em = this.em;
     const device = em.getDeviceModel();
-    this.el.style.width = device ? device.get('width') : '';
+    const style = this.el.style;
+    style.width = device ? device.get('width') : '';
+    style.height = device ? device.get('height') : '';
     this.udpateOffset();
     em.stopDefault({ preserveSelected: 1 });
     this.$el.on(motionsEv, this.udpateOffset);

src/device_manager/index.js

@@ -1,8 +1,4 @@
 /**
- * * [add](#add)
- * * [get](#get)
- * * [getAll](#getall)
- *
  * Before using methods you should get first the module from the editor instance, in this way:
  *
  * ```js
@@ -65,6 +61,10 @@ module.exports = () => {
        * @return {Device} Added device
        * @example
        * deviceManager.add('Tablet', '900px');
+       * deviceManager.add('Tablet2', '900px', {
+       *  height: '300px',
+       *  widthMedia: '810px', // the width that will be used for the CSS media
+       * });
        */
       add(name, width, opts) {
         var obj = opts || {};

src/device_manager/model/Device.js

@@ -10,6 +10,9 @@ module.exports = Backbone.Model.extend({
     // Width to set for the editor iframe
     width: '',
 
+    // Height to set for the editor iframe
+    height: '',
+
     // The width which will be used in media queries,
     // If empty the width will be used
     widthMedia: null,

src/styles/scss/_gjs_canvas.scss

@@ -1,3 +1,5 @@
+$frameAnimation: 0.35s ease;
+
 .#{$cv-prefix}canvas {
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
@@ -10,15 +12,6 @@
   padding-top: 40px;
   z-index: 1;
 
-  > iframe {
-    height: 100%;
-    outline: medium none;
-    width: 100%;
-    border: none;
-    margin: 0 auto;
-    display: block;
-  }
-
   .#{$app-prefix}ghost {
     display: none;
     pointer-events: none;
@@ -69,7 +62,18 @@
 }
 
 .#{$app-prefix}frame {
-  transition: width 0.35s ease;
+  outline: medium none;
+  height: 100%;
+  width: 100%;
+  border: none;
+  margin: auto;
+  display: block;
+  transition: width $frameAnimation, height $frameAnimation;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .#{$app-prefix}toolbar {