This is part two in a series on improving the MVC template, see part 1 here.

Here's our starting point:

Cards

So I know we just got done making that table look nice, but we can do much better by switching it to display cards. On the index page, let's use the foreach loop to show cards instead of rows on our table. In my opinion, this makes the movies in the database look more appealing than just lines of data, and therefore improves user experience. To get the look right, make sure each card renders with a bg-dark class.

Wrapping these in a div with class card-deck will make your card the same height, and allow footers to be aligned across multiple cards.

The thing I don't really care for is the way the cards blend into the background too easily.

To fix this issue, lets add shadow to the cards with class shadow-lg, and alter the background class to bg-secondary.

This will make the site look a lot better!

The code for this looks like:

Thumbnails

I've built a custom image service to access images in my database, but if you have images stored with your model, an easy thing you can do is to add them to the top of the card.

The problem arrives when you add large images, since the cards take the width of the container. The simplest way to fix this is to use the bootstrap grid. Wrapping each card in a div with a col size class (I personally used col-sm-4 to get 3 per row.) and also adding in a little margin to that column with mb-3. Using h-100 in the card itself will scale the cards, and therefore the images, down to fit your specifications.

This made it look like a card-deck div without actually using the card-deck class. I tried that out but it was putting all my cards on one row unless I was on a small screen.

Transitions

Adding in a touch of animation on page load can really make your page pop. I'm using the CDN from animate.css to add an animation when the card enters the view for the first time by adding the classes animate__animated animate__bounceIn to the card element

This may be a little intense, so look through their library and pick something more subtle

Another option (I do not recommend doing both, as it will trigger the entrance animation when the mouse leaves the area) is to have the card pulse on hover.

To do this, I had to extract a bit of code from the animate.css source specifically here I then renamed their pulse class to .hover-pulse:hover and applied the animate__animated hover-pulse classes to my card.

I stuck with just the entrance animation, the hover was a bit much.

In conclusion

WHEW, that was a lot of tinkering, but now I've got some nifty tricks to customize the rest of the app. While I work on the other pages, what are some visual additions that could add some pop to this project?