Setting up a page with top (text) and bottom (list)

[Martin]

pff, always thought that html/css positioning would be easier than hardcore coding.
Anyway, I wonder if this is the best way of setting up a responsive mobile page that has:

1. header-body-footer
2. body has 2 fixed parts (top 33%, bottom 67%)
3. top part is just place holder for text
4. bottom part is a scrolling list

code:

  <q-layout>
    <!--HEADER-->
    <div slot="header" class="toolbar">
      header
    </div>
    <!--BODY-->
    <div class="layout-view no-scroll">
      <!--TOP-->
      <div style="background-color: green; height:33%">
        <p>This is the top part</p>
      </div>
      <!--LIST-->
      <div class="scroll"
           style="background-color: cornflowerblue;
             height:67%">
        <div class="list scroll">
          <div v-for="item in list" class="item">
            <div class="item-content">{{item}}</div>
          </div>
        </div>
      </div>
    </div>
    <!--FOOTER-->
    <div slot="footer" class="toolbar">footer</div>
  </q-layout>
</template>

[s.molinari]

Imagining an app with that layout, I would think when typing something, the scrolling section would be pretty much hidden. It should be doable though.

Sorry to also side track your post a bit, but I was also wondering from a higher level perspective about whether or not it would be correct with Quasar to build a responsive website or to actually redirect (load a different version) of the website for mobile devices. Being Quasar is optimized for mobile, I would have thought it would be the latter.

@rstoenescu - could you give us some advice on that? What is your best experiences? What is Quasar best suited to do? responsive, dedicated or maybe even adaptive/ progressive enhanced?

@Martin - I am also asking this, because I’m thinking the answer might also help you with the pain you are having right now.

Scott

[rstoenescu]

Hi,

Question: does the top part changes?

Some assumption first: you only want the item list to be scrollable and the rest of the UI to always be visible on screen.
If “no” then add it as part of the layout header (div slot="header").
If “yes” then it requires some thinking. You still need to add it to the header, but you also need to either use Vuex or a simple store of your own to sync what the layout should show based on the page the user is on.

This is just the high level design based on Vue’s own capabilities. Tell me if you need further information.