zero-knowledge file sharing
13
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix sizing

Juliet 7d75a4c7 34b23499

+16 -15
+16 -15
web/src/pages/Upload.tsx
··· 200 200 return ( 201 201 <> 202 202 <div 203 - class="group relative mx-auto flex aspect-square w-[65vw] max-w-[500px] items-center justify-center" 203 + class="group relative mx-auto flex aspect-square w-[80vw] max-w-[500px] items-center justify-center" 204 204 onClick={() => fileInput.click()} 205 205 > 206 206 <svg ··· 209 209 > 210 210 <defs> 211 211 <clipPath id="circle-clip"> 212 - <circle cx={CENTER} cy={CENTER} r={RADIUS - 2.5} /> 212 + <circle cx={CENTER} cy={CENTER} r={RADIUS - 3.5} /> 213 213 </clipPath> 214 214 </defs> 215 215 <style>{`@keyframes wave { from { transform: translateX(0) } to { transform: translateX(-${WAVE_LEN}px) } }`}</style> ··· 219 219 r={RADIUS} 220 220 fill="none" 221 221 stroke={dragging() ? "var(--color-accent)" : "var(--color-border)"} 222 - stroke-width="5" 223 - stroke-dasharray={dragging() ? "6 4" : "none"} 222 + stroke-width="7" 223 + pathLength={dragging() ? "100" : undefined} 224 + stroke-dasharray={dragging() ? "3 2" : "none"} 224 225 class="transition-all duration-200" 225 226 /> 226 227 <circle ··· 229 230 r={RADIUS} 230 231 fill="none" 231 232 stroke={tooLarge() ? "var(--color-danger)" : "var(--color-accent)"} 232 - stroke-width="5" 233 + stroke-width="7" 233 234 stroke-dasharray={`${CIRCUMFERENCE}`} 234 - stroke-dashoffset={`${CIRCUMFERENCE * (1 - (uploading() ? 0 : sizeRatio()))}`} 235 + stroke-dashoffset={`${CIRCUMFERENCE * (1 - (uploading() || dragging() ? 0 : sizeRatio()))}`} 235 236 stroke-linecap="round" 236 237 transform={`rotate(-90 ${CENTER} ${CENTER})`} 237 238 style={{ 238 - transition: `all ${animDuration()}ms ease-out`, 239 + transition: dragging() ? "none" : `all ${animDuration()}ms ease-out`, 239 240 }} 240 241 /> 241 242 {/* Upload liquid fill */} ··· 252 253 </g> 253 254 </svg> 254 255 255 - <div class="z-10 flex flex-col items-center gap-3 text-center"> 256 + <div class="z-10 flex flex-col items-center gap-2 text-center sm:gap-3"> 256 257 <Show when={uploading()}> 257 258 <span 258 259 class="text-accent font-medium tabular-nums" ··· 277 278 fallback={ 278 279 <> 279 280 <span 280 - class="text-text truncate text-xs" 281 - style={{ "max-width": "clamp(120px, 40vw, 300px)" }} 281 + class="text-text truncate" 282 + style={{ 283 + "max-width": "clamp(120px, 40vw, 300px)", 284 + "font-size": "clamp(0.75rem, 2vw, 1rem)", 285 + }} 282 286 > 283 287 {file()!.name} 284 288 </span> 285 289 <span 286 - class={ 287 - tooLarge() 288 - ? "text-danger text-xs font-medium" 289 - : "text-muted text-xs" 290 - } 290 + class={`font-medium ${tooLarge() ? "text-danger" : "text-muted"}`} 291 + style={{ "font-size": "clamp(0.625rem, 1.5vw, 0.875rem)" }} 291 292 > 292 293 {formatBytes(file()!.size)} 293 294 {tooLarge() ? ` / ${formatBytes(maxFileSize())} limit` : ""}