Gandalf/sofarr
Public Access
0
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases 59 Wiki Activity

feat(ui): align requests container and cards layout with downloads/history (closes #69)

Browse Source
This commit is contained in:
Gronod
2026-05-28 17:41:59 +01:00
parent a4d398ef1b
commit af33e4ec43
3 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/ui/requests.js
+1 -1
View File
@@ -119,7 +119,7 @@ function createRequestCard(request) {
} }
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'request-card'; card.className = `request-card ${request.mediaType || ''}`;
const typeIcon = document.createElement('span'); const typeIcon = document.createElement('span');
typeIcon.className = `request-type-icon ${request.mediaType || ''}`; typeIcon.className = `request-type-icon ${request.mediaType || ''}`;
public/app.js
+4 -4
View File
File diff suppressed because one or more lines are too long
public/style.css
+32 -15
View File
@@ -2229,11 +2229,19 @@ body {
/* ===== Requests Tab ===== */ /* ===== Requests Tab ===== */
.requests-container { .requests-container {
padding: 20px; background: var(--surface);
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 2px 4px var(--shadow);
transition: background 0.3s;
} }
.requests-header { .requests-header {
margin-bottom: 20px; display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
} }
.requests-header h2 { .requests-header h2 {
@@ -2249,37 +2257,46 @@ body {
} }
.requests-list { .requests-list {
display: grid; display: flex;
gap: 12px; flex-direction: column;
overflow-x: hidden; gap: 8px;
} }
.request-card { .request-card {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 12px; gap: 12px;
padding: 16px; padding: 10px 14px;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 6px;
transition: box-shadow 0.2s ease, border-color 0.2s ease; transition: box-shadow 0.2s ease, border-color 0.2s ease;
min-width: 0; min-width: 0;
} }
.request-card.tv {
border-left: 3px solid var(--series-color);
}
.request-card.movie {
border-left: 3px solid var(--movie-color);
}
.request-card:hover { .request-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: var(--accent); border-color: var(--accent);
} }
.request-type-icon { .request-type-icon {
font-size: 1.5rem; font-size: 1.6rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px; width: 48px;
height: 40px; height: 68px;
background: var(--surface-alt); background: var(--surface-alt);
border-radius: 8px; border-radius: 4px;
box-shadow: 0 1px 4px var(--shadow-strong);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -2289,11 +2306,11 @@ body {
} }
.request-title { .request-title {
font-size: 0.95rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 4px; margin: 0 0 4px;
overflow: hidden; word-break: break-word;
text-overflow: ellipsis;
} }
.request-meta { .request-meta {