This is part two in a series on improving the MVC template, see part 1 here.
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
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
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
h-100 in the card itself will scale the cards, and therefore the images, down to fit your specifications.
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.
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?