SPA Tutorial Update 2

So this just a quick update with a few minor changes to the app, nothing huge. Just updated some pages and Vue Components.

Fixed Footer to Bottom of Page

First, I fixed the footer to bottom of page. This will help with the usability of the app and make for a much cleaner flow. What I did, is calculated the min-height of the page class to be the height of the page, subtracting the height of the footer and height of the header. This will push the footer all the way to the bottom of the page if the content doesn’t take up the whole page.

In the /resources/assets/sass/layouts/_page.scss I added this style:

min-height: calc(100vh - 130px);

What this does is ensure the body content height is at least the full height of the page minus the height of the footer and header.

Added Cafe Card

To make for the display of Cafes a little more beautiful, I created a card for each one. The card is a nice display that displays the name of the cafe and it’s address. We will be displaying a lot of data in these cards over the next few tutorials.

You can find the CafeCard.vue here: /resources/assets/js/components/cafes/CafeCard.vue.

I imported the card into the home page and where I iterated over the cafe list, I add a card now. The code looks like:

<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <loader v-show="cafesLoadStatus == 1" :width="100" :height="100"></loader>
    <cafe-card v-for="cafe in cafes" :key="cafe.id" :cafe="cafe"></cafe-card>
  </div>
</div>

One thing to note, is that we set the :key attribute for the cafe to the id of the cafe. When using custom components in VueJS and iterating over them, you have to apply a key parameter. This is new in VueJS 2.

In the CafeCard itself, I wrapped the markup with a <router-link></router-link> that looks like:

<router-link :to="{ name: 'cafe', params: { id: cafe.id} }">

What this does is link the cafe card to the actual page for the cafe.

Added Loaders

To show the loading process I created a Loader.vue component. You can see that I used them on the home page when loading the cafes in the last section. I did this as a component so you can pass width and height parameters which allow the component to fit in a variety of places.

You can find the loader here: /resources/assets/js/components/global/Loader.vue

There’s a great source for loading icons that I used here: SVG Loading icons.

On the homepage this is a nice visual display to show the status of the application.

Tuned Up Cafes.vue

I made the CafesMap.vue map full screen positioning it absolute:

<style lang="scss">
  div#cafe-map{
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 100px;
  }
</style>

I also gave the map the full width on the Cafes.vue page so the template right now looks like:

<div id="cafes" class="page">
  <cafe-map></cafe-map>
</div>

These simple enhancements will add some benefit later down the road where we can do some overlays on the map.

Conclusion

These simple updates will now make the app a lot more user friendly and leave a blank slate for the next few features we will add. The next tutorials will dive more into some Laraval relationship techniques as we add brew methods to the cafes and child cafes (cafes with more than one location).

Feel free to check out all of the updates here: GitHub – serversideup/roastandbrew.