Skip to content

Commit c67f955

Browse files
authored
fix: Better align book details when shown in a grid (#166)
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.
1 parent af9cccf commit c67f955

File tree

1 file changed

+2
-0
lines changed

1 file changed

+2
-0
lines changed

src/jelu-ui/src/components/BookCard.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ watch(checked, (newVal, oldVal) => {
199199
<div class="card-body">
200200
<router-link
201201
v-if="book.id != null"
202+
class="grow"
202203
:to="{ name: 'book-detail', params: { bookId: book.id } }"
203204
>
204205
<h2
@@ -210,6 +211,7 @@ watch(checked, (newVal, oldVal) => {
210211
</router-link>
211212
<router-link
212213
v-else
214+
class="grow"
213215
:to="{ name: 'book-reviews', params: { bookId: book.book.id } }"
214216
>
215217
<h2

0 commit comments

Comments
 (0)