iOS 7 demo on site (and in source) renders sloppy

[jorisw]

Hi.

Am I crazy or does the default iOS 7 demo look sloppy? Looks this way to me both in the iOS Simulator and on the demo site at http://chocolatechip-ui.com/demo#/main .

To be specific:

• The window titlebar contents sit way too close to the time in the status bar
• The list items' borders are indented
• The nav 'greater than' symbols are badly aligned

[sourcebits-robertbiggs]

Joris,

That does look bad. But I’m not able to reproduce it on this end with the simulator running iOS 6 or 7 and on iPhones running iOS 6 and 7. Here’s my screenshots

Maybe you could inform me what Operating System your computer is running, what browser version, and what OS version your devices are running.

Cheers

Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 5:45 AM, Joris Witteman notifications@github.com wrote:

Hi.

Am I crazy or does the default iOS 7 demo look sloppy? Looks this way to me both in the iOS Simulator and on the demo site at http://chocolatechip-ui.com/demo#/main .

— Reply to this email directly or view it on GitHub.

[jorisw]

I'm sorry to say your screenshots look just like mine do, Robert, except for the distance to the title bar which may have been a result of the way I added the demo to my PhoneGap project.

In your screenshots, the following issues are visible:

• The list items' borders are indented (they should extend all the way to the left)
• The navigation symbol ( > ) is badly center-aligned on every row.

[sourcebits-robertbiggs]

Actually, that is the iOS 7 list style. Apple indents them on the left. I've included some screenshots from Apple's own apps that show how lists differ from iOS 6.

As far as alignment of navigation indicators, ChUI has two types of layout, basic and comp. Basic layout simply displays items in a vertically stacked order. If you want more precise control you need to use the comp layouts. Please refer to to tutorial for layouts on www.chocolatechip-ui.com. Comp layouts are more complicated but give you more control over things like alignment. Similarly, if you look in the examples provided with ChocolateChip-UI you'll notice there are two types of list examples: normal and comp. If you compare them side by side you'll notice that comp list provide more complex layouts (hence the name comp) and more control over how items are aligned both vertically and horizontally. Ordinary lists offer merely basic layout capabilities. In simple use cases a plain list will work. If, however you want a professional looking layout, you'll want to use the comp lists.

Please take a look at this codepen for an example of comp layouts: http://codepen.io/rbiggs/pen/HckJl