State Parks App: Let’s add Bulma and Sorting

Last week, we finally got the park listing working and updated the instance at test.wisparks.jws.app.  This week, I figured that we should add Bulma to the project and add sorting.

So, let’s start by adding Bulma and cleaning the code up a little.

See the Pen
Wisc Parks (Part 5): Cleaning up the listing and adding Bulma
by Joe Steinbring (@steinbring)
on CodePen.

That improves things quite a bit.  Next, let’s add font awesome, a sortBy variable, a sortOrder variable, and the ability to toggle sorting by clicking on a table heading.

See the Pen
Wisc Parks (Part 6): Adding font-awesome and sorting
by Joe Steinbring (@steinbring)
on CodePen.

So, there are two issues now.  It doesn’t make a lot of sense to sort by the street address and you can’t sort by the property type because it is actually three values (not just a singular string).  So, let’s clean things up a bit.

See the Pen
Wisc Parks (Part 7): Cleaning things up a little
by Joe Steinbring (@steinbring)
on CodePen.

That is probably enough for one week, so let’s update the test branch of the app on github.  We have previously added Bulma / Beufy to Vue CLI app but haven’t added Font Awesome to one, yet.  I might drill down on the topic in the future but until then, I would recommend the article “How to use Font Awesome 5 on VueJS Project” for further details.  To see exactly what I did, you can check out the commits to the test branch but I ended up needing to tweak the template before Font Awesome was finally willing to behave.

Here is what the final result ended up looking like …

See the Pen
Wisc Parks (Part 8): Changing v-if to v-show and adding spans for FA
by Joe Steinbring (@steinbring)
on CodePen.

So, the test instance of the app now looks like this …

I think that the next step is to surface more information through park profile pages (something that I know that I promised at the end of last week’s post).

Have any questions, comments, etc?  Feel free to drop a comment, below.

Leave a Reply

Your email address will not be published.