Skip to content

Commit 9ab28fc

Browse files
Vice-108Vice-108
committed
refactor form layouts and improve accessibility across components
1 parent fc5d648 commit 9ab28fc

File tree

10 files changed

+49
-35
lines changed

10 files changed

+49
-35
lines changed

‎app/Http/Controllers/Auth/PasswordResetLinkController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ public function create(Request $request): Response
2929
public function store(Request $request): RedirectResponse
3030
{
3131
$request->validate([
32-
'email' => 'required|email',
32+
'email' => 'required|email|exists:users,email',
3333
]);
3434

3535
Password::sendResetLink(

‎resources/js/components/AppLogo.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
33
</script>
44

55
<template>
6-
<div class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
6+
<div class="flex justify-center items-center bg-sidebar-primary rounded-md size-8 aspect-square text-sidebar-primary-foreground">
77
<AppLogoIcon class="size-6 text-white dark:text-black" />
88
</div>
9-
<div class="ml-1 grid flex-1 text-left text-sm">
10-
<span class="mb-0.5 truncate font-semibold leading-none">CodeSnip</span>
9+
<div class="flex-1 grid ml-1 text-sm text-left">
10+
<span class="mb-0.5 font-semibold text-lg truncate leading-none">CodeSnip</span>
1111
</div>
1212
</template>

‎resources/js/components/snippets/EngagementChart.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ defineProps<{
1616
<CardHeader>
1717
<CardTitle>{{ title }}</CardTitle>
1818
</CardHeader>
19-
<CardContent class="mt-10 flex-1">
19+
<CardContent style="padding: 0;">
2020
<AreaChart v-if="chartData.length" :data="chartData" index="name" :categories="['views']" class="w-full" />
21-
<div v-else class="flex h-40 items-center justify-center text-gray-500">No data available</div>
21+
<div v-else class="flex justify-center items-center h-40 text-gray-500">No data available</div>
2222
</CardContent>
2323
</Card>
2424
</template>

‎resources/js/components/snippets/FormCode.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ defineEmits(['update:modelValue']);
1919
<TooltipProvider>
2020
<Tooltip>
2121
<TooltipTrigger asChild>
22-
<Info class="h-4 w-4 cursor-help text-muted-foreground" />
22+
<Info class="w-4 h-4 text-muted-foreground cursor-help" />
2323
</TooltipTrigger>
2424
<TooltipContent class="w-80">
25-
<ul class="list-disc space-y-1 pl-4">
25+
<ul class="space-y-1 pl-4 list-disc">
2626
<li>Use proper language syntax</li>
2727
<li>Include clear and descriptive comments</li>
2828
<li>Include usage and result in comments</li>
@@ -38,11 +38,11 @@ defineEmits(['update:modelValue']);
3838
:model-value="modelValue"
3939
@update:model-value="$emit('update:modelValue', $event)"
4040
:error="error"
41-
rows="10"
41+
rows="5"
4242
placeholder="Paste your code here"
4343
class="font-mono"
4444
required
4545
/>
46-
<span v-if="error" class="text-sm text-destructive">{{ error }}</span>
46+
<span v-if="error" class="text-destructive text-sm">{{ error }}</span>
4747
</div>
4848
</template>

‎resources/js/components/snippets/PopularSnippets.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@ defineProps<{
2222
</CardHeader>
2323
<CardContent>
2424
<div class="space-y-2 overflow-y-auto">
25-
<div v-for="snippet in snippets" :key="snippet.id" class="flex items-center justify-between gap-5 rounded-md px-4">
25+
<div v-for="snippet in snippets" :key="snippet.id" class="flex justify-between items-center gap-5 rounded-md">
2626
<div class="flex items-center gap-5">
2727
<div class="rounded-full">
2828
<i :class="`devicon-${snippet.language}-plain`" class="text-2xl"></i>
2929
</div>
3030
<div class="space-y-1">
31-
<p class="text-sm font-medium leading-none">{{ snippet.title }}</p>
32-
<p class="text-sm text-muted-foreground">{{ snippet.language }} - {{ snippet.views }} views</p>
31+
<p class="font-medium text-sm leading-none">{{ snippet.title }}</p>
32+
<p class="text-muted-foreground text-sm">{{ snippet.language }} - {{ snippet.views }} views</p>
3333
</div>
3434
</div>
3535
<Link :href="route('snippets.show', { id: snippet.id })">
3636
<Button variant="ghost" size="icon">
37-
<Eye class="h-4 w-4" />
37+
<Eye style="width: 25px; height: 25px;" />
3838
</Button>
3939
</Link>
4040
</div>

‎resources/js/components/snippets/SnippetForm.vue‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,17 @@ const submit = () => {
4545
</script>
4646

4747
<template>
48-
<form @submit.prevent="submit" class="space-y-6">
49-
<div class="grid grid-cols-2 gap-4">
50-
<FormTitle v-model="form.title" :error="form.errors.title" />
51-
<FormLanguage v-model="selectedLanguage" :initial-language="snippet?.language" :error="form.errors.language" />
52-
</div>
53-
54-
<FormDescription v-model="form.description" :error="form.errors.description" />
55-
<FormCode v-model="form.code" :error="form.errors.code" />
56-
<FormVisibility v-model="form.is_public" />
57-
<FormSubmit :is-processing="form.processing" :mode="mode" />
58-
</form>
48+
<div>
49+
<form @submit.prevent="submit" class="space-y-6">
50+
<div class="gap-4 grid grid-cols-2">
51+
<FormTitle v-model="form.title" :error="form.errors.title" />
52+
<FormLanguage v-model="selectedLanguage" :initial-language="snippet?.language" :error="form.errors.language" />
53+
</div>
54+
55+
<FormDescription v-model="form.description" :error="form.errors.description" />
56+
<FormCode v-model="form.code" :error="form.errors.code" />
57+
<FormVisibility v-model="form.is_public" />
58+
<FormSubmit :is-processing="form.processing" :mode="mode" />
59+
</form>
60+
</div>
5961
</template>

‎resources/js/components/snippets/StatCard.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ defineProps<{
1111

1212
<template>
1313
<Card>
14-
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
15-
<CardTitle class="text-sm font-medium">{{ title }}</CardTitle>
16-
<component :is="icon" class="h-4 w-4 text-muted-foreground" />
14+
<CardHeader class="flex flex-row justify-between items-center space-y-0 pb-2">
15+
<CardTitle class="font-medium text-sm">{{ title }}</CardTitle>
16+
<component :is="icon" class="text-muted-foreground" />
1717
</CardHeader>
1818
<CardContent>
19-
<div class="text-2xl font-bold">{{ value }}</div>
20-
<p class="text-xs text-muted-foreground">{{ description }}</p>
19+
<div class="font-bold text-2xl">{{ value }}</div>
20+
<p class="text-muted-foreground text-xs">{{ description }}</p>
2121
</CardContent>
2222
</Card>
2323
</template>

‎resources/js/pages/snippets/Create.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,19 @@ const breadcrumbs: BreadcrumbItem[] = [
1414

1515
<template>
1616
<AppLayout :breadcrumbs="breadcrumbs">
17-
<div class="container mx-auto sm:p-4">
18-
<Card class="mx-auto max-w-3xl border" style="height: 90svh">
17+
<div class="hidden sm:block mx-auto sm:p-4 container">
18+
<Card class="mx-auto max-w-3xl">
1919
<CardHeader>
2020
<CardTitle>Create New Snippet</CardTitle>
2121
</CardHeader>
2222
<CardContent>
23-
<SnippetForm mode="create" />
23+
<SnippetForm mode="edit" />
2424
</CardContent>
2525
</Card>
2626
</div>
27+
28+
<div class="sm:hidden p-4">
29+
<SnippetForm mode="edit" />
30+
</div>
2731
</AppLayout>
2832
</template>

‎resources/js/pages/snippets/Edit.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const breadcrumbs: BreadcrumbItem[] = [
2727

2828
<template>
2929
<AppLayout :breadcrumbs="breadcrumbs">
30-
<div class="container mx-auto sm:p-4">
31-
<Card class="mx-auto max-w-3xl" style="height: 90svh">
30+
<div class="hidden sm:block mx-auto sm:p-4 container">
31+
<Card class="mx-auto max-w-3xl">
3232
<CardHeader>
3333
<CardTitle>Edit Snippet</CardTitle>
3434
</CardHeader>
@@ -37,5 +37,9 @@ const breadcrumbs: BreadcrumbItem[] = [
3737
</CardContent>
3838
</Card>
3939
</div>
40+
41+
<div class="sm:hidden p-4">
42+
<SnippetForm :snippet="snippet" mode="edit" />
43+
</div>
4044
</AppLayout>
4145
</template>

‎vite.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import tailwindcss from 'tailwindcss';
66
import { defineConfig } from 'vite';
77

88
export default defineConfig({
9+
server:{
10+
host: '192.168.29.210',
11+
cors: true,
12+
},
913
plugins: [
1014
laravel({
1115
input: ['resources/js/app.ts'],

0 commit comments

Comments
 (0)