calibre-web icon indicating copy to clipboard operation
calibre-web copied to clipboard

Caliblur has squished covers - fix inside

Open lyonzy opened this issue 4 years ago • 12 comments

Describe the bug/problem The CaliBlur theme (which looks great by the way!) squishes the covers of some/most books, e.g.: book cover with changed aspect ratio

To Reproduce Steps to reproduce the behavior:

  1. Load some books - square covers are a good example
  2. Use CaliBlur theme
  3. Observe squashed cover images

Expected behavior Book covers at full width but height appropriate to the aspect ratio: same book cover but square as desired

Screenshots See above.

Environment (please complete the following information):

  • Docker, LinuxServer
  • Firefox on Windows (latest)

Fix This CSS fixes it, at least on a desktop view:

.book:not(body) {
  height: 295px;
  display: flex;
  justify-content: end;
  flex-direction: column;
}

.container-fluid .book .cover {
    height: auto;`
}

Basically this sets div.cover to auto height (not 275px) and sets the parent (div.book) to 295px to compensate. It then uses the three flex properties to align div.cover and div.meta to the bottom of div.book - so that books are aligned at the bottom: row of books of various heights, aligned on their bottom edge

This also maintains hover border and shading alignment with the cover: book cover with aligned hover fade and yellow border

lyonzy avatar Apr 18 '20 08:04 lyonzy