Split Layout problems

Trygve Wastvedt

unread,

Aug 14, 2014, 12:57:35 PM8/14/14

to chocolat...@googlegroups.com

(I deleted my last version of this because the title was no longer relevant to what I was typing. Sorry for any confusion.)

Hi all,

I'm new to ChocolateChip-UI and I'm still trying to understand how it works. I want to use a split layout for the app, and have a couple related questions. Based on this brief conversation I was hoping the split layout would transform into something like the slide-out when the window gets small enough. Is that what it should do? I've created a very simple test case and the left panel never changes width as I shrink the browser. Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="libs/chui-ios-3.6.3.min.css">
<script type="text/javascript" src="libs/jquery-2.1.1.js"></script>
<script src="libs/chui-3.6.3.min.js"></script>
<title>Test</title>
</head>
<body class="splitlayout">
<nav>
<h1>Master</h1>
</nav>
<article id="layout-left" class="master">
<section>
Content
</section>
</article>
<nav>
<h1>Detail</h1>
</nav>
<article id="layout-right" class="detail">
<section>
Content
</section>
</article>
</body>
</html>

Or am I missing something? What I would like is a menu which slides in and fills the screen on small devices, and acts as a sidebar or panel on larger screens.

Secondly, with this split layout, is there a preferred way to change content on the layout panels? Is it possible to nest articles so that I could have, for example, a series of articles under paging control in the detail side of the split layout? This one I can just try, but I wanted to know if there is a better way to do something like this.

Thanks,

Trygve

Robert Biggs

unread,

Aug 15, 2014, 12:13:57 AM8/15/14

to chocolat...@googlegroups.com

Hi Trygve,

Oops! That was a bad copy/paste. The split layout does not have a slide out feature implemented at the moment. However, when ChocolateChip-UI first shipped four years ago, it did provide a way of converting the master part into an iOS style popover, since that was the default behavior on iOS. In time Apple changed the behavior of their split layouts to always show the master section at all times, so we dropped that support as well. However, if you have some use case where you would like to hide the master section and show it, please provide us with exactly what you are looking for. We can whip up a custom version for you and others. We just need details of what you are expecting. If you go to the end of this video, you can see the old behavior for split views: https://www.youtube.com/watch?v=PfdUYJDAJL4

Or would you prefer some other behavior?

Trygve Wastvedt

unread,

Aug 15, 2014, 9:31:31 AM8/15/14

to chocolat...@googlegroups.com

Ok, that makes more sense. Good to know about the new default. I do want to try to stick with the iOS idiom as much as possible. I'll try to briefly explain my purpose here. I should note that I'm new to iOS development, so though I know what I want the app to do, I'm not sure what the best way is to do that to make it feel native.

I'm writing a small universal app (currently iOS only, but eventually Android as well) using the Metaio augmented reality SDK. I have a menu to select what object to show (first article, I think), then details about the selected object with a play button (second article), and then an article which is just a fullscreen view to show the AR visualization. Once a user gets to the final view of the AR content, I want to have an options panel which they can use to modify what they're seeing (show/hide items, control lighting, etc). Ideally on the iPad this options panel would show up as a popup or sidebar, so that you can make adjustments and watch their effect at the same time. On the iPhone there isn't room for that, so it would need to switch to being a fullscreen panel.

I think the split view looks great, but it doesn't work on iPhone, and it's not intended for the master view to be hidden (I think?). Perhaps a popover makes the most sense, one which fills the screen on iPhone. Is there a way to make an item a popover on larger (iPad) screens and a slide-out on small screens? Or is there a way to make a slide-out only slide partway out on larger screens?

Does all of that make sense? Thanks for the help!

Trygve

Robert Biggs

unread,

Aug 15, 2014, 3:47:16 PM8/15/14

to chocolat...@googlegroups.com

Actually, in Apple's SDK, there is no support for a split view on the iPhone. That's an iPad only feature. That said, things could change with the introduction of larger iPhones. Since Android phone general have larger screens than iPhone, I made it so the split view works on them using media queries.

But, you've got me rethinking this all now. I might look into enabling split views for phone using converting the master view into a slide out and in portrait orientation, hide it and show the Hamburger Button. Then in landscape mode show the master view. To me that sounds like something that should work for all devices.

Trygve Wastvedt

unread,

Aug 18, 2014, 9:20:40 AM8/18/14

to chocolat...@googlegroups.com

That sounds great! I think that would fit the bill perfectly for what I'm trying to achieve.

--
You received this message because you are subscribed to a topic in the Google Groups "ChocolateChip-UI" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/chocolatechip-ui/YxDXbWR0Qv8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to chocolatechip-...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward