Help with responsive layout

Help Requests
1

I need a little help. I’m fairly familiar with Aurelia, but not a complete expert. In our app, we have a couple of master/detail pages with a layoutView:property in the route. The layout view is then defined as:

<template>
    <require from="./list-details.css"></require>
    <slot name="pageTitle"></slot>
    <div class="list-details">
        <div class="actions">
            <slot name="actions"></slot>
        </div>
        <div class="list">
            <slot name="list"></slot>
        </div>
        <div class="details">
            <slot name="details"></slot>
        </div>
    </div>
</template>

And the view is defined as:

<template>
   <page-title slot="pageTitle">
   <action-button slot="actions">
   <div slot="list">
        <!-- stuff to generate list -->
   </div>
   <div slot="details">
       <compose view="./details.html"></compose>
  </div>
</template>

This layout is not very friendly on a mobile device and what we’d like to do is to present the list as a page, and the details as a separate navigable page. This would be akin to how the iOS UISplitView works between the iPad and an iPhone.

I’m really looking for the best way to be able to switch between a full list/details page to a list page > details page model dynamically. Another way to think about this problem is that we need to restructure the layout and add dynamic routes.

2

Ideally you should try and achieve it all via CSS media queries. You’ll need to programmatically set some CSS classes when the detail view is open so that you can modify the layout automatically via CSS. You’ll also need to show and hide a close button via the media queries so the users have a way to go back to the list.

Just be aware that anything not visible behind should have visibility: hidden set by media queries too, so that the user cannot tab to UI that cannot be seen.

If you can do it with CSS and no JavaScript to detect screen size, your app will automatically switch to and from the compact layout if the user resizes their browser window or maybe more importantly, if the user rotates their tablet.

1 Like
3

Ideally, yes. My point is that some things are not achievable through CSS media queries and was wondering if there are people with good solutions to those that require a different router/layout between web and mobile.

4

This is a really interesting idea. I don’t think there is a quick answer outside of the excellent advice @timfish has given above. Reach out to me personally if you’re interested in getting personalized help.