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

Improved layout in larger screens

Browse Source
This commit is contained in:
Arunavo Ray
2025-06-17 12:48:38 +05:30
parent 13cbf86309
commit 01647445f2
1 changed files with 160 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/config/OrganizationStrategy.tsx
View File

@@ -284,7 +284,7 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
</div> </div>
<RadioGroup value={strategy} onValueChange={onStrategyChange}> <RadioGroup value={strategy} onValueChange={onStrategyChange}>
<div className="grid gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{(Object.entries(strategyConfig) as [MirrorStrategy, typeof strategyConfig.preserve][]).map(([key, config]) => { {(Object.entries(strategyConfig) as [MirrorStrategy, typeof strategyConfig.preserve][]).map(([key, config]) => {
const isSelected = strategy === key; const isSelected = strategy === key;
const Icon = config.icon; const Icon = config.icon;
@@ -319,11 +319,6 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h4 className="font-medium text-sm">{config.title}</h4> <h4 className="font-medium text-sm">{config.title}</h4>
{isSelected && (
<Badge variant="secondary" className="text-xs">
Selected
</Badge>
)}
</div> </div>
<p className="text-xs text-muted-foreground mt-0.5"> <p className="text-xs text-muted-foreground mt-0.5">
{config.description} {config.description}
@@ -375,7 +370,10 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
</h4> </h4>
</div> </div>
{strategy === "single-org" && ( <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{strategy === "single-org" ? (
<>
{/* Destination Organization - Left Column */}
<div className="space-y-1"> <div className="space-y-1">
<Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2"> <Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
Destination Organization Destination Organization
@@ -401,8 +399,8 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
Organization for consolidated repositories Organization for consolidated repositories
</p> </p>
</div> </div>
)}
{/* Starred Repositories Organization - Right Column */}
<div className="space-y-1"> <div className="space-y-1">
<Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2"> <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
<Star className="h-3.5 w-3.5" /> <Star className="h-3.5 w-3.5" />
@@ -426,10 +424,41 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
className="" className=""
/> />
<p className="text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-1">
Keep starred repos organized separately from your own repositories Keep starred repos organized separately
</p>
</div>
</>
) : (
<>
{/* Starred Repositories Organization - Left Column */}
<div className="space-y-1">
<Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
<Star className="h-3.5 w-3.5" />
Starred Repositories Organization
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>Starred repositories will be organized separately in this organization</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Label>
<Input
id="starredReposOrg"
value={starredReposOrg || ""}
onChange={(e) => onStarredReposOrgChange(e.target.value)}
placeholder="starred"
className=""
/>
<p className="text-xs text-muted-foreground mt-1">
Keep starred repos organized separately
</p> </p>
</div> </div>
{/* Organization Visibility - Right Column */}
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-normal flex items-center gap-2"> <Label className="text-sm font-normal flex items-center gap-2">
Organization Visibility Organization Visibility
@@ -455,6 +484,50 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
onClick={() => onVisibilityChange(option.value)} onClick={() => onVisibilityChange(option.value)}
className={cn( className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-all", "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-all",
"border flex-1",
isSelected
? "bg-accent border-accent-foreground/20"
: "bg-background hover:bg-accent/50 border-input"
)}
>
<Icon className="h-3.5 w-3.5" />
<span>{option.label}</span>
</button>
);
})}
</div>
</div>
</>
)}
</div>
{/* Organization Visibility - Full width when single-org is selected */}
{strategy === "single-org" && (
<div className="space-y-2">
<Label className="text-sm font-normal flex items-center gap-2">
Organization Visibility
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>Visibility for newly created organizations</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Label>
<div className="flex gap-2">
{visibilityOptions.map((option) => {
const Icon = option.icon;
const isSelected = visibility === option.value;
return (
<button
key={option.value}
type="button"
onClick={() => onVisibilityChange(option.value)}
className={cn(
"flex items-center gap-1.5 px-4 py-1.5 rounded-md text-sm transition-all",
"border", "border",
isSelected isSelected
? "bg-accent border-accent-foreground/20" ? "bg-accent border-accent-foreground/20"
@@ -468,6 +541,7 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
})} })}
</div> </div>
</div> </div>
)}
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />