Skip to content

Commit d9e5c3e

Browse files
markbeepmarkbeep
committed
feat: add 'Click to enlarge' for covers
1 parent 3fe3f5d commit d9e5c3e

7 files changed

Lines changed: 173 additions & 137 deletions

File tree

‎static/tw.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,20 @@
9090
.changelog a {
9191
@apply underline;
9292
}
93+
94+
.book-cover-modal .modal-box {
95+
width: auto;
96+
max-width: min(90vw, 40rem);
97+
padding: 0.5rem;
98+
background-color: transparent;
99+
box-shadow: none;
100+
}
101+
102+
.book-cover-modal img {
103+
width: auto;
104+
max-width: 100%;
105+
max-height: 85vh;
106+
object-fit: contain;
107+
border-radius: var(--radius-box);
108+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
109+
}

‎templates/components/BookCard.jinja‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,21 @@
1111
<div class="book-card flex flex-col">
1212
<div class="relative w-32 h-32 sm:w-40 sm:h-40 rounded-md overflow-hidden shadow shadow-black items-center justify-center flex">
1313
{% if book.cover_image %}
14-
<img class="object-cover w-full h-full hover:scale-110 transition-transform duration-500 ease-in-out"
14+
<img class="object-cover w-full h-full cursor-pointer hover:scale-110 transition-transform duration-500 ease-in-out"
1515
height="128"
1616
width="128"
1717
src="{{ book.cover_image }}"
18-
alt="{{ book.title }}" />
18+
alt="{{ book.title }}"
19+
title="Click to enlarge"
20+
onclick="bookCoverModal{{ book.asin }}.showModal()" />
21+
<dialog id="bookCoverModal{{ book.asin }}" class="modal book-cover-modal">
22+
<div class="modal-box">
23+
<img src="{{ book.cover_image }}" alt="{{ book.title }}" />
24+
</div>
25+
<form method="dialog" class="modal-backdrop">
26+
<button aria-label="Close">close</button>
27+
</form>
28+
</dialog>
1929
{% else %}
2030
<icons.PhotoOff />
2131
{% endif %}

‎templates/pages/Recommendations/ForYou.jinja‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
Personalized picks based on your requests
2929
{% if has_next %}
3030
, showing {{
31-
recommendations|length }}
31+
recommendations|length }}
3232
of {{ total_items }}
3333
{% endif %}
3434
</p>

‎templates/pages/Settings/Prowlarr/Category.jinja‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@
4141
</option>
4242
<template x-for="sel in Object.keys(categories)">
4343
<template x-if="!selected.includes(Number(sel))">
44-
<option x-text="`${String(sel).padStart(4, '0')} - ${categories[sel]}`"
45-
x-bind:value="sel">
44+
<option x-text="`${String(sel).padStart(4, '0')} - ${categories[sel]}`" x-bind:value="sel">
4645
</option>
4746
</template>
4847
</template>

‎templates/pages/Settings/Users/List.jinja‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,9 @@
8888
hx-swap="outerHTML" />
8989
</td>
9090
<td {% if u.root %}title="Can't delete the root admin" {% elif u.is_self(user.username) %} title="Can't delete yourself" {% endif %}>
91-
<button class="btn btn-square btn-ghost" onclick="delete_modal_{{ loop.index }}.showModal()" {% if
92-
u.is_self(user.username) or u.root %}disabled{% endif %}>
91+
<button class="btn btn-square btn-ghost"
92+
onclick="delete_modal_{{ loop.index }}.showModal()"
93+
{% if u.is_self(user.username) or u.root %}disabled{% endif %}>
9394
<icons.Trash />
9495
</button>
9596
<dialog id="delete_modal_{{ loop.index }}" class="modal">
@@ -99,8 +100,7 @@
99100
</h3>
100101
<div class="grid grid-cols-2 py-4">
101102
<span class="font-semibold mr-2">Username</span><span class="font-mono">{{ u.username }}</span>
102-
<span class="font-semibold mr-2">Group</span><span class="font-mono">{{ u.group.value.capitalize()
103-
}}</span>
103+
<span class="font-semibold mr-2">Group</span><span class="font-mono">{{ u.group.value.capitalize() }}</span>
104104
</div>
105105
<form method="dialog" class="flex justify-between">
106106
<button class="btn">

‎templates/pages/Wishlist/Wishlist.jinja‎

