yusufipek/RepoHub
1
0
Fork 0
mirror of https://github.com/yusufipk/RepoHub.git synced 2026-09-11 10:36:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Improve mobile responsiveness of RecommendationsSection header and add translation for "All" filter

Browse Source 
- Make header layout stack vertically on mobile with flex-col, horizontal on desktop with sm:flex-row
- Make action buttons full-width on mobile, auto-width on desktop
- Reverse button order on mobile (customize first, then select/deselect) using flex-col-reverse
- Make collapse/expand button full-width on mobile
- Add "All" translation key to both English and Turkish locales
This commit is contained in:
Yusuf İpek
2025-11-23 15:25:03 +03:00
parent 696de6939f
commit ecc4fc038a
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RecommendationsSection.tsx
+6 -4
View File
@@ -133,7 +133,7 @@ export function RecommendationsSection({
return ( return (
<Card className="w-full"> <Card className="w-full">
<CardHeader className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => setIsExpanded(!isExpanded)}> <CardHeader className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => setIsExpanded(!isExpanded)}>
<div className="flex items-start justify-between"> <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Sparkles className="h-5 w-5 text-primary" /> <Sparkles className="h-5 w-5 text-primary" />
<div> <div>
@@ -152,7 +152,7 @@ export function RecommendationsSection({
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-2 w-full sm:w-auto">
{isExpanded && ( {isExpanded && (
<> <>
<Button <Button
@@ -182,6 +182,7 @@ export function RecommendationsSection({
} }
}} }}
disabled={loading || recommendations.length === 0} disabled={loading || recommendations.length === 0}
className="w-full sm:w-auto"
> >
{recommendations.every(rec => selectedPackages.some(sel => sel.id === rec.id)) {recommendations.every(rec => selectedPackages.some(sel => sel.id === rec.id))
? (t('common.deselect_all') || 'Deselect All') ? (t('common.deselect_all') || 'Deselect All')
@@ -195,6 +196,7 @@ export function RecommendationsSection({
e.stopPropagation() e.stopPropagation()
onCustomizeClick() onCustomizeClick()
}} }}
className="w-full sm:w-auto"
> >
<Settings className="h-4 w-4 mr-2" /> <Settings className="h-4 w-4 mr-2" />
{t('recommendations.customize')} {t('recommendations.customize')}
@@ -204,7 +206,7 @@ export function RecommendationsSection({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-8 w-8 p-0" className="h-8 w-full sm:w-8 p-0"
> >
{isExpanded ? ( {isExpanded ? (
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
@@ -249,7 +251,7 @@ export function RecommendationsSection({
}} }}
className="h-8 text-xs" className="h-8 text-xs"
> >
All ({recommendations.length}) {(t('common.all') || 'All')} ({recommendations.length})
</Button> </Button>
{profile.categories.map(cat => { {profile.categories.map(cat => {
const count = getCategoryCount(cat) const count = getCategoryCount(cat)
src/contexts/LocaleContext.tsx
+2
View File
@@ -10,6 +10,7 @@ const translations = {
title: "RepoHub - Cross-Platform Package Manager", title: "RepoHub - Cross-Platform Package Manager",
subtitle: "Cross-Platform Package Manager", subtitle: "Cross-Platform Package Manager",
description: "Simplify software installation across Linux, Windows, and macOS with official repositories", description: "Simplify software installation across Linux, Windows, and macOS with official repositories",
all: "All",
close: "Close", close: "Close",
next: "Next", next: "Next",
back: "Back", back: "Back",
@@ -203,6 +204,7 @@ const translations = {
title: "RepoHub - Çok Platformlu Paket Yöneticisi", title: "RepoHub - Çok Platformlu Paket Yöneticisi",
subtitle: "Çok Platformlu Paket Yöneticisi", subtitle: "Çok Platformlu Paket Yöneticisi",
description: "Linux, Windows ve macOS'te resmi depoları kullanarak yazılım kurulumunu basitleştirin", description: "Linux, Windows ve macOS'te resmi depoları kullanarak yazılım kurulumunu basitleştirin",
all: "Tümü",
close: "Kapat", close: "Kapat",
next: "İleri", next: "İleri",
back: "Geri", back: "Geri",