jcreek/AutomatedAssessmentFeedbackAgent
1
0
Fork 0
mirror of https://github.com/jcreek/AutomatedAssessmentFeedbackAgent.git synced 2026-07-13 02:53:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Improve styling of upload page

Browse Source
This commit is contained in:
Josh Creek
2025-04-21 17:36:30 +01:00
parent 4f5babbe23
commit 83feb9ac23
2 changed files with 112 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AgenticProgress.svelte
+105 -32
View File
@@ -50,6 +50,10 @@
flex-direction: column;
align-items: center;
margin-top: 2rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.agent-avatar {
font-size: 3rem;
@@ -75,32 +79,100 @@
background: linear-gradient(90deg, #5b9df9 0%, #4ade80 100%);
transition: width 0.5s;
}
ul.steps {
list-style: none;
ul.tool-steps {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 2rem;
padding: 0;
list-style: none;
width: 100%;
max-width: 400px;
}
li.step {
li.tool-step-card {
display: flex;
align-items: center;
padding: 0.75rem 0.5rem;
border-radius: 6px;
margin-bottom: 0.5rem;
background: #f8fafc;
font-size: 1.05rem;
background: #f3f6fa;
border-radius: 14px;
box-shadow: 0 2px 12px 0 rgba(44, 62, 80, 0.09);
padding: 0.5rem;
gap: 1.5rem;
transition: box-shadow 0.2s, border 0.2s;
outline: none;
border: 2px solid #e0e7ef;
min-height: 3.6rem;
width: 100%;
box-sizing: border-box;
}
li.step[aria-current="step"] {
.tool-step-icon {
margin-right: 1.25rem;
font-size: 2rem;
min-width: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.tool-step-desc {
font-size: 1.05rem;
font-weight: 500;
color: #22223b;
flex: 1 1 auto;
margin-right: 2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tool-step-time {
font-size: 0.97rem;
color: #64748b;
margin-right: 1.5rem;
min-width: 4.2rem;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
.tool-step-status {
font-size: 1.45rem;
margin-left: 0.5rem;
width: 2.2rem;
height: 2.2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e0f2fe;
color: #2563eb;
font-weight: bold;
box-shadow: 0 1px 3px 0 rgba(44, 62, 80, 0.07);
flex-shrink: 0;
}
.step-icon {
.tool-step-card:focus {
border: 2px solid #60a5fa;
box-shadow: 0 0 0 3px #bae6fd;
}
.tool-step-card.running {
border-color: #60a5fa;
background: #e8f1fb;
}
.tool-step-card.done {
border-color: #22c55e;
}
.tool-step-icon {
margin-right: 1rem;
font-size: 1.5rem;
min-width: 2rem;
text-align: center;
}
.tool-step-desc {
font-size: 1.05rem;
}
.tool-step-time {
font-size: 0.9rem;
color: #6b7280;
}
.tool-step-status {
margin-left: auto;
font-size: 1.2rem;
}
.visually-hidden {
position: absolute;
left: -9999px;
@@ -120,26 +192,27 @@
></div>
</div>
<div aria-live="polite" class="visually-hidden">{liveMessage}</div>
<ul class="steps" aria-label="Processing steps">
{#if agentThinking}
<li class="step" aria-current="step">
<span class="step-icon" aria-hidden="true">💡</span>
<span>AI Agent is analyzing your submission…</span>
<ul class="tool-steps" aria-label="Processing steps">
{#if agentThinking}
<li class="tool-step-card" aria-current="step" tabindex="0">
<span class="tool-step-icon" aria-hidden="true">💡</span>
<span class="tool-step-desc">The AI Agent is analyzing your submission…</span>
</li>
{:else}
{#each steps as step, idx}
<li class="tool-step-card {step.status}" tabindex="0" aria-current={step.status === 'running' ? 'step' : undefined}>
<span class="tool-step-icon" aria-hidden="true">{step.icon}</span>
<span class="tool-step-desc">{step.description}</span>
<span class="tool-step-time">{new Date(step.time).toLocaleTimeString()}</span>
<span class="tool-step-status" aria-label={step.status === 'done' ? 'Completed' : step.status === 'running' ? 'In progress' : 'Pending'}>
{step.status === 'done'
? '✅'
: step.status === 'running'
? '⏳'
: '🛠️'}
</span>
</li>
{:else}
{#each steps as step, idx}
<li class="step {step.status}">
<span class="step-icon" aria-hidden="true">{step.icon}</span>
<span class="step-desc">{step.description}</span>
<span class="step-time">{new Date(step.time).toLocaleTimeString()}
{step.status === 'done'
? '✅'
: step.status === 'running'
? '⏳'
: '🛠️'}
</span>
</li>
{/each}
{/if}
</ul>
{/each}
{/if}
</ul>
</div>
src/routes/upload/+page.svelte
+7 -4
View File
@@ -92,8 +92,10 @@
prev.unshift(entry);
localStorage.setItem('assessmentHistory', JSON.stringify(prev.slice(0, 50)));
} catch {}
// Redirect to /results
window.location.assign('/results');
file = null;
textInput = '';
taskDescription = '';
@@ -112,14 +114,13 @@
} catch (err) {
errorMsg = 'Network or server error. Please check your connection and try again.';
} finally {
submitting = false;
// Disabled to make the transition to the results page smoother
// submitting = false;
}
}
</script>
<section class="relative mx-auto max-w-xl py-12">
<h1 class="mb-4 text-2xl font-bold">Upload Student Submissions</h1>
<p class="mb-6">Upload student assignments for instant AI-powered assessment and feedback.</p>
<section class="relative mx-auto max-w-4xl py-12">
{#if errorMsg}
<div
class="mb-4 rounded border border-red-300 bg-red-50 p-3 text-red-700"
@@ -133,6 +134,8 @@
{#if submitting}
<AgenticProgress {toolEvents} />
{:else}
<h1 class="mb-4 text-2xl font-bold">Upload Student Submissions</h1>
<p class="mb-6">Upload student assignments for instant AI-powered assessment and feedback.</p>
<form class="space-y-6" on:submit|preventDefault={handleSubmit}>
<div class="mb-4">
<label class="mb-1 block font-semibold" for="task"