Lines changed: 137 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -50,134 +50,144 @@
5050
books by heading to the
5151
<a preload class="link" href="{{ base_url }}/search">search</a> tab {%
5252
elif page.__eq__("downloaded") %} No books have been downloaded yet. {%
53-
endif %}
54-
</span>
55-
</div>
56-
{% endif %}
57-
<tbody>
58-
{% for result in results %}
59-
{% set book = result.book %}
60-
<tr class="text-xs lg:text-sm" id="{{ book.asin }}">
61-
<th>
62-
{{ loop.index }}
63-
</th>
64-
<td>
65-
<div class="size-16 lg:size-24">
66-
{% if book.cover_image %}
67-
<img class="object-cover w-full h-full"
68-
height="64"
69-
width="64"
70-
src="{{ book.cover_image }}"
71-
alt="{{ book.title }}" />
72-
{% else %}
73-
<div class="flex items-center justify-center w-full h-full bg-neutral opacity-30">
74-
<icons.PhotoOff />
53+
endif %}
54+
</span>
55+
</div>
56+
{% endif %}
57+
<tbody>
58+
{% for result in results %}
59+
{% set book = result.book %}
60+
<tr class="text-xs lg:text-sm" id="{{ book.asin }}">
61+
<th>
62+
{{ loop.index }}
63+
</th>
64+
<td>
65+
<div class="size-16 lg:size-24">
66+
{% if book.cover_image %}
67+
<img class="object-cover w-full h-full cursor-pointer"
68+
height="64"
69+
width="64"
70+
src="{{ book.cover_image }}"
71+
alt="{{ book.title }}"
72+
title="Click to enlarge"
73+
onclick="bookCoverModal{{ book.asin }}.showModal()" />
74+
<dialog id="bookCoverModal{{ book.asin }}" class="modal book-cover-modal">
75+
<div class="modal-box">
76+
<img src="{{ book.cover_image }}" alt="{{ book.title }}" />
77+
</div>
78+
<form method="dialog" class="modal-backdrop">
79+
<button aria-label="Close">close</button>
80+
</form>
81+
</dialog>
82+
{% else %}
83+
<div class="flex items-center justify-center w-full h-full bg-neutral opacity-30">
84+
<icons.PhotoOff />
85+
</div>
86+
{% endif %}
7587
</div>
76-
{% endif %}
77-
</div>
78-
</td>
79-
<td>
80-
<div class="flex flex-col">
81-
<a preload
82-
href="{{ base_url }}/search?q={{ book.title+' ' +(book.authors|join(",") ) }}"
83-
class="font-bold text-primary line-clamp-4"
84-
title="{{ book.title }}">{{ book.title }}</a>
85-
{% if book.subtitle %}
86-
<span class="font-semibold line-clamp-4" title="{{ book.subtitle }}">{{ book.subtitle }}</span>
87-
{% endif %}
88-
</div>
89-
</td>
90-
<td>
91-
{{ book.authors|join(", ") }}
92-
</td>
93-
<td>
94-
{{ book.narrators|join(", ") }}
95-
</td>
96-
<td class="hidden lg:table-cell">
97-
{{ book.release_date.strftime("%B %Y") }}
98-
</td>
99-
<td class="lg:hidden">
100-
{{ book.release_date.strftime("%Y") }}
101-
</td>
102-
<td>
103-
{{ book.runtime_length_hrs }}
104-
</td>
105-
106-
<td title="{{ result.amount_requested }}">
107-
{% if user.is_admin() %}
108-
<button class="btn px-1 text-sm"
109-
onclick="requesters{{ loop.index }}.showModal()">
110-
{{ result.amount_requested }}
111-
<icons.Users />
112-
</button>
113-
<dialog id="requesters{{ loop.index }}" class="modal">
114-
<div class="modal-box">
115-
<h3 class="text-lg font-bold">
116-
Users that requested:
117-
<span class="italic">{{ book.title }}</span>
118-
</h3>
119-
<ul class="py-4 text-sm max-h-60 overflow-y-auto truncate list-disc list-inside">
120-
{% for user in result.requests %}
121-
<li>
122-
{{ user.user_username }}
123-
</li>
124-
{% endfor %}
125-
</ul>
88+
</td>
89+
<td>
90+
<div class="flex flex-col">
91+
<a preload
92+
href="{{ base_url }}/search?q={{ book.title+' ' +(book.authors|join(",") ) }}"
93+
class="font-bold text-primary line-clamp-4"
94+
title="{{ book.title }}">{{ book.title }}</a>
95+
{% if book.subtitle %}
96+
<span class="font-semibold line-clamp-4" title="{{ book.subtitle }}">{{ book.subtitle }}</span>
97+
{% endif %}
12698
</div>
127-
<form method="dialog" class="modal-backdrop">
128-
<button>
129-
close
99+
</td>
100+
<td>
101+
{{ book.authors|join(", ") }}
102+
</td>
103+
<td>
104+
{{ book.narrators|join(", ") }}
105+
</td>
106+
<td class="hidden lg:table-cell">
107+
{{ book.release_date.strftime("%B %Y") }}
108+
</td>
109+
<td class="lg:hidden">
110+
{{ book.release_date.strftime("%Y") }}
111+
</td>
112+
<td>
113+
{{ book.runtime_length_hrs }}
114+
</td>
115+
116+
<td title="{{ result.amount_requested }}">
117+
{% if user.is_admin() %}
118+
<button class="btn px-1 text-sm"
119+
onclick="requesters{{ loop.index }}.showModal()">
120+
{{ result.amount_requested }}
121+
<icons.Users />
130122
</button>
131-
</form>
132-
</dialog>
133-
{% else %}
134-
{{ result.amount_requested }}
135-
{% endif %}
136-
</td>
123+
<dialog id="requesters{{ loop.index }}" class="modal">
124+
<div class="modal-box">
125+
<h3 class="text-lg font-bold">
126+
Users that requested:
127+
<span class="italic">{{ book.title }}</span>
128+
</h3>
129+
<ul class="py-4 text-sm max-h-60 overflow-y-auto truncate list-disc list-inside">
130+
{% for user in result.requests %}
131+
<li>
132+
{{ user.user_username }}
133+
</li>
134+
{% endfor %}
135+
</ul>
136+
</div>
137+
<form method="dialog" class="modal-backdrop">
138+
<button>
139+
close
140+
</button>
141+
</form>
142+
</dialog>
143+
{% else %}
144+
{{ result.amount_requested }}
145+
{% endif %}
146+
</td>
137147

