klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fixed browse and tailwindcss style

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-15 11:01:19 +01:00
parent d114472823
commit 7734e53d87
16 changed files with 341 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Pages/Upload/Index.jsx
View File

@@ -580,7 +580,7 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize }) {
if (uploadsV2Enabled) {
return (
<section className="min-h-[calc(100vh-4rem)] bg-gradient-to-b from-[#0d0f1b] via-[#111827] to-[#0b0c10] py-10 px-4">
<section className="px-4 py-1">
<div className="max-w-6xl mx-auto">
<UploadWizard
initialDraftId={draftId ?? null}

14
resources/js/components/upload/ScreenshotUploader.jsx
View File

@@ -77,7 +77,7 @@ export default function ScreenshotUploader({
<p className="text-sm text-white/85">Drop screenshots here or click to browse</p>
<button
type="button"
className="mt-2 rounded-md border border-white/20 bg-white/10 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/70"
className="btn-secondary mt-2 text-xs"
onClick={() => inputRef.current?.click()}
>
Browse screenshots
@@ -118,8 +118,16 @@ export default function ScreenshotUploader({
transition={quickTransition}
className="rounded-lg border border-white/50 bg-white/5 p-2 text-xs"
>
<div className="overflow-hidden rounded-md border border-white/50 bg-black/25">
<img src={item.url} alt={`Screenshot ${index + 1}`} className="h-24 w-full object-cover" />
<div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-md border border-white/50 bg-black/25">
<img
src={item.url}
alt={`Screenshot ${index + 1}`}
className="max-h-full max-w-full object-contain"
loading="lazy"
decoding="async"
width="160"
height="160"
/>
</div>
<div className="mt-2 truncate text-white/90">{item.file.name}</div>
<div className="mt-1 text-white/55">{Math.round(item.file.size / 1024)} KB</div>

20
resources/js/components/upload/UploadActions.jsx
View File

@@ -54,7 +54,7 @@ export default function UploadActions({
disabled={disabled}
title={disabled ? disableReason : 'Start upload'}
onClick={() => onStart?.()}
className={`rounded-lg px-5 py-2.5 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300/75 ${disabled ? 'cursor-not-allowed bg-emerald-700/55 text-white/75' : 'bg-emerald-500 text-white hover:bg-emerald-400 shadow-[0_10px_28px_rgba(16,185,129,0.32)] ring-1 ring-emerald-200/40'}`}
className={`btn-primary text-sm ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
>
{label}
</button>
@@ -69,7 +69,7 @@ export default function UploadActions({
disabled={disabled}
title={disabled ? disableReason : 'Continue to Publish'}
onClick={() => onContinue?.()}
className={`rounded-lg px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 ${disabled ? 'cursor-not-allowed bg-sky-700/45 text-sky-100/75' : 'bg-sky-400 text-slate-950 hover:bg-sky-300 shadow-[0_10px_28px_rgba(56,189,248,0.28)] ring-1 ring-sky-100/45'}`}
className={`btn-primary text-sm ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
>
Continue to Publish
</button>
@@ -83,7 +83,7 @@ export default function UploadActions({
disabled={disabled}
title={disabled ? disableReason : 'Publish artwork'}
onClick={() => onPublish?.()}
className={`rounded-lg px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300/75 ${disabled ? 'cursor-not-allowed bg-emerald-700/45 text-emerald-100/75' : 'bg-emerald-400 text-slate-950 shadow-[0_0_0_1px_rgba(167,243,208,0.85),0_0_24px_rgba(52,211,153,0.45)] hover:bg-emerald-300'}`}
className={`btn-primary text-sm ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
>
{isPublishing ? 'Publishing…' : 'Publish'}
</button>
@@ -91,13 +91,14 @@ export default function UploadActions({
}
return (
<footer data-testid="wizard-action-bar" className={`${mobileSticky ? 'sticky bottom-0 z-20' : ''} rounded-xl border border-white/10 bg-slate-950/80 p-3 shadow-[0_-12px_32px_rgba(2,8,23,0.65)] backdrop-blur sm:p-4 lg:static lg:shadow-none`}>
<footer data-testid="wizard-action-bar" className={`${mobileSticky ? 'sticky fixed inset-x-0 bottom-0 z-20 px-4 pb-3 lg:static lg:px-0 lg:pb-0' : ''}`}>
<div className="mx-auto w-full max-w-4xl rounded-xl border border-white/10 bg-nova-800/80 p-3 shadow-[0_-12px_32px_rgba(2,8,23,0.65)] backdrop-blur-sm sm:p-4 lg:shadow-none">
<div className="flex flex-wrap items-center justify-end gap-2.5">
{canGoBack && (
<button
type="button"
onClick={() => onBack?.()}
className="rounded-lg border border-white/30 bg-white/10 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
className="btn-secondary text-sm"
>
Back
</button>
@@ -107,7 +108,7 @@ export default function UploadActions({
<button
type="button"
onClick={() => onSaveDraft?.()}
className="rounded-lg border border-purple-300/45 bg-purple-500/20 px-3.5 py-2 text-sm font-medium text-purple-50 transition hover:bg-purple-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-300/70"
className="btn-secondary text-sm"
>
Save draft
</button>
@@ -119,7 +120,7 @@ export default function UploadActions({
onClick={handleCancel}
disabled={isCancelling}
title={confirmCancel ? 'Click again to confirm cancel' : 'Cancel current upload'}
className="rounded-lg border border-amber-300/45 bg-amber-500/20 px-3.5 py-2 text-sm font-medium text-amber-50 transition hover:bg-amber-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/75 disabled:cursor-not-allowed disabled:opacity-60"
className="btn-secondary text-sm disabled:cursor-not-allowed disabled:opacity-60"
>
{isCancelling ? 'Cancelling…' : confirmCancel ? 'Cancel upload?' : 'Cancel'}
</button>
@@ -129,7 +130,7 @@ export default function UploadActions({
<button
type="button"
onClick={() => onRetry?.()}
className="rounded-lg border border-amber-300/45 bg-amber-500/20 px-3.5 py-2 text-sm font-medium text-amber-50 transition hover:bg-amber-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/75"
className="btn-secondary text-sm"
>
Retry
</button>
@@ -139,7 +140,7 @@ export default function UploadActions({
<button
type="button"
onClick={() => onReset?.()}
className="rounded-lg border border-white/30 bg-white/10 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
className="btn-secondary text-sm"
>
{resetLabel}
</button>
@@ -147,6 +148,7 @@ export default function UploadActions({
{renderPrimary()}
</div>
</div>
</footer>
)
}

27
resources/js/components/upload/UploadDropzone.jsx
View File

@@ -98,20 +98,27 @@ export default function UploadDropzone({
const droppedFile = event.dataTransfer?.files?.[0]
if (droppedFile) emitFile(droppedFile)
}}
animate={prefersReducedMotion ? undefined : {
scale: dragging ? 1.01 : 1,
borderColor: invalid ? 'rgba(252,165,165,0.7)' : dragging ? 'rgba(103,232,249,0.9)' : 'rgba(56,189,248,0.35)',
backgroundColor: invalid ? 'rgba(23,68,68,0.10)' : dragging ? 'rgba(6,182,212,0.20)' : 'rgba(14,165,233,0.05)',
}}
animate={prefersReducedMotion ? undefined : { scale: dragging ? 1.01 : 1 }}
transition={dragTransition}
className={`group rounded-xl border-2 border-dashed border-white/50 py-6 px-4 text-center transition hover:border-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70 ${locked ? 'cursor-default bg-white/5 opacity-75' : 'cursor-pointer'} ${invalid ? 'border-red-300/70 bg-red-500/10 shadow-[0_0_0_1px_rgba(248,113,113,0.2)]' : dragging ? 'border-cyan-300 bg-cyan-500/20 shadow-[0_0_0_1px_rgba(103,232,249,0.35)]' : locked ? 'bg-white/5' : 'bg-sky-500/5 hover:bg-sky-500/12'}`}
>
<h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
<p className="mt-1 text-xs text-soft">{description}</p>
{previewUrl ? (
<div className="mt-2 grid place-items-center">
<div className="relative w-full max-w-[520px]">
<img src={previewUrl} alt="Selected preview" className="mx-auto max-h-64 w-auto rounded-lg object-contain" />
<div className="pointer-events-none absolute bottom-2 right-2 rounded-full bg-black/40 px-2 py-1 text-xs text-white/90">Click to replace</div>
<div className="mt-2 w-full flex flex-col items-center gap-2">
<div className="flex h-52 w-64 items-center justify-center overflow-hidden rounded-lg bg-black/40 ring-1 ring-white/10">
<img
src={previewUrl}
alt="Selected preview"
className="h-full w-full object-contain object-center"
loading="lazy"
decoding="async"
width="250"
height="208"
/>
</div>
<div className="text-xs text-white/70">Click to replace</div>
</div>
) : (
<>
@@ -123,8 +130,6 @@ export default function UploadDropzone({
</svg>
</div>
<h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
<p className="mt-1 text-xs text-soft">{description}</p>
<p className="mt-1 text-xs text-soft">Accepted: JPG, JPEG, PNG, WEBP, ZIP, RAR, 7Z, TAR, GZ</p>
<p className="text-xs text-soft">Max size: images 50MB · archives 200MB</p>

29
resources/js/components/upload/UploadProgress.jsx
View File

@@ -51,20 +51,13 @@ export default function UploadProgress({
Error: 'border-red-400/35 bg-red-400/15 text-red-100',
}
const statusColors = {
Idle: { borderColor: 'rgba(148,163,184,0.35)', backgroundColor: 'rgba(148,163,184,0.15)', color: 'rgb(226,232,240)' },
Uploading: { borderColor: 'rgba(56,189,248,0.35)', backgroundColor: 'rgba(56,189,248,0.15)', color: 'rgb(224,242,254)' },
Processing: { borderColor: 'rgba(251,191,36,0.35)', backgroundColor: 'rgba(251,191,36,0.15)', color: 'rgb(254,243,199)' },
Ready: { borderColor: 'rgba(52,211,153,0.35)', backgroundColor: 'rgba(52,211,153,0.15)', color: 'rgb(209,250,229)' },
Error: { borderColor: 'rgba(248,113,113,0.35)', backgroundColor: 'rgba(248,113,113,0.15)', color: 'rgb(254,226,226)' },
}
const quickTransition = prefersReducedMotion
? { duration: 0 }
: { duration: 0.2, ease: 'easeOut' }
const stepLabels = ['Preload', 'Details', 'Publish']
const stepIndex = progress >= 100 ? 2 : progress >= 34 ? 1 : 0
const progressValue = Math.max(0, Math.min(100, Number(progress) || 0))
return (
<header className="rounded-xl border border-white/50 bg-gradient-to-br from-slate-900/80 to-slate-900/50 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.35)] sm:p-6">
@@ -75,13 +68,11 @@ export default function UploadProgress({
<p className="mt-1 text-sm text-white/65">{description}</p>
</div>
<motion.span
<span
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusTheme[resolvedStatus] || statusTheme.Idle}`}
animate={statusColors[resolvedStatus] || statusColors.Idle}
transition={quickTransition}
>
{resolvedStatus}
</motion.span>
</span>
</div>
<div className="mt-4 flex items-center gap-2 overflow-x-auto">
@@ -100,16 +91,14 @@ export default function UploadProgress({
<div className="mt-4">
<div className="h-2 overflow-hidden rounded-full bg-white/10">
<div
className="h-full rounded-full"
style={{
width: `${Math.max(0, Math.min(100, progress))}%`,
background: 'linear-gradient(90deg,#38bdf8,#06b6d4,#34d399)',
transition: prefersReducedMotion ? 'none' : 'width 200ms ease-out',
}}
<motion.div
className="h-full origin-left rounded-full bg-gradient-to-r from-sky-400/90 via-cyan-300/90 to-emerald-300/90"
initial={false}
animate={{ scaleX: progressValue / 100 }}
transition={quickTransition}
/>
</div>
<p className="mt-2 text-right text-xs text-white/55">{Math.round(progress)}%</p>
<p className="mt-2 text-right text-xs text-white/55">{Math.round(progressValue)}%</p>
</div>
<AnimatePresence initial={false}>

132
resources/js/components/upload/UploadWizard.jsx
View File

@@ -406,9 +406,26 @@ export default function UploadWizard({
if (!selected) return []
return categoryTreeByType[selected] || []
}, [categoryTreeByType, metadata.contentType])
const allRootCategoryOptions = useMemo(() => {
const items = []
Object.entries(categoryTreeByType).forEach(([contentTypeValue, roots]) => {
roots.forEach((root) => {
items.push({
...root,
contentTypeValue,
})
})
})
return items
}, [categoryTreeByType])
const selectedRootFromAnyType = useMemo(() => {
const selectedId = String(metadata.rootCategoryId || '')
if (!selectedId) return null
return allRootCategoryOptions.find((root) => String(root.id) === selectedId) || null
}, [allRootCategoryOptions, metadata.rootCategoryId])
const selectedRootCategory = useMemo(() => {
return filteredCategoryTree.find((root) => String(root.id) === String(metadata.rootCategoryId || '')) || null
}, [filteredCategoryTree, metadata.rootCategoryId])
return filteredCategoryTree.find((root) => String(root.id) === String(metadata.rootCategoryId || '')) || selectedRootFromAnyType || null
}, [filteredCategoryTree, metadata.rootCategoryId, selectedRootFromAnyType])
const requiresSubCategory = Boolean(selectedRootCategory && Array.isArray(selectedRootCategory.children) && selectedRootCategory.children.length > 0)
const stepProgressPercent = useMemo(() => {
if (activeStep === 1) return 33
@@ -851,6 +868,12 @@ export default function UploadWizard({
description: String(metadata.description || '').trim() || null,
}
if (resolvedArtworkId && resolvedArtworkId > 0) {
dispatchMachine({ type: 'PUBLISH_SUCCESS' })
emitUploadEvent('upload_publish', { id: publishTargetId })
return
}
if (!machine.sessionId) {
if (!publishTargetId) throw new Error('Missing publish id.')
const publishController = registerController()
@@ -1023,17 +1046,27 @@ export default function UploadWizard({
<div className="max-w-4xl mx-auto px-4 py-6">
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
<div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
<h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Add details</h2>
<h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Artwork details</h2>
<p className="mt-1 text-sm text-white/65">Complete required metadata and rights confirmation before publishing.</p>
</div>
<div className="mb-6 rounded-xl border border-white/8 bg-white/4 p-4">
<p className="text-xs uppercase tracking-wide text-white/55">Uploaded asset</p>
<div className="mt-2 flex items-center gap-3">
<div className="mt-2 flex flex-col gap-3 md:flex-row md:items-center">
{primaryPreviewUrl && !isArchive ? (
<img src={primaryPreviewUrl} alt="Uploaded artwork thumbnail" className="h-20 w-20 rounded-lg border border-white/50 object-cover" />
<div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-lg border border-white/50 bg-black/25">
<img
src={primaryPreviewUrl}
alt="Uploaded artwork thumbnail"
className="max-h-full max-w-full object-contain"
loading="lazy"
decoding="async"
width="160"
height="160"
/>
</div>
) : (
<div className="grid h-20 w-20 place-items-center rounded-lg border border-white/15 bg-white/5 text-white/60">📦</div>
<div className="grid h-40 w-40 place-items-center rounded-lg border border-white/15 bg-white/5 text-white/60">📦</div>
)}
<div className="min-w-0">
<p className="truncate text-sm font-medium text-white">{primaryFile?.name || 'Primary file selected'}</p>
@@ -1081,6 +1114,10 @@ export default function UploadWizard({
src={iconPath}
alt={`${ct.name || 'Content type'} mascot`}
className={`h-full w-full object-contain transition-all duration-150 ${active ? 'grayscale-0 opacity-100' : 'grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-90'}`}
loading="lazy"
decoding="async"
width="80"
height="80"
onError={(event) => {
if (event.currentTarget.src.includes('mascot_other.webp')) return
event.currentTarget.src = '/gfx/mascot_other.webp'
@@ -1132,6 +1169,29 @@ export default function UploadWizard({
})}
</div>
)}
<div className="sr-only">
<label htmlFor="upload-root-category">Root category</label>
<select
id="upload-root-category"
value={String(metadata.rootCategoryId || '')}
onChange={(event) => {
const nextRootId = String(event.target.value || '')
const matchedRoot = allRootCategoryOptions.find((root) => String(root.id) === nextRootId)
setMetadata((current) => ({
...current,
contentType: matchedRoot ? String(matchedRoot.contentTypeValue) : current.contentType,
rootCategoryId: nextRootId,
subCategoryId: '',
}))
}}
>
<option value="">Select root category</option>
{allRootCategoryOptions.map((root) => (
<option key={root.id} value={String(root.id)}>{root.name}</option>
))}
</select>
</div>
</div>
{requiresSubCategory && (
@@ -1160,6 +1220,26 @@ export default function UploadWizard({
)
})}
</div>
<div className="sr-only">
<label htmlFor="upload-subcategory">Subcategory</label>
<select
id="upload-subcategory"
value={String(metadata.subCategoryId || '')}
onChange={(event) => {
const nextSubId = String(event.target.value || '')
setMetadata((current) => ({
...current,
subCategoryId: nextSubId,
}))
}}
>
<option value="">Select subcategory</option>
{selectedRootCategory.children.map((sub) => (
<option key={sub.id} value={String(sub.id)}>{sub.name}</option>
))}
</select>
</div>
</div>
)}
@@ -1195,21 +1275,32 @@ export default function UploadWizard({
}
return (
<div className="rounded-2xl border border-white/8 bg-slate-900/70 p-6 sm:p-7">
<div className="mb-6 rounded-xl border border-white/50 bg-white/5 px-4 py-3">
<h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Review & publish</h2>
<p className="mt-1 text-sm text-white/65">Review your submission and publish when all checks are ready.</p>
</div>
<div className="max-w-4xl mx-auto px-4 py-6">
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
<div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
<h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Review & publish</h2>
<p className="mt-1 text-sm text-white/65">Review your submission and publish when all checks are ready.</p>
</div>
<div className="rounded-xl border border-white/8 bg-white/4 p-5">
<div className="flex flex-col gap-4 sm:flex-row">
<div className="w-full sm:w-40">
<div className="rounded-xl border border-white/8 bg-white/4 p-5">
<div className="flex flex-col gap-4 md:flex-row">
<div className="w-40">
{primaryPreviewUrl && !isArchive ? (
<img src={primaryPreviewUrl} alt="Review preview" className="h-32 w-full rounded-lg border border-white/50 object-cover" />
) : (
<div className="grid h-32 w-full place-items-center rounded-lg border border-white/50 bg-black/25 text-white/60">Archive</div>
)}
</div>
<div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-lg border border-white/50 bg-black/25">
<img
src={primaryPreviewUrl}
alt="Review preview"
className="max-h-full max-w-full object-contain"
loading="lazy"
decoding="async"
width="160"
height="160"
/>
</div>
) : (
<div className="grid h-40 w-40 place-items-center rounded-lg border border-white/50 bg-black/25 text-white/60">Archive</div>
)}
</div>
<div className="min-w-0 flex-1 space-y-2">
<p className="text-base font-semibold text-white">{metadata.title || 'Untitled artwork'}</p>
<p className="text-sm text-white/75">
@@ -1237,11 +1328,12 @@ export default function UploadWizard({
</div>
</div>
</div>
</div>
)
}
return (
<section ref={stepContentRef} className="space-y-8 text-white" data-is-archive={isArchive ? 'true' : 'false'}>
<section ref={stepContentRef} className="space-y-8 pb-24 text-white lg:pb-0" data-is-archive={isArchive ? 'true' : 'false'}>
{showRestoredBanner && (
<div className="rounded-xl border border-sky-300/30 bg-sky-500/10 px-4 py-2 text-sm text-sky-100">
<div className="flex items-center justify-between gap-3">