michael/ripster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.10.2-9 Layout

Browse Source
This commit is contained in:
mboehmlaender
2026-03-16 10:02:41 +00:00
parent 45b2272f1a
commit 38a82706ce
14 changed files with 159 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "ripster-frontend",
"version": "0.10.2-8",
"version": "0.10.2-9",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ripster-frontend",
"version": "0.10.2-8",
"version": "0.10.2-9",
"dependencies": {
"primeicons": "^7.0.0",
"primereact": "^10.9.2",
frontend/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ripster-frontend",
"version": "0.10.2-8",
"version": "0.10.2-9",
"private": true,
"type": "module",
"scripts": {
frontend/src/assets/media-audiobook.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Audiobook">
<circle cx="32" cy="32" r="30" fill="#f4f1da"/>
<path d="M32 14c-9.9 0-18 7.4-18 16.5 0 2.7.7 5.2 2 7.5v5c0 1.1.9 2 2 2h3c1.7 0 3-1.3 3-3v-6c0-1.7-1.3-3-3-3h-1.6C21.6 29.9 26.4 26 32 26s10.4 3.9 12.6 7h-1.6c-1.7 0-3 1.3-3 3v6c0 1.7 1.3 3 3 3h3c1.1 0 2-.9 2-2v-5c1.3-2.3 2-4.8 2-7.5C50 21.4 41.9 14 32 14z" fill="#2f3440"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 429 B

frontend/src/assets/media-disc.svg
+1 -1
View File
@@ -9,5 +9,5 @@
<circle cx="32" cy="32" r="30" fill="url(#cdg)"/>
<circle cx="32" cy="32" r="9" fill="#f7f9fc" stroke="#9ca6b5" stroke-width="2"/>
<path d="M15 25 A20 20 0 0 1 48 18" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.85"/>
<text x="32" y="54" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="700" fill="#3f4a5d">CD</text>
<text x="32" y="54" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="700" fill="#3f4a5d">DVD</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 741 B

After

Width:  |  Height:  |  Size: 742 B

frontend/src/components/AudiobookConfigPanel.jsx
-2
View File
@@ -190,8 +190,6 @@ export default function AudiobookConfigPanel({
<div><strong>Titel:</strong> {metadata?.title || '-'}</div>
<div><strong>Autor:</strong> {metadata?.author || '-'}</div>
<div><strong>Sprecher:</strong> {metadata?.narrator || '-'}</div>
<div><strong>Serie:</strong> {metadata?.series || '-'}</div>
<div><strong>Teil:</strong> {metadata?.part || '-'}</div>
<div><strong>Jahr:</strong> {metadata?.year || '-'}</div>
<div><strong>Kapitel:</strong> {editableChapters.length || '-'}</div>
{descriptionPreview ? (
frontend/src/pages/DashboardPage.jsx
+5 -4
View File
@@ -19,6 +19,7 @@ import AudiobookConfigPanel from '../components/AudiobookConfigPanel';
import blurayIndicatorIcon from '../assets/media-bluray.svg';
import discIndicatorIcon from '../assets/media-disc.svg';
import otherIndicatorIcon from '../assets/media-other.svg';
import audiobookIndicatorIcon from '../assets/media-audiobook.svg';
import { getStatusLabel, getStatusSeverity, normalizeStatus } from '../utils/statusPresentation';
const processingStates = ['ANALYZING', 'RIPPING', 'MEDIAINFO_CHECK', 'ENCODING', 'CD_ANALYZING', 'CD_RIPPING', 'CD_ENCODING'];
@@ -475,7 +476,7 @@ function mediaIndicatorMeta(job) {
return { mediaType, src: otherIndicatorIcon, alt: 'Audio CD', title: 'Audio CD' };
}
if (mediaType === 'audiobook') {
return { mediaType, src: otherIndicatorIcon, alt: 'Audiobook', title: 'Audiobook' };
return { mediaType, src: audiobookIndicatorIcon, alt: 'Audiobook', title: 'Audiobook' };
}
return { mediaType, src: otherIndicatorIcon, alt: 'Sonstiges Medium', title: 'Sonstiges Medium' };
}
@@ -2524,7 +2525,7 @@ export default function DashboardPage({
</div>
<div className="dashboard-col dashboard-col-right">
<Card title="Audiobook Upload" subTitle="AAX-Datei hochladen, analysieren und danach Format/Qualität vor dem Start auswählen.">
<Card title="Audiobook Upload">
<FileUpload
ref={audiobookFileUploadRef}
accept=".aax"
@@ -2593,7 +2594,7 @@ export default function DashboardPage({
) : null}
</Card>
<Card title="Job Queue" subTitle="Starts werden nach Typ- und Gesamtlimit abgearbeitet. Queue-Elemente können per Drag-and-Drop umsortiert werden.">
<Card title="Job Queue" subTitle="Elemente können per Drag-and-Drop umsortiert werden.">
<div className="pipeline-queue-meta">
<Tag value={`Film max.: ${queueState?.maxParallelJobs || 1}`} severity="info" />
<Tag value={`CD max.: ${queueState?.maxParallelCdEncodes || 2}`} severity="info" />
@@ -2755,7 +2756,7 @@ export default function DashboardPage({
</div>
</Card>
<Card title="Skript- / Cron-Status" subTitle="Laufende und zuletzt abgeschlossene Skript-, Ketten- und Cron-Ausführungen.">
<Card title="Skript- / Cron-Status">
<div className="runtime-activity-meta pipeline-queue-meta">
<Tag value={`Laufend: ${runtimeActiveItems.length}`} severity={runtimeActiveItems.length > 0 ? 'warning' : 'success'} />
<Tag value={`Zuletzt: ${runtimeRecentItems.length}`} severity="info" />
frontend/src/pages/HistoryPage.jsx
+3 -1
View File
@@ -1058,12 +1058,14 @@ export default function HistoryPage({ refreshToken = 0 }) {
>
<div className="history-dv-grid-poster-wrap">
{renderPoster(row, 'history-dv-poster-grid')}
<div className="history-dv-grid-status-overlay">
{renderStatusTag(row)}
</div>
</div>
<div className="history-dv-grid-main">
<div className="history-dv-head">
<strong className="history-dv-title">{row?.title || row?.detected_title || '-'}</strong>
{renderStatusTag(row)}
</div>
<small className="history-dv-subtle">{subtitle}</small>
frontend/src/styles/app.css
+67 -20
View File
@@ -419,54 +419,62 @@ body {
.hardware-cpu-summary {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: stretch;
flex-wrap: nowrap;
gap: 0.35rem;
align-items: center;
min-width: 0;
overflow: hidden;
}
.hardware-cpu-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
gap: 0.28rem;
border: 1px solid var(--rip-border);
border-radius: 999px;
background: var(--rip-panel);
padding: 0.22rem 0.55rem;
font-size: 0.8rem;
padding: 0.18rem 0.42rem;
font-size: 0.75rem;
font-weight: 600;
min-height: 2rem;
height: 2rem;
white-space: nowrap;
min-width: 0;
flex-shrink: 1;
}
.hardware-cpu-chip span {
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.hardware-cpu-chip .pi {
font-size: 0.82rem;
font-size: 0.75rem;
color: var(--rip-brown-700);
flex-shrink: 0;
}
.hardware-cpu-load-group {
display: inline-flex;
align-items: center;
gap: 0.25rem;
gap: 0.2rem;
min-width: 0;
flex-shrink: 1;
}
.hardware-cpu-core-toggle-btn {
border: 1px solid var(--rip-border);
background: var(--rip-panel);
color: var(--rip-brown-700);
width: 2rem;
min-width: 2rem;
height: 2rem;
width: 1.6rem;
min-width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.hardware-cpu-core-toggle-btn:hover {
@@ -507,12 +515,13 @@ body {
}
.hardware-core-item.compact {
grid-template-columns: auto auto auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: start;
gap: 0.35rem;
gap: 0.2rem 0.3rem;
padding: 0.3rem 0.45rem;
text-align: left;
overflow: hidden;
}
.hardware-core-title {
@@ -1112,6 +1121,21 @@ body {
white-space: normal;
}
.p-fileupload-buttonbar {
padding: 0.4rem 0.6rem !important;
gap: 0.35rem !important;
}
.p-fileupload-buttonbar .p-button.p-button-icon-only {
width: 2rem !important;
height: 2rem !important;
padding: 0 !important;
}
.p-fileupload-buttonbar .p-button.p-button-icon-only .p-button-icon {
font-size: 0.85rem !important;
}
.aax-drop-zone {
display: flex;
flex-direction: column;
@@ -1507,7 +1531,7 @@ body {
.settings-grid {
display: grid;
gap: 1rem;
gap: 0.5rem;
}
.settings-tabview {
@@ -1528,7 +1552,7 @@ body {
.settings-sections {
display: grid;
gap: 0.85rem;
gap: 0.6rem;
}
.settings-section.grouped {
@@ -1556,8 +1580,8 @@ body {
.setting-row {
display: grid;
gap: 0.35rem;
padding: 0.75rem;
gap: 0.25rem;
padding: 0.45rem 0.6rem;
border: 1px solid var(--rip-border);
border-radius: 0.5rem;
background: var(--rip-panel-soft);
@@ -1569,6 +1593,9 @@ body {
.setting-description {
white-space: pre-wrap;
font-size: 0.78rem;
color: var(--rip-muted);
line-height: 1.35;
}
.notification-toggle-grid {
@@ -2075,6 +2102,8 @@ body {
.history-dataview .p-dataview-content .p-grid.grid > .xl-col-4 {
width: 100%;
padding: 0.35rem;
display: flex;
flex-direction: column;
}
@media (min-width: 900px) {
@@ -2094,6 +2123,9 @@ body {
border-radius: 0.55rem;
background: var(--rip-panel-soft);
box-shadow: 0 2px 7px rgba(58, 29, 18, 0.06);
display: flex;
flex-direction: column;
height: 100%;
}
.history-dv-item:focus-visible {
@@ -2230,13 +2262,28 @@ body {
gap: 0.5rem;
padding: 0.65rem;
grid-template-rows: auto 1fr auto;
flex: 1;
}
.history-dv-grid-poster-wrap {
position: relative;
width: min(120px, 100%);
margin: 0 auto;
}
.history-dv-grid-status-overlay {
position: absolute;
top: 0.4rem;
left: 0;
z-index: 1;
pointer-events: none;
}
.history-dv-grid-status-overlay .p-tag {
pointer-events: auto;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.history-dv-grid-main {
display: grid;
gap: 0.35rem;