thegetty/terracottas

Make catalogue grid sortable

egardner opened this issue · 7 comments

egardner commented

As of 0cbeab4 the card grid now outputs a series of data- attributes which can be used for sorting.
Right now the available attributes are:

  • typology
  • region
  • group

Others could be added (but some, like Date, would need to be normalized first).
The idea is to have one or more drop-downs which allow users to sort by these values, or exclude all entries except for a subset (show only heads, for example").

egardner commented

Possible libraries to use for this:

  • Isotope.js
  • Shuffle.js
  • ShapeShift.js
  • Masonry.js
  • Gridster.js

Maybe others...

egardner commented

Basic implementation of this is now working. Will make some improvements in coming days.

geealbers commented

Nice! You may already have this in mind, but for the locations, I think it should reflect and reinforce the catalogue organization as it's seen in the TOC. So, I'd change the label from "Region" to "Location" and then have the dropdown options something like:

  • South Italy (cat. 1–50)
    • Taranto and Surrounding Areas (cat. 1–37)
    • Canosa (cat. 38–46)
    • Medma (cat. 47–48)
    • Other (cat. 49–50)
  • Sicily (cat. 51–60)

Not necessarily a nested list, but styled in some way to suggest this structure.

geealbers commented

And can we add something to indicate the results of the sort? A label that changes with the sort: "37 of 60 Objects", "4 of 60 Objects", etc.? Or a simple visual representation could be cool. It just felt off to me whenever I would sort and nothing visually changed (because it was happening lower).

egardner commented

I was thinking about this – I'll look into adding a result counter or otherwise indicating things have changed with some kind of animation.

Also currently the filters are not cumulative, so I need to make them aware of one another...

egardner commented

As of f01e66b basic features are now working.

Things to add:

  • Count of current items
  • "Empty States" design – User should see something telling them that no results have been returned.
    - [ ] Animation/transition to indicate when things change (otherwise user may not realize that view has changed below their current scroll level)

This code could probably also be re-factored into a more object-oriented pattern (a catalogue object that has a selection property to manage state, a render method, etc. – instead of scattering these into separate functions).

egardner commented

I'm going to treat animation as an added feature and look into ways to add that later. For now this component is working.