Upload folder using huggingface_hub
Browse files
client/src/components/Refinity.tsx
CHANGED
|
@@ -376,12 +376,16 @@ const Refinity: React.FC = () => {
|
|
| 376 |
navigation
|
| 377 |
pagination={{ clickable: true }}
|
| 378 |
centeredSlides
|
| 379 |
-
slidesPerView={
|
| 380 |
-
spaceBetween={
|
| 381 |
-
breakpoints={{
|
|
|
|
|
|
|
|
|
|
|
|
|
| 382 |
grabCursor
|
| 383 |
-
coverflowEffect={{ rotate:
|
| 384 |
-
className="!px-6"
|
| 385 |
style={{ height: 'clamp(420px, 70vh, 820px)' }}
|
| 386 |
>
|
| 387 |
{taskVersions.map((v, idx) => {
|
|
@@ -389,12 +393,12 @@ const Refinity: React.FC = () => {
|
|
| 389 |
const isCenter = idx === flowIndex;
|
| 390 |
return (
|
| 391 |
<SwiperSlide key={v.id} style={{ width: 'clamp(320px, 56vw, 720px)' }}>
|
| 392 |
-
<div className="relative h-full rounded-2xl p-
|
| 393 |
<div className="pointer-events-none absolute inset-0 rounded-2xl opacity-40 [background:linear-gradient(to_bottom,rgba(255,255,255,0.45),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
|
| 394 |
<div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-30" />
|
| 395 |
<div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
|
| 396 |
<div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
|
| 397 |
-
<div className="text-gray-900 whitespace-pre-wrap break-words leading-relaxed max-h-[calc(100%-
|
| 398 |
{isCenter && (
|
| 399 |
<div className="mt-4 flex gap-3">
|
| 400 |
<button onClick={()=>{ setPreviewVersionId(v.id); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Full Text</button>
|
|
|
|
| 376 |
navigation
|
| 377 |
pagination={{ clickable: true }}
|
| 378 |
centeredSlides
|
| 379 |
+
slidesPerView={1.12}
|
| 380 |
+
spaceBetween={12}
|
| 381 |
+
breakpoints={{
|
| 382 |
+
640: { slidesPerView: 1.2, spaceBetween: 16 },
|
| 383 |
+
1024: { slidesPerView: 1.6, spaceBetween: 24 },
|
| 384 |
+
1440: { slidesPerView: 1.8, spaceBetween: 32 }
|
| 385 |
+
}}
|
| 386 |
grabCursor
|
| 387 |
+
coverflowEffect={{ rotate: 8, stretch: -20, depth: 160, modifier: 1, slideShadows: false }}
|
| 388 |
+
className="!px-6 overflow-visible"
|
| 389 |
style={{ height: 'clamp(420px, 70vh, 820px)' }}
|
| 390 |
>
|
| 391 |
{taskVersions.map((v, idx) => {
|
|
|
|
| 393 |
const isCenter = idx === flowIndex;
|
| 394 |
return (
|
| 395 |
<SwiperSlide key={v.id} style={{ width: 'clamp(320px, 56vw, 720px)' }}>
|
| 396 |
+
<div className="relative h-full rounded-2xl p-6 bg-white ring-1 ring-gray-200 shadow-xl text-base">
|
| 397 |
<div className="pointer-events-none absolute inset-0 rounded-2xl opacity-40 [background:linear-gradient(to_bottom,rgba(255,255,255,0.45),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
|
| 398 |
<div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-30" />
|
| 399 |
<div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
|
| 400 |
<div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
|
| 401 |
+
<div className="text-gray-900 whitespace-pre-wrap break-words leading-relaxed max-h-[calc(100%-64px)] overflow-auto pr-1">{snippet}</div>
|
| 402 |
{isCenter && (
|
| 403 |
<div className="mt-4 flex gap-3">
|
| 404 |
<button onClick={()=>{ setPreviewVersionId(v.id); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Full Text</button>
|