Mirror/gitea-mirror
1
0
Fork 0
mirror of https://github.com/RayLabsHQ/gitea-mirror.git synced 2025-12-08 12:36:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update Card components to use self-start class for consistent alignment

Browse Source
This commit is contained in:
Arunavo Ray
2025-06-12 15:29:47 +05:30
parent 2eda800a7c
commit 544b60f881
7 changed files with 131 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/config/AdvancedOptionsForm.tsx
View File

@@ -32,7 +32,7 @@ export function AdvancedOptionsForm({
}; };
return ( return (
<Card> <Card className="self-start">
<CardHeader> <CardHeader>
<CardTitle className="text-lg font-semibold flex items-center justify-between"> <CardTitle className="text-lg font-semibold flex items-center justify-between">
Advanced Options Advanced Options

74
src/components/config/ConfigTabs.tsx
View File

@@ -5,7 +5,7 @@ import { ScheduleConfigForm } from './ScheduleConfigForm';
import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm'; import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm';
import { MirrorOptionsForm } from './MirrorOptionsForm'; import { MirrorOptionsForm } from './MirrorOptionsForm';
import { AdvancedOptionsForm } from './AdvancedOptionsForm'; import { AdvancedOptionsForm } from './AdvancedOptionsForm';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'; // Removed Tabs import as we're switching to grid layout
import type { import type {
ConfigApiResponse, ConfigApiResponse,
GiteaConfig, GiteaConfig,
@@ -537,14 +537,13 @@ export function ConfigTabs() {
</div> </div>
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<Skeleton className="h-10 w-36" /> <Skeleton className="h-10 w-36" />
<Skeleton className="h-10 w-36" />
</div> </div>
</div> </div>
{/* Content section */} {/* Content section - Grid layout */}
<div className="flex flex-col gap-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex gap-x-4"> {/* GitHub & Gitea connections */}
<div className="w-1/2 border rounded-lg p-4"> <div className="border rounded-lg p-4">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<Skeleton className="h-6 w-40" /> <Skeleton className="h-6 w-40" />
<Skeleton className="h-9 w-32" /> <Skeleton className="h-9 w-32" />
@@ -555,7 +554,7 @@ export function ConfigTabs() {
<Skeleton className="h-32 w-full" /> <Skeleton className="h-32 w-full" />
</div> </div>
</div> </div>
<div className="w-1/2 border rounded-lg p-4"> <div className="border rounded-lg p-4">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<Skeleton className="h-6 w-40" /> <Skeleton className="h-6 w-40" />
<Skeleton className="h-9 w-32" /> <Skeleton className="h-9 w-32" />
@@ -567,16 +566,16 @@ export function ConfigTabs() {
<Skeleton className="h-20 w-full" /> <Skeleton className="h-20 w-full" />
</div> </div>
</div> </div>
</div>
<div className="flex gap-x-4"> {/* Schedule & Database Cleanup */}
<div className="w-1/2 border rounded-lg p-4"> <div className="border rounded-lg p-4">
<div className="space-y-4"> <div className="space-y-4">
<Skeleton className="h-8 w-48" /> <Skeleton className="h-8 w-48" />
<Skeleton className="h-16 w-full" /> <Skeleton className="h-16 w-full" />
<Skeleton className="h-8 w-32" /> <Skeleton className="h-8 w-32" />
</div> </div>
</div> </div>
<div className="w-1/2 border rounded-lg p-4"> <div className="border rounded-lg p-4">
<div className="space-y-4"> <div className="space-y-4">
<Skeleton className="h-8 w-48" /> <Skeleton className="h-8 w-48" />
<Skeleton className="h-16 w-full" /> <Skeleton className="h-16 w-full" />
@@ -584,6 +583,22 @@ export function ConfigTabs() {
</div> </div>
</div> </div>
</div> </div>
{/* Mirror Options & Advanced - Full width sections */}
<div className="space-y-4">
<div className="border rounded-lg p-4">
<Skeleton className="h-8 w-48 mb-4" />
<div className="space-y-4">
<Skeleton className="h-16 w-full" />
<Skeleton className="h-24 w-full" />
</div>
</div>
<div className="border rounded-lg p-4">
<Skeleton className="h-8 w-48 mb-4" />
<div className="space-y-4">
<Skeleton className="h-16 w-full" />
</div>
</div>
</div> </div>
</div> </div>
); );
@@ -633,17 +648,10 @@ export function ConfigTabs() {
</div> </div>
</div> </div>
{/* Content section */} {/* Content section - Grid layout */}
<Tabs defaultValue="connections" className="w-full"> <div className="space-y-6">
<TabsList className="grid w-full grid-cols-4"> {/* GitHub & Gitea connections - Side by side */}
<TabsTrigger value="connections">Connections</TabsTrigger> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<TabsTrigger value="mirror">Mirror Options</TabsTrigger>
<TabsTrigger value="schedule">Schedule & Cleanup</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<TabsContent value="connections" className="mt-6">
<div className="flex gap-x-4">
<GitHubConfigForm <GitHubConfigForm
config={config.githubConfig} config={config.githubConfig}
setConfig={update => setConfig={update =>
@@ -673,9 +681,9 @@ export function ConfigTabs() {
isAutoSaving={isAutoSavingGitea} isAutoSaving={isAutoSavingGitea}
/> />
</div> </div>
</TabsContent>
<TabsContent value="mirror" className="mt-6"> {/* Mirror Options - Full width */}
<div>
<MirrorOptionsForm <MirrorOptionsForm
config={config.mirrorOptions} config={config.mirrorOptions}
setConfig={update => setConfig={update =>
@@ -690,11 +698,10 @@ export function ConfigTabs() {
onAutoSave={autoSaveMirrorOptions} onAutoSave={autoSaveMirrorOptions}
isAutoSaving={isAutoSavingMirrorOptions} isAutoSaving={isAutoSavingMirrorOptions}
/> />
</TabsContent> </div>
<TabsContent value="schedule" className="mt-6"> {/* Schedule & Database Cleanup - Side by side */}
<div className="flex gap-x-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="w-1/2">
<ScheduleConfigForm <ScheduleConfigForm
config={config.scheduleConfig} config={config.scheduleConfig}
setConfig={update => setConfig={update =>
@@ -709,8 +716,6 @@ export function ConfigTabs() {
onAutoSave={autoSaveScheduleConfig} onAutoSave={autoSaveScheduleConfig}
isAutoSaving={isAutoSavingSchedule} isAutoSaving={isAutoSavingSchedule}
/> />
</div>
<div className="w-1/2">
<DatabaseCleanupConfigForm <DatabaseCleanupConfigForm
config={config.cleanupConfig} config={config.cleanupConfig}
setConfig={update => setConfig={update =>
@@ -726,10 +731,9 @@ export function ConfigTabs() {
isAutoSaving={isAutoSavingCleanup} isAutoSaving={isAutoSavingCleanup}
/> />
</div> </div>
</div>
</TabsContent>
<TabsContent value="advanced" className="mt-6"> {/* Advanced options - Full width */}
<div>
<AdvancedOptionsForm <AdvancedOptionsForm
config={config.advancedOptions} config={config.advancedOptions}
setConfig={update => setConfig={update =>
@@ -744,8 +748,8 @@ export function ConfigTabs() {
onAutoSave={autoSaveAdvancedOptions} onAutoSave={autoSaveAdvancedOptions}
isAutoSaving={isAutoSavingAdvancedOptions} isAutoSaving={isAutoSavingAdvancedOptions}
/> />
</TabsContent> </div>
</Tabs> </div>
</div> </div>
); );
} }

2
src/components/config/DatabaseCleanupConfigForm.tsx
View File

@@ -94,7 +94,7 @@ export function DatabaseCleanupConfigForm({
]; ];
return ( return (
<Card> <Card className="self-start">
<CardContent className="pt-6 relative"> <CardContent className="pt-6 relative">
{isAutoSaving && ( {isAutoSaving && (
<div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground"> <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">

2
src/components/config/GitHubConfigForm.tsx
View File

@@ -68,7 +68,7 @@ export function GitHubConfigForm({ config, setConfig, onAutoSave, isAutoSaving }
}; };
return ( return (
<Card className="w-full"> <Card className="w-full self-start">
<CardHeader className="flex flex-row items-center justify-between gap-4"> <CardHeader className="flex flex-row items-center justify-between gap-4">
<CardTitle className="text-lg font-semibold"> <CardTitle className="text-lg font-semibold">
GitHub Configuration GitHub Configuration

2
src/components/config/GiteaConfigForm.tsx
View File

@@ -91,7 +91,7 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving }:
}; };
return ( return (
<Card className="w-full"> <Card className="w-full self-start">
<CardHeader className="flex flex-row items-center justify-between gap-4"> <CardHeader className="flex flex-row items-center justify-between gap-4">
<CardTitle className="text-lg font-semibold"> <CardTitle className="text-lg font-semibold">
Gitea Configuration Gitea Configuration

2
src/components/config/MirrorOptionsForm.tsx
View File

@@ -55,7 +55,7 @@ export function MirrorOptionsForm({
}; };
return ( return (
<Card> <Card className="self-start">
<CardHeader> <CardHeader>
<CardTitle className="text-lg font-semibold flex items-center justify-between"> <CardTitle className="text-lg font-semibold flex items-center justify-between">
Mirror Options Mirror Options

2
src/components/config/ScheduleConfigForm.tsx
View File

@@ -54,7 +54,7 @@ export function ScheduleConfigForm({
]; ];
return ( return (
<Card> <Card className="self-start">
<CardContent className="pt-6 relative"> <CardContent className="pt-6 relative">
{isAutoSaving && ( {isAutoSaving && (
<div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground"> <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">