ninja_hippo/arr-summary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cap Ombi requests to 5 with a Show more toggle
Some checks failed
Deploy / deploy (push) Has been cancelled
Details

Browse source 
An unbounded request list made the Ombi card grow far taller than the
Prowlarr indexer grid beside it, leaving the row looking lopsided even
after the earlier align-items fix. Reuse the same show-more pattern
already used for the Rotten Tomatoes lists instead of an internal
scrollbar, so both cards land at a comparable height.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-26 14:00:54 -07:00
parent bf10f438d2
commit 2e58d9e26f
1 changed files with 12 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

25
templates/dashboard.html
View file

@ -521,14 +521,8 @@
.indexer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
/* ── Requests (Ombi) ────────────────────────────────── */
.req-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 30rem;
overflow-y: auto;
padding-right: 0.3rem;
}
.req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.req-item.is-hidden { display: none; }
.req-item {
display: flex;
align-items: center;
@ -1008,9 +1002,9 @@
<div class="card-body">
{% if ombi.status == 'ok' %}
{% if ombi.recent %}
<div class="req-list">
<div class="req-list" id="req-list">
{% for req in ombi.recent %}
<div class="req-item">
<div class="req-item {{ 'is-hidden' if loop.index > 5 }}">
<span class="badge {{ 'movie' if req.type == 'Movie' else 'tv' }}">{{ req.type }}</span>
<div class="req-info">
<div class="req-title">{{ req.title }}</div>
@ -1020,6 +1014,10 @@
</div>
{% endfor %}
</div>
{% if ombi.recent | length > 5 %}
<button class="btn btn-quiet show-more" onclick="toggleMore(this, 'req-list')"
aria-expanded="false">Show {{ ombi.recent | length - 5 }} more</button>
{% endif %}
{% else %}
<p class="empty">No recent requests.</p>
{% endif %}
@ -1179,16 +1177,17 @@
function toggleMore(btn, listId) {
const list = document.getElementById(listId);
if (!list) return;
const hidden = list.querySelectorAll('.rt-item.is-hidden');
const items = Array.from(list.children);
const hidden = items.filter(el => el.classList.contains('is-hidden'));
if (hidden.length) {
hidden.forEach(el => el.classList.remove('is-hidden'));
btn.textContent = 'Show less';
btn.setAttribute('aria-expanded', 'true');
} else {
list.querySelectorAll('.rt-item').forEach((el, i) => {
items.forEach((el, i) => {
if (i >= 5) el.classList.add('is-hidden');
});
const n = list.querySelectorAll('.rt-item').length - 5;
const n = items.length - 5;
btn.textContent = 'Show ' + n + ' more';
btn.setAttribute('aria-expanded', 'false');
}