lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

fix: mobile onboarding viewport + filebrowser demo fixes

Browse Source 
Onboarding:
- Fixed viewport to use dvh units with position:fixed container
- All views use scrollable glass containers that fit within viewport
- Responsive typography and spacing (mobile-first breakpoints)
- Tighter padding/margins on small screens
- RootRedirect checks localStorage first for instant redirect
- Spinner only appears after 500ms delay to avoid flash

Filebrowser:
- Fix CloudFolder null initialPath crash (watch both useNativeUI + section)
- Remove unused `host` computed (was causing TS error)
- Add mock GET /app/filebrowser/ landing page
- Increase express.json limit to 50mb

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-09 19:32:28 +00:00
parent 4bc0c4b483
commit a6c1820a83
13 changed files with 153 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
neode-ui/src/views/OnboardingOptions.vue
View File

@@ -1,81 +1,77 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4 overflow-x-hidden">
<div class="max-w-6xl w-full overflow-x-hidden">
<div class="text-center mb-8">
<div class="logo-gradient-border inline-block mb-8">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<div class="max-w-[1200px] w-full relative z-10 path-glass-container onb-scroll-container">
<div class="text-center mb-4 sm:mb-6 flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
<div class="logo-gradient-border inline-block mb-4 sm:mb-6">
<img
src="/assets/icon/favico-black-v2.svg"
alt="Archipelago"
class="w-20 h-20"
class="w-16 h-16 sm:w-20 sm:h-20"
/>
</div>
<h1 class="text-4xl font-bold text-white mb-4">Choose Your Setup</h1>
<p class="text-xl text-white/80">How would you like to get started?</p>
<h1 class="text-2xl sm:text-4xl font-bold text-white mb-2 sm:mb-4">Choose Your Setup</h1>
<p class="text-base sm:text-xl text-white/80">How would you like to get started?</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-6 px-3 sm:px-4">
<!-- Fresh Start -->
<button
@click="selectOption('fresh')"
class="glass-card p-8 text-center transition-all hover:-translate-y-1 hover:shadow-glass"
:class="{ 'bg-white/12 shadow-[0_12px_32px_rgba(0,0,0,0.6),0_0_30px_rgba(255,255,255,0.2)]': selected === 'fresh' }"
class="path-option-card text-center"
:class="{ 'path-option-card--selected': selected === 'fresh' }"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="mb-3 sm:mb-4">
<div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Fresh Start</h3>
<p class="text-white/70 text-sm">
<h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Fresh Start</h3>
<p class="text-white/70 text-xs sm:text-sm">
Set up a new server from scratch
</p>
</button>
<!-- Restore Backup (Coming Soon) -->
<div
class="glass-card p-8 text-center opacity-40 cursor-not-allowed"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="path-option-card text-center opacity-40 cursor-not-allowed">
<div class="mb-3 sm:mb-4">
<div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Restore Backup</h3>
<p class="text-white/70 text-sm">
<h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Restore Backup</h3>
<p class="text-white/70 text-xs sm:text-sm">
Restore from a previous backup
</p>
<span class="text-xs text-white/50 mt-2 block">(Coming Soon)</span>
<span class="text-xs text-white/50 mt-1 block">(Coming Soon)</span>
</div>
<!-- Connect Existing (Coming Soon) -->
<div
class="glass-card p-8 text-center opacity-40 cursor-not-allowed"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="path-option-card text-center opacity-40 cursor-not-allowed">
<div class="mb-3 sm:mb-4">
<div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Connect Existing</h3>
<p class="text-white/70 text-sm">
<h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Connect Existing</h3>
<p class="text-white/70 text-xs sm:text-sm">
Connect to an existing Archipelago server
</p>
<span class="text-xs text-white/50 mt-2 block">(Coming Soon)</span>
<span class="text-xs text-white/50 mt-1 block">(Coming Soon)</span>
</div>
</div>
<div class="mt-12 text-center">
<div class="flex justify-center flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6 mt-4 sm:mt-8">
<button
@click="proceed"
class="glass-button px-8 py-4 rounded-lg text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30"
class="path-action-button path-action-button--continue"
>
Continue →
Continue
</button>
</div>
</div>