a2nr
/
elemes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance UI Experience

This commit is contained in:
a2nr 2026-04-28 12:47:53 +07:00
parent f8de0cab5f
commit 6f1b86226e
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/lib/components/WorkspaceHeader.svelte
View File

@ -60,30 +60,38 @@
else mobileMode = 'hidden';
}
}
function handleTabClick(tab: TabType, lang?: string) {
activeTab = tab;
if (lang) currentLanguage = lang;
if (isMobile && mobileMode === 'hidden') {
mobileMode = 'half';
}
}
</script>
{#snippet chromeTabs()}
{#if hasInfo}
<button class="chrome-tab" class:active={activeTab === 'info'} onclick={() => (activeTab = 'info')}>Info</button>
<button class="chrome-tab" class:active={activeTab === 'info'} onclick={() => handleTabClick('info')}>Info</button>
{/if}
{#if hasExercise}
<button class="chrome-tab" class:active={activeTab === 'exercise'} onclick={() => (activeTab = 'exercise')}>Exercise</button>
<button class="chrome-tab" class:active={activeTab === 'exercise'} onclick={() => handleTabClick('exercise')}>Exercise</button>
{/if}
{#if hasCodeEditor}
{#if hasMultiLang}
<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'c'} onclick={() => { activeTab = 'editor'; currentLanguage = 'c'; }}>C</button>
<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'python'} onclick={() => { activeTab = 'editor'; currentLanguage = 'python'; }}>Python</button>
<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'c'} onclick={() => handleTabClick('editor', 'c')}>C</button>
<button class="chrome-tab" class:active={activeTab === 'editor' && currentLanguage === 'python'} onclick={() => handleTabClick('editor', 'python')}>Python</button>
{:else}
<button class="chrome-tab" class:active={activeTab === 'editor'} onclick={() => (activeTab = 'editor')}>Code</button>
<button class="chrome-tab" class:active={activeTab === 'editor'} onclick={() => handleTabClick('editor')}>Code</button>
{/if}
{/if}
{#if hasCircuit}
<button class="chrome-tab" class:active={activeTab === 'circuit'} onclick={() => (activeTab = 'circuit')}>Circuit</button>
<button class="chrome-tab" class:active={activeTab === 'circuit'} onclick={() => handleTabClick('circuit')}>Circuit</button>
{/if}
{#if hasVelxio}
<button class="chrome-tab" class:active={activeTab === 'velxio'} onclick={() => (activeTab = 'velxio')}>Arduino</button>
<button class="chrome-tab" class:active={activeTab === 'velxio'} onclick={() => handleTabClick('velxio')}>Arduino</button>
{/if}
<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => (activeTab = 'output')}>Output</button>
<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => handleTabClick('output')}>Output</button>
{/snippet}
{#if isMobile}

4
frontend/src/routes/lesson/[slug]/+page.svelte
View File

@ -150,7 +150,7 @@
// Mobile state: 'hidden' (only handle bar), 'half' (60%), 'full' (100%)
let isMobile = $state(false);
let mobileMode = $state<'hidden' | 'half' | 'full'>('half');
let mobileMode = $state<'hidden' | 'half' | 'full'>('hidden');
// Media query detection
$effect(() => {
@ -209,7 +209,7 @@
else if (isVelxioLesson) activeTab = 'velxio' as any;
else if (lesson.active_tabs?.includes('circuit') && !hasC && !hasPython) activeTab = 'circuit';
else activeTab = 'editor';
mobileMode = 'half';
mobileMode = 'hidden';
// Populate navbar context
lessonContext.set({