Skip to content

Commit

Permalink
fix: Better align book details when shown in a grid (#166)
Browse files Browse the repository at this point in the history
In a book grid, the title, author and status are shown in a column
with no real layout constraints. This means if a book has a long
title, its author and status won't line up with a different book
with a short title, which makes scanning across the grid annoying.

To fix this, give the title the flex-grow property so it'll expand
to fill the available room. Authors and status will then be
bottom-aligned.
  • Loading branch information
csmith authored Dec 23, 2024
1 parent af9cccf commit c67f955
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/jelu-ui/src/components/BookCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,7 @@ watch(checked, (newVal, oldVal) => {
<div class="card-body">
<router-link
v-if="book.id != null"
class="grow"
:to="{ name: 'book-detail', params: { bookId: book.id } }"
>
<h2
Expand All @@ -210,6 +211,7 @@ watch(checked, (newVal, oldVal) => {
</router-link>
<router-link
v-else
class="grow"
:to="{ name: 'book-reviews', params: { bookId: book.book.id } }"
>
<h2
Expand Down

0 comments on commit c67f955

Please sign in to comment.