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
Loading
Loading
Loading
Loading
+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];

+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();
        }
+15.2 KiB
Loading image diff...
+15.3 KiB
Loading image diff...
+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; } }