1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Naaldwijk
    Posts
    23
    Vote Rating
    0
    royvanmarrewijk is on a distinguished road

      0  

    Question Answered: Sencha 2.2.0. coverflow problem

    Answered: Sencha 2.2.0. coverflow problem


    Hi,

    With the use of Sencha Architect I created a Sencha touch 2.1.0 app, within this app I implemented a coverflow (http://elmasse.gaver.nl/) which worked out very well. Yesterday I performed an update from ST 2.1.0 to ST 2.2.0 using Sencha Architect, with the negative effect that the cover's are straight in stead of with an angle, see image.

    220.png
    I hope you don't mind the pictures ;-)

    As you can see only the width of the images has been transformed, so my question is, aren't the images rotated because of a CSS (I use scss) problem, or should I look for it in code.

    Code:
    @import 'sencha-touch/default/all';
    
    
    /**
     * @global {color} [$cover-bg-color=#333]
     * Background-color for cover.
     *
     * @class Ext.ux.Cover
     * @xtype cover
     */
    $cover-bg-color: black !default;
    
    
    
    
    @mixin ux-cover {
        .ux-cover {
            background-color: $cover-bg-color;
            position: relative;
            overflow: hidden;
            @include display-box;
            @include perspective(1000);
            
            -webkit-touch-callout: none;
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
    
            .ux-cover-scroller {
                @include transform-style(preserve-3d);
    
    
                @include transition-duration(0.4s);
                @include transition-timing-function(easy-out);
    
    
    
    
                //@include transition-property(-webkit-transform);
                -webkit-transition-property: -webkit-transform;
    
    
                
                .ux-cover-item {
                    padding-top: 1px;
                    @include transform-style(preserve-3d);
                    @include transition-duration(0.4s);
                    @include transition-timing-function(easy-out);
                    
                    @include transition-property(-webkit-transform);
                    //-webkit-transition-property: -webkit-transform;
                    
                    background-color: $cover-bg-color;
    
    
                    position: absolute;
                    
                }
            }
        
            .ux-cover-item-inner {
                background-color: #d0d0d0;
                //not yet implemented in compass?
                -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent),  to(rgba(0,0,0, 0.3)));
            }
        
        }
    
    
    
    
    }

  2. The DOM could have changed so you need to look to see what that structure is to make sure the rule sare applied to the correct element.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The DOM could have changed so you need to look to see what that structure is to make sure the rule sare applied to the correct element.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    654
    Vote Rating
    26
    Answers
    21
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    is the "scrollable" config null ? if not, then make by default to be null. It's a very recent commit which fixes this.

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    Answers
    18
    digeridoopoo will become famous soon enough

      0  

    Default Awesome, thanks!

    Awesome, thanks!


    Great, it works. Here is a part of my code as an example:

    Code:
    var cover = Ext.create('Ext.ux.Cover', {
        iconCls: 'home',
        title: 'CoverFlow',
        itemCls: 'my-cover-item',
        scrollable: null,
        //These are just for demo purposes.
        height: (Ext.os.deviceType !== 'Phone')? 300: undefined,
        width: (Ext.os.deviceType !== 'Phone')? 800: undefined,
        //end-demo
        itemTpl : [
        '<div>',
        '<div class="dev">{firstName} {lastName}</div>',
        '<div class="company">{company}</div>',
        '<div class="image"><tpl if="image"><img  src="{image}"></tpl></div>',
        '</div>'
        ],
    :-)