Tiles: Change the information areas for borrow/waitlist/sensitive into image overlays as badges

[koderjoker]

Description
Subtask of #38: Change the information areas for borrow/waitlist/sensitive into image overlays

From #164

All of our media cards don't have information areas. This causes a discrepancy in card heights.

The current appearance of our information areas for borrow/waitlist/sensitive confuses users into thinking that they are buttons, even though they aren't.

Additionally, they take up extra vertical space.

Using a small badge (and reducing the badge description length) will resolve the above. Placing it on the upper left corner will help in visibility since users tend to look first at the upper left. Unlike a strip, it won't cover up much of the image and letting the badge extend into the margin area will help make it even less so.
Disadvantages are that we risk users overlooking the small badge, and having to look into removing the hover image component.

Mockup for the borrow badge by @pezvi

Details for the current version of cards: In progress

Stakeholders
@pezvi @bfalling @iisa

[koderjoker]

First revised prototypes for the same (as of last week)

New card design

With borrow badge

With waitlist badge

For sensitive content

Adjusted to accommodate the hover

Initial changes include:

• Made the image slightly smaller (4px) to accommodate the image border and badge
• Thus was able to accommodate the badge’s half floating effect inside the card itself
• By accommodating the badge’s floating effect in the card itself, I was able to make space for the hover’s text to appear (just above the card) and prevent their overlap
• Shifted the collection hover to the right so that it wouldn’t be on top of the badge

As per discussion with @pevzi

• Checked out the latest changes with different image sizes
• Removed shadow for thumbnails
• Added shadow when badges are used
• Added to shadow to both the hover and collection description
• Checked out the latest changes with a white bg

Above samples (but with a white bg)

[koderjoker]

Examples of current card prototypes on search page (as of today)