Commit 6a60ee64 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Adjust icons of touch examples index page. 

Wrap all icons in index pages inside div. For touch examples, add
extra touch-examples-ui class to examples index page and adjust the
styling a little in CSS.
parent e55ba1ed

template/app/view/examples/Index.js

+2 −1
Original line number Diff line number Diff line
@@ -13,6 +13,7 @@ Ext.define('Docs.view.examples.Index', { 
    autoScroll: true,



    initComponent: function() {

        this.cls += Docs.touchExamplesUi ? " touch-examples-ui" : "";

        var baseUrl = Docs.touchExamplesUi ? "touch/examples" : "extjs/examples/shared/screens";



        this.items = [
@@ -20,7 +21,7 @@ Ext.define('Docs.view.examples.Index', { 
            Ext.create('Docs.view.ThumbList', {

                itemTpl: [

                    '<dd ext:url="#!/example/{url}">',

                        '<img src="'+baseUrl+'/{icon}"/>',

                        '<div class="thumb"><img src="'+baseUrl+'/{icon}"/></div>',

                        '<div><h4>{text}',

                            '<tpl if="status === \'new\'">',

                                '<span class="new-sample"> (New)</span>',

template/app/view/guides/Index.js

+1 −1
Original line number Diff line number Diff line
@@ -17,7 +17,7 @@ Ext.define('Docs.view.guides.Index', { 
            { xtype: 'container', html: '<h1 class="eg">Guides</h1>' },

            Ext.create('Docs.view.ThumbList', {

                itemTpl: [

                    '<dd ext:url="#!/guide/{name}"><img src="guides/{name}/icon-lg.png"/>',

                    '<dd ext:url="#!/guide/{name}"><div class="thumb"><img src="guides/{name}/icon-lg.png"/></div>',

                        '<div><h4>{title}</h4><p>{description}</p></div>',

                    '</dd>'

                ],

template/app/view/videos/Index.js

+1 −1
Original line number Diff line number Diff line
@@ -17,7 +17,7 @@ Ext.define('Docs.view.videos.Index', { 
            { xtype: 'container', html: '<h1 class="eg">Videos</h1>' },

            Ext.create('Docs.view.ThumbList', {

                itemTpl: [

                    '<dd ext:url="#!/video/{id}"><img src="{thumb}"/>',

                    '<dd ext:url="#!/video/{id}"><div class="thumb"><img src="{thumb}"/></div>',

                        '<div><h4>{title}',

                        '</h4><p>{[values.description.substr(0,80)]}...</p></div>',

                    '</dd>'

template/resources/sass/viewport.scss

+17 −2
Original line number Diff line number Diff line
@@ -937,13 +937,28 @@ p.screenshot { 
    zoom: 1;

    line-height: 1em;

}

.all-demos dd img {

    border: 1px solid #ddd;

.all-demos dd .thumb {

    float:left;

    height:90px;

    margin:5px 0 0 5px;

    width:120px;

}

.all-demos dd .thumb img {

  border: 1px solid #ddd;

  max-height:88px;

  max-width:118px;

  margin: auto;

}



// Special styles for Touch examples icons

.all-demos.touch-examples-ui dd .thumb img {

  border: 0;

  margin: 7px 0 0 22px;

}

.all-demos.touch-examples-ui dd .thumb {

  border: 1px solid #ddd;

  @include vertical-gradient(#ffffff, #f9f9f9);

}



.all-demos dd div {

    float:left;