Search code examples
angularmobileroutesresponsiveangular2-mdl

Best practice for Master Detail on Desktop/ Detail only on mobile for Angular2 and MD

I am posting this probably as I don't know the correct terminology of something that cannot be that uncommon.

Just wanting to know the best practice and some links to an example of this.

You have a master list - detail in a responsive site. In mobile view the page displays master list and its associated details in separate pages. However in desktop view, the master component is on the left, with the detail pages selected on the right. So you select an example on the master list and the detail part reflects the selected master record selected. You can also change the display of the selected detail, with buttons, for that selected master record.

This is all good until someone sends a detail link, taken from mobile view and someone opens this in desktop view, giving them a page they may not have encountered before, if they only use a desktop view. Ideally we would want to have the master-detail view in Desktop view, with the selected detail view displayed, as well. What is the best practice to avoid this scenario?

Do we re-route based on the size of the browser? What is the best practice? A simple link to an example of this, would be most appreciated too.

Regards

Mark

Solution

  • Web sites tend to use media queries to make them responsive on all different screen sizes.

    Depending on how complicated the view is on the app when it's desktop and mobile you could use something like ng2-responsive which lets you show different components using breakpoints for screen sizes xs / sm / md / lg / xl.

    Angular also have @angular/flex-layout which is currently in development that will use media queries breakpoints. Demo here.

    This way you would have the same link for all pages within the app so they can be used on desktop or mobile.

    Updated for the comment 1 below:

    Example all the mobile page URLs start with /mobile/

    Because how the browser needs to load the view to actually get the screen size the way ng2-responsive works is that you add for example

    Simple detection for mobile

    <template *isMobile (change)="onScreenSizeMobile($event)">

</template>

    Simple detection for desktop

    <template *isDesktop (change)="onScreenSizeDesktop($event)">

</template>

    Advanced detection for mobile

     <template  [responsive]="{
                           orientation:'landscape',
                           device: 'mobile'
                           }"
            (changes)="onScreenSizeMobile($event)">
 </template>

    Advanced detection for desktop

     <template  [responsive]="{
                           orientation:'landscape',
                           device: 'desktop'
                           }"
            (changes)="onScreenSizeDesktop($event)">
 </template>

    TypeScript

    constructor(private _router: Router ) {
  this.router = _router;
}

onScreenSizeMobile(event) {
  let currentRoute = this._router.url;
  if (!currentRoute.includes('mobile')) {
    this._router.navigate(['/mobile'+currentRoute]);
  }
}

onScreenSizeDesktop(event) {
  let currentRoute = this._router.url;
  if (currentRoute.includes('mobile')) {
    this._router.navigate([currentRoute.substring(7)]);
  }
}

    There are better alternatives if you really require a different url for desktop and mobile views you could detect on the server if the device is a mobile or not and redirect from the server would be a lot simpler that way.

    Is there a reason you can't have all the same pages but then in that page you load a different component depending on the device?

    If mobile load homeMobileComponent

    <app-home-mobile *isMobile>
</app-home-mobile>

    If desktop load homeDesktopComponent

    <app-home-desktop *isDesktop>
</app-home-desktop>