Commit cb59129c authored by Nick Poulden's avatar Nick Poulden
Browse files

Add message fof non-WebKit browsers on Touch examples

parent 2ddaf532

template/app/view/examples/Device.js

+21 −11
Original line number Diff line number Diff line
@@ -32,6 +32,7 @@ Ext.define('Docs.view.examples.Device', { 
        Ext.apply(this, this.getIframeSize());

        this.id = this.id || Ext.id();



        if (Ext.isWebKit) {

            // Template for the DIV containing device image and iframe

            this.tpl = new Ext.XTemplate(

                '<div class="touchExample {device} {orientation}">',
@@ -44,6 +45,15 @@ Ext.define('Docs.view.examples.Device', { 
                    }

                }

            );

        } else {

            this.tpl = new Ext.XTemplate(

                '<div class="touchExample {device} {orientation}">',

                    '<div id={id} class="wrong-browser" style="width: {width}; height: {height};">',

                        '<div style="padding: 20px;">Sencha Touch only functions on WebKit based browsers. <br /><br />Please use Google Chrome or Safari to see live examples.</div>',

                    '</div>',

                '</div>'

            );

        }

    },



    /**

template/app/view/examples/InlinePreview.js

+12 −9
Original line number Diff line number Diff line
@@ -51,6 +51,8 @@ Ext.define('Docs.view.examples.InlinePreview', { 
    update: function(code) {

        var options = this.options;

        var iframe = document.getElementById(this.getIframeId());



        if (iframe) {

            // Something is not quite ready when onload fires.

            // I'm unsure what I should wait for. So I'm currently adding just this nasty delay.

            // 1 ms works in Chrome, Firefox wants something bigger. Works in IE too.
@@ -60,6 +62,7 @@ Ext.define('Docs.view.examples.InlinePreview', { 
                }, 100);

            };

            iframe.src = Docs.touchExamplesUi ? "touchIframe.html" : "extIframe.html";

        }

    },



    // Returns iframe ID for this inline example component.

template/app/view/examples/TouchContainer.js

+14 −11
Original line number Diff line number Diff line
@@ -91,6 +91,8 @@ Ext.define('Docs.view.examples.TouchContainer', { 
    // Scale down the example when in tablet mode

    updateScale: function() {

        var iframe = Ext.query('iframe', this.el.dom)[0];



        if (iframe) {

            iframe.onload = Ext.Function.bind(function() {

                var style = document.createElement("style");

                var styleContent = "html { overflow: hidden }";
@@ -102,6 +104,7 @@ Ext.define('Docs.view.examples.TouchContainer', { 
                style.innerHTML = styleContent;

                iframe.contentWindow.document.body.appendChild(style);

            }, this);

        }

    },



    updateTitle: function() {

template/resources/sass/viewport.scss

+7 −0
Original line number Diff line number Diff line
@@ -1230,6 +1230,13 @@ p.screenshot { 
      @include border-radius(10px);

      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); } } }



.touchExample .wrong-browser {

  margin-top: 120px;

  font-weight: bold;

  text-align: center;

  font-size: 120%;

  color: #666; }



.tablet.landscape {

  padding: 79px 83px;

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