Commit 94bdfce1 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Implement miniphone device for @example. 

Miniphone is rendered as half of iPhone.

So one would typically use:

    @example miniphone portrait

The landscape mode is probably useless, but it's there for
completeness's sake.
parent e6233023

template/app/view/examples/Device.js

+2 −1
Original line number Diff line number Diff line
@@ -15,7 +15,7 @@ Ext.define('Docs.view.examples.Device', { 
        id: undefined,

        /**

         * @cfg {String} device

         * Either phone or tablet.

         * Either phone, miniphone or tablet.

         * @accessor

         */

        device: 'phone',
@@ -69,6 +69,7 @@ Ext.define('Docs.view.examples.Device', { 
        // device dimensions in landscape orientation

        var landscape = {

            phone: {width: '481px', height: '320px'},

            miniphone: {width: '219px', height: '320px'},

            tablet: {width: '717px', height: '538px'}

        }[this.device];

template/app/view/examples/InlinePreview.js

+1 −1
Original line number Diff line number Diff line
@@ -23,7 +23,7 @@ Ext.define('Docs.view.examples.InlinePreview', { 
        if (Docs.touchExamplesUi) {

            return Ext.create('Docs.view.examples.Device', {

                id: this.getIframeId(),

                device: this.options.tablet ? "tablet" : "phone",

                device: this.options.tablet ? "tablet" : (this.options.miniphone ? "miniphone" : "phone"),

                orientation: this.options.portrait ? "portrait" : "landscape"

            }).toHtml();

        }

template/resources/images/iphone-small-l.jpg

0 → 100644
+15.2 KiB
Loading image diff...

template/resources/images/iphone-small-p.jpg

0 → 100644
+15.3 KiB
Loading image diff...

template/resources/sass/viewport.scss

+12 −0
Original line number Diff line number Diff line
@@ -1235,6 +1235,18 @@ p.screenshot { 
  height: 724px;

  background: url(../images/iphone-p.jpg) no-repeat; }



.miniphone.landscape {

  padding: 22px 6px 26px 127px;

  width: 350px;

  height: 368px;

  background: url(../images/iphone-small-l.jpg) no-repeat; }



.miniphone.portrait {

  padding: 127px 22px 6px 26px;

  width: 368px;

  height: 350px;

  background: url(../images/iphone-small-p.jpg) no-repeat; }



.example-container {

  h1 {

    padding: 15px 0 !important; } }