{"action":"opened","issue":{"url":"https://api.github.com/repos/tinganho/flanity.com/issues/2","labels_url":"https://api.github.com/repos/tinganho/flanity.com/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/tinganho/flanity.com/issues/2/comments","events_url":"https://api.github.com/repos/tinganho/flanity.com/issues/2/events","html_url":"https://github.com/tinganho/flanity.com/issues/2","id":128781792,"number":2,"title":"Stacked region","user":{"login":"tinganho","id":1324476,"avatar_url":"https://avatars.githubusercontent.com/u/1324476?v=3","gravatar_id":"","url":"https://api.github.com/users/tinganho","html_url":"https://github.com/tinganho","followers_url":"https://api.github.com/users/tinganho/followers","following_url":"https://api.github.com/users/tinganho/following{/other_user}","gists_url":"https://api.github.com/users/tinganho/gists{/gist_id}","starred_url":"https://api.github.com/users/tinganho/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tinganho/subscriptions","organizations_url":"https://api.github.com/users/tinganho/orgs","repos_url":"https://api.github.com/users/tinganho/repos","events_url":"https://api.github.com/users/tinganho/events{/privacy}","received_events_url":"https://api.github.com/users/tinganho/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-01-26T10:18:32Z","updated_at":"2016-01-26T10:18:32Z","closed_at":null,"body":"To increase the user experience we want to introduce stacked region. A stacked region is essentially a region where it can have multiple content. So when you define your page manifestation, you define an array of content and the last content will have last stack order corresponding to a `z-index` in CSS.\r\n\r\n```javascript\r\n.hasLayout(WebApp, {\r\n    Header: {\r\n        data: UserMe,\r\n        view: AppTopBarView,\r\n    },\r\n    Body: [\r\n    {\r\n        view: HeroView,\r\n    },\r\n    {\r\n        data: User,\r\n        relations: ['topics'],\r\n        view: TopicsView,\r\n    }\r\n    ]\r\n})\r\n```\r\nThe first item on the array is always the `base`. The `base` always exists on a stack. When navigating away from the `base` to a content other then the `base`. The other content will stack over the `base`.\r\n\r\nOn the client side, when navigating a stacked region. Let say that we go from `/@username1` to `/@username2`. Then the contents of `/@username2` must be stacked over `/@username1`. \r\n\r\nOn server rendering a region cannot have a stack length bigger than 2. So a user looses stack history when they hit the refresh button. We can saved the stack information on a cookie to not loose any stack information. But we think it is overkill. So when hitting the refresh there will be one content stacked over the `base` at most.\r\n\r\nA `stacked region` that covers the whole screen is an `overlay`.\r\n\r\n \r\n\r\n\r\n\r\n"}}