1. #1
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Question Answered: Retina Screen Repeating CSS Images

    Answered: Retina Screen Repeating CSS Images


    Hello,

    I'm having some trouble wrapping my head around the setup for a web app using Sencha 2 for the retina display.

    I've found things that are supposed to help but don't like the
    HTML Code:
    <meta name="viewport" content="width=640" />
    or

    HTML Code:
    <link href="highres.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css">
    or

    Code:
    background-size: 320px 100px;
    But what if I want a image set to repeat-x for the background of a toolbar. I also want it fluid width so orientation doesn't matter. I keep trying different ways to get this to work and nothing. Everything is blowing up way to big or doesn't apply to repeating images. Am I missing something?

    Any direction would be much appreciated.

    Thanks!

    Trozdol

  2. Okay, so I made a barebones example showing this off:

    Demo: http://rdougan.github.com/barebones-retina-css/
    Source: https://github.com/rdougan/barebones-retina-css

    Key points:

    - both normal and retina versions of the images are in one file
    - background-size must be set, and it must be the full size of the image

    Hopefully this helps.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    So all you want is a background on the toolbar that repeats on the x axis only?
    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 - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Your second line of code should work. You should have a CSS dedicated to just retina displays. I've been using this elsewhere.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #4
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    @Mitchell
    Yes but for a retina screen showing up at the right scale. Repeating the image is not a problem.

    @Robert
    I've tried that. I'm focusing on the retina css right now and everything shows up huge on the iphone 4 with any meta stuff I've tried.

    If I use the line you recommend I the main css styles. If I remove the main css and rely only on the high res version it doesn't load it. It just uses the default Sencha styles.

    Thanks for the reply guys!

    Trozdol

  6. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You should never have to insert any additional <meta> tags when you use Sencha Touch. It is all handled for you.

    All you should worry about is:

    - including ST CSS
    - include custom CSS
    - include retina images in a highres.css

    I am working on an application which does just that, and the above media <link> works just fine.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #6
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    That's so odd. I took out any meta stuff. It's still blown up. I've double checked

    Could it be that I made my images wrong? I created everything based on the 640px x 960px dimensions and have been saving out images for web. Could I just have the math all wrong?

    The pattern I created for the toolbar is 110px tall for the retina screen.

    Here's my index.html

    Code:
    <!DOCTYPE html><html>
    
    
    <head>
    
    
        <title>MGP Style Test</title>
        <script src="lib/st1.1/sencha-touch-debug-w-comments.js" type="text/javascript"></script>
    
    
        <link href="lib/st1.1/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
        <link href="lib/app.css" rel="stylesheet" type="text/css" />
        <link href="lib/apphires.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css">
        <script src="lib/app.js" type="text/javascript"></script>
    
    
    </head>
    
    
    <body>
    </body>
    
    
    </html>
    Here's my css (incomplete)

    Am I missing something simple?

    Code:
    .x-fullscreen{
    background: url(i/canvas-blue-bg@2.jpg) repeat;
    }
    
    .x-docked-top{
    height: 110px;
    background: url(i/leather-top-bg@2.png) repeat-x;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    }
    
    
    
    .x-list{
    background-color: transparent; 
    border: none; 
    }
    .x-list-item{
    height: 170px;
    margin: 0 0 30px 0;
    border: none;
    padding: 1em;
    }
    .listImg{
    width: 135px;
    height: 135px;
    border: solid #dcd097 10px;
    position: relative;
    float: left;
    margin: 0 20px 0 20px;
    background: #dcd097;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    }
    .listThumb{
    width: 135px;
    height: 135px;
    border: solid #dcd097 10px;
    position: absolute;
    top: -10px;
    left: -10px;
    float: left;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-10deg)
    }
    .listShortDesc{
    margin: 5px 0 0 10px;
    font-size: 1.5em;
    font-weight: bold;
    font-style: italic;
    }
    
    
    .listShortDesc p{
    margin: 20px 0 5px 0;
    }
    
    
    
    
    .listLongDesc{
    font-size: 1.2em;
    font-style: italic;
    }
    
    
    .listLongDesc p{
    margin: 0 0 5px 0;
    }
    
    
    .listDate{
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: right;
    color: #fff;
    font-style: italic;
    }
    
    
    .listBg{
    background: url(i/list-pattern-bg@2.png) left 15px repeat-x;
    width: 100%;
    position: absolute;
    top: 0px;
    height: 100%;
    padding: 0 0 0 0px;
    }
    
    
    .listBgEnd{
    background: url(i/list-end-bg@2.png) right  15px no-repeat;
    width: 27px;
    position: absolute;
    top: 0px;
    right: -27px;
    height: 100%;
    }
    Last edited by Trozdol; 31 Jan 2012 at 9:43 AM. Reason: Forgot to mention...

  8. #7
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Okay, so I made a barebones example showing this off:

    Demo: http://rdougan.github.com/barebones-retina-css/
    Source: https://github.com/rdougan/barebones-retina-css

    Key points:

    - both normal and retina versions of the images are in one file
    - background-size must be set, and it must be the full size of the image

    Hopefully this helps.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  9. #8
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    Wow! Thanks for the example.

    I just realized something that may have made the difference and I feel like an . I started with Sencha 2 then switched after I couldn't get anything to show up. Their docs seem to be all for Sencha Touch 1 even when it's for 2. :/

    I saw that you have ui: 'retina' does that make sure it scales things down? Also noticed the classes that end in retina. I didn't know those were there.

    Thanks and sorry if my switch back to ST 1 was why none of this was working. I'll have to try and figure out how to make my project work in Sencha 2.

  10. #9
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    The documentation for Sencha Touch 2 is far superior than 1.x's. I'm not sure what you are referring to as far as it being the same; but let me know and I can fix it.

    As for the 'ui' configuration: no, it won't change it. That just allows me to create the new use above. For example:

    ui: 'retina'

    means that..

    .x-toolbar-retina

    class will be added to the button element.

    That's it.

    The same applies to Sencha Touch 1, FYI.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  11. #10
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    29
    Answers
    1
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    That's pretty cool!!

    I couldn't figure out what was causing mine not to work after I added your suggestions so I took what you linked to and tweaked the retina css.

    If you wanna check it out you can look here: http://phs4j.com/-mgp/retina-test.html

    I don't have anything styled for the reg browser just yet so Retina only.

    Thanks so much! This has been driving me crazy for 2 weeks!