Venue 'cards' for landing page and search

[iteles]

Similar to #106, each venue has a 'card view'.

@jussi-club-soda The key question for us here is: can we have one type of 'venue card' displayed both on the landing page and in the Venues search page(s) so that we can reuse these cards in multiple locations, allowing them to fit into scope?

What information do you want to test your customers need here?

I would propose we go with the landing page suggested cards for now ensuring they contain the information in the Acceptance Criteria below:

Acceptance Criteria

Venues cards should include the following:

• [x] Photo of venue
• [x] Venue name
• [x] Venue type
• [x] Venue Club Soda score
• [x] Venue location/post code
• [x] Clicking on the venue card should take the customer to the venue page

[jussi-club-soda]

@iteles that sounds fine to us!

[Cleop]

Where should the venue type appear as it's not featured on the designs @iteles / @jussi-club-soda ?

Also, how are we capping the number of cards showing? Is it the first 4 that come from the DB? Is it a carousel? Is it a changing random 4 or using a number ranking system?

For now I'm returning 4 random venues as this was fastest to implement. Those with a 0 CS score don't have the cups displaying:

[jussi-club-soda]

How about a line between the venue name and the score cups for the type?

On capping - in general it would be nicest to always show venues with the highest scores first (ie sorting by score, highest first).

[Cleop]

I've moved the order around to what looked best to me, how does this look to you @jussi-club-soda?

[jussi-club-soda]

@Cleop looks good!

[iteles]

There are no venues appearing in staging:

It's highly probable that this is because there are no favourited venues in the data itself yet.

https://github.com/club-soda/club-soda-guide/issues/75#issuecomment-441788296 will need to be fixed before this can be fully implemented.

@simonlab Are you able to test this is working by manually altering a couple of values in staging db in the meantime to force 4 venues to be 'favourited'? Ideally, if there are any issues here we can catch them asap. All the commits should be linked to this issue.

[SimonLab]

Tested on localhost (I've also added some favourite venues on staging) by editing the venues:

However I think the ranking needs to be updated to display the venues with the highest scores first

[iteles]

@SimonLab Could you please also add a couple of pictures to the venues in localhost and check those also appear (instead of the default green rectangles) please?

[SimonLab]

I manage to upload an image for a venue on localhost. However I'm not sure if the image needs to have a specific size, @Danwhy @iteles do you if there are any limits for the images? We can see that the text is on top of the image in this case:

[iteles]

@SimonLab We really should be cropping it like we do in the venue pages themselves!

[iteles]

Only thing left to do here is make the whole card, not just the title clickable.