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.