138-
<td class="grid grid-cols-2 min-w-32 gap-1 w-fit ml-auto">
139-
<a preload
140-
title="Torrent Sources"
141-
href="{{ base_url }}/wishlist/sources/{{ book.asin }}"
142-
{% if not user.is_admin() %}disabled{% endif %}
143-
class="btn btn-square">
144-
<icons.List />
145-
</a>
146-
<button {% if book.downloaded %}title="Downloaded"class="btn btn-square btn-ghost bg-success text-neutral/20" {% else %} title="Automatic Download" class="btn btn-square" {% endif %}
147-
{% if not user.can_download() or book.downloaded %}disabled{% endif %}
148-
hx-post="{{ base_url }}/wishlist/hx-auto-download/{{ book.asin }}"
149-
hx-swap="outerHTML"
150-
hx-target="#book-table-body"
151-
hx-disabled-elt="this">
152-
<icons.Download />
153-
</button>
154-
<button title="Remove"
155-
class="btn btn-square"
156-
hx-delete="{{ base_url }}/wishlist/hx-delete/{{ book.asin }}{%- if page.__eq__('downloaded') -%}?downloaded=true{%- endif -%}"
157-
hx-swap="outerHTML"
158-
hx-target="#book-table-body"
159-
hx-disabled-elt="this">
160-
<icons.Ban />
161-
</button>
162-
{% if book.downloaded %}
163-
<button class="btn btn-square btn-ghost bg-success text-neutral/20"
164-
disabled
165-
title="Set as downloaded">
166-
<icons.Checkmark />
167-
</button>
168-
{% else %}
169-
<button class="btn btn-square"
170-
title="Set as downloaded"
171-
hx-patch="{{ base_url }}/wishlist/downloaded/hx-add/{{ book.asin }}"
172-
{% if not user.is_admin() %}disabled{% endif %}
173-
hx-swap="outerHTML"
174-
hx-target="#book-table-body"
175-
hx-disabled-elt="this">
176-
<icons.Checkmark />
177-
</button>
178-
{% endif %}
179-
</td>
180-
</tr>
181-
{% endfor %}
182-
</tbody>
183-
</table>
148+
<td class="grid grid-cols-2 min-w-32 gap-1 w-fit ml-auto">
149+
<a preload
150+
title="Torrent Sources"
151+
href="{{ base_url }}/wishlist/sources/{{ book.asin }}"
152+
{% if not user.is_admin() %}disabled{% endif %}
153+
class="btn btn-square">
154+
<icons.List />
155+
</a>
156+
<button {% if book.downloaded %}title="Downloaded"class="btn btn-square btn-ghost bg-success text-neutral/20" {% else %} title="Automatic Download" class="btn btn-square" {% endif %}
157+
{% if not user.can_download() or book.downloaded %}disabled{% endif %}
158+
hx-post="{{ base_url }}/wishlist/hx-auto-download/{{ book.asin }}"
159+
hx-swap="outerHTML"
160+
hx-target="#book-table-body"
161+
hx-disabled-elt="this">
162+
<icons.Download />
163+
</button>
164+
<button title="Remove"
165+
class="btn btn-square"
166+
hx-delete="{{ base_url }}/wishlist/hx-delete/{{ book.asin }}{%- if page.__eq__('downloaded') -%}?downloaded=true{%- endif -%}"
167+
hx-swap="outerHTML"
168+
hx-target="#book-table-body"
169+
hx-disabled-elt="this">
170+
<icons.Ban />
171+
</button>
172+
{% if book.downloaded %}
173+
<button class="btn btn-square btn-ghost bg-success text-neutral/20"
174+
disabled
175+
title="Set as downloaded">
176+
<icons.Checkmark />
177+
</button>
178+
{% else %}
179+
<button class="btn btn-square"
180+
title="Set as downloaded"
181+
hx-patch="{{ base_url }}/wishlist/downloaded/hx-add/{{ book.asin }}"
182+
{% if not user.is_admin() %}disabled{% endif %}
183+
hx-swap="outerHTML"
184+
hx-target="#book-table-body"
185+
hx-disabled-elt="this">
186+
<icons.Checkmark />
187+
</button>
188+
{% endif %}
189+
</td>
190+
</tr>
191+
{% endfor %}
192+
</tbody>
193+
</table>

‎uv.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)