Commit 570f8581 authored by Nick Poulden's avatar Nick Poulden
Browse files

Move tabs to top of inline examples

parent 18563f6f

template/app/view/examples/Inline.js

+8 −8
Original line number Diff line number Diff line
@@ -22,27 +22,27 @@ Ext.define('Docs.view.examples.Inline', { 


    dockedItems: [{

        xtype: 'toolbar',

        dock: 'left',

        padding: '0 2',

        dock: 'top',

        height: 30,

        style: 'background: none;',

        items: [

            {

                iconCls: 'code',

                padding: '0 2 0 0',

                margin: 0,

                tooltip: 'Code'

                margin: '0 3 0 0',

                text: 'Code'

            },

            {

                padding: 0,

                margin: 0,

                margin: '0 3 0 0',

                iconCls: 'preview',

                tooltip: 'Preview'

                text: 'Live Preview'

            },

            {

                padding: 0,

                margin: 0,

                iconCls: 'copy',

                tooltip: 'Select'

                text: 'Select Code'

            }

        ]

    }],
@@ -115,7 +115,7 @@ Ext.define('Docs.view.examples.Inline', { 
    // Syncs the height with number of lines in code example.

    updateHeight: function() {

        var previewHeight = this.preview.getHeight();

        var editorHeight = this.editor.getHeight();

        var editorHeight = this.editor.getHeight() + 30;

        if (Docs.touchExamplesUi && previewHeight > 0) {

            this.setHeight(previewHeight);

        }

template/resources/sass/_examples.scss

+12 −6
Original line number Diff line number Diff line
@@ -6,24 +6,30 @@ 
  // add padding to make right scrollbar visible

  padding-right: 25px;

  // Inline example component buttons

  span.x-btn-inner {

    line-height: 12px;

  }

  .active span.x-btn-inner {

    color: #57a7dc;

  }

  span.x-btn-icon {

    background: url(../images/example-icons.png) no-repeat;

    opacity: 0.6;

    &.code {

      background-position: -2px -20px; }

      background-position: -2px -19px; }

    &.preview {

      background-position: -3px -62px; }

      background-position: -3px -65px; }

    &.copy {

      background-position: -2px -85px; } }

      background-position: -2px -88px; } }

  .active span.x-btn-icon {

    background: url(../images/example-icons.png) no-repeat;

    opacity: 1;

    &.code {

      background-position: -30px -20px; }

      background-position: -30px -19px; }

    &.preview {

      background-position: -31px -62px; }

      background-position: -31px -65px; }

    &.copy {

      background-position: -30px -85px; } } }

      background-position: -30px -88px; } } }



.touchExample .wrong-browser {

  margin-top: 120px;