Different Layout based on screen form factors



  • I want a screen based on common components that has a different layout when it’s run a small form factors.
    More concrete on larger screens I want a screen that has 2 columns for visualizing master detail structure, left column is a list with master data, right column is the detail data.
    On smaller screens I only want to visualize the master data (so, the left column but full screen) and a ‘row click’ should navigate to a dedicated detail screen.
    I’m currently doing this with the javascript platform detection which I can use both the in the html and javascript.
    So e.g. for the logic of the master/detail:
    <div :class="{'col-4': $q.platform.is.desktop, 'col-12':!$q.platform.is.desktop}">
    and inside javascript I can provide dedicated handling for a row click in the master list:

     projectItemClicked(item) {
          if (this.$q.platform.is.desktop) {
            if (!canSave) {
              this.selected = item
            }
          } else {
            this.$router.push({ name: 'OrderItemEdit', params: { id: item.id, parentId: this.parentId } })
          }
        },
    

    This works nice but I’m evaluating another approach.
    The drawback of the above approach is that I can only make distinction desktop/non-desktop.

    • on large tablets I also get the one column layout
    • when a destkop uses a small browser window, the layout is still in 2 columns.

    I’m aware that flexbox could help here but I’m not understanding how exactly.
    With flexbox I could make sure that on small form factors the 2 columns are transposed to rows. Not completely what I want because on small form factors I don’t want to see the second column.
    How could I make logic decisions in javascript (as above)?
    thanks for the guidance.
    paul.



  • I’m interested in doing the same thing, and if I read this correctly: https://quasar-framework.org/components/window-resize-observable.html then you should be able to do something on onResize() by comparing size.width to your breakpoints.



  • @dnix cool. That’s the way to go I think.