lib
/
obsidian-book-tracker
generated from tpl/obsidian-sample-plugin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make bookshelf full width on small screens

This commit is contained in:
Evan Fiordeliso 2025-07-07 22:26:27 -04:00
parent 212d3acce3
commit 7e5135d99e
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/ui/code-blocks/ShelfCodeBlockView.svelte
View File

@ -66,8 +66,14 @@
<style lang="scss"> <style lang="scss">
.shelf-code-block { .shelf-code-block {
container: bookshelf / inline-size;
.controls { .controls {
margin-bottom: 1rem; margin-bottom: 1rem;
@container (width < 600px) {
width: 100% !important;
}
} }
&.bookshelf-view { &.bookshelf-view {

23
src/ui/components/DetailsView.svelte
View File

@ -162,6 +162,16 @@
max-width: 30%; max-width: 30%;
} }
@container (width < 600px) {
flex-direction: column;
align-items: center;
img {
max-height: 30rem;
max-width: 100%;
}
}
.book-info { .book-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -198,18 +208,5 @@
} }
} }
} }
container: book-details-list / inline-size;
@container book-details-list (width < 600px) {
.book-details {
flex-direction: column;
align-items: center;
img {
max-height: 30rem;
max-width: 100%;
}
}
}
} }
</style> </style>

6
src/ui/components/bookshelf/Bookshelf.svelte
View File

@ -18,7 +18,6 @@
div.bookshelf { div.bookshelf {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
min-height: 100vh;
min-height: calc(bookshelf.$height + bookshelf.$shelf-width); min-height: calc(bookshelf.$height + bookshelf.$shelf-width);
background-image: linear-gradient( background-image: linear-gradient(
color.scale(bookshelf.$color, $lightness: -32%), color.scale(bookshelf.$color, $lightness: -32%),
@ -52,5 +51,10 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: bookshelf.$shelf-width bookshelf.$book-spacing; gap: bookshelf.$shelf-width bookshelf.$book-spacing;
container: bookshelf / inline-size;
@container bookshelf (width < 600px) {
width: 100%;
}
} }
</style> </style>