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 Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,949
    Vote Rating
    952
    Answers
    3623
    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 Software Engineer
    ________________
    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
    655
    Vote Rating
    37
    Answers
    21
    vadimv has a spectacular aura about vadimv has a spectacular aura about

      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
    410
    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>'
        ],
    :-)