Skip to content

Commit 07122a7

Browse files
Alfagun74Alfagun74
committed
refactor GameSettings layout for improved UI and readability
closes Filepath gets cut off in UI Fixes #32
1 parent 6640dca commit 07122a7

2 files changed

Lines changed: 96 additions & 82 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
- Game time tracker
99
- Fixed a bug where only the first 1000 Tags would be loaded in the library, now all tags are loaded
1010
- [#22](https://github.com/Phalcode/gamevault-frontend/issues/22) - Added support for markdown in game descriptions and notes.
11+
- [#32](https://github.com/Phalcode/gamevault-frontend/issues/32) - Redesigned the game settings page a bit.
1112

1213
## 16.2.1
1314

‎src/components/admin/GameSettings.tsx‎

Lines changed: 95 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1910,79 +1910,88 @@ export function GameSettings({ game, onClose, onGameUpdated, onUninstalled }: Pr
19101910

19111911
{/* Content Area with fixed sections */}
19121912
<div className="flex-1 flex flex-col gap-4 min-h-0 overflow-y-auto overflow-x-hidden pr-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-zinc-300 [&::-webkit-scrollbar-thumb]:rounded-full dark:[&::-webkit-scrollbar-thumb]:bg-zinc-600 max-w-full">
1913-
{/* Three Column Layout - Fixed height section */}
1914-
<div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_150px] gap-6 xl:gap-[30px] flex-shrink-0 w-full max-w-full">
1915-
{/* Left Column: GameVault Data */}
1916-
<div className="flex flex-col overflow-x-hidden space-y-4 pb-4 xl:pb-0 border-b xl:border-b-0 border-zinc-200 dark:border-zinc-700 min-w-0">
1917-
<h4 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
1918-
GameVault
1919-
</h4>
1920-
1921-
<div className="flex gap-4">
1922-
{/* Cover Image */}
1923-
{gameCoverUrl && (
1924-
<div className="flex-shrink-0 rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700">
1925-
<img
1926-
src={gameCoverUrl}
1927-
alt="Cover"
1928-
className="w-32 h-44 object-cover"
1929-
style={{ aspectRatio: "2/3" }}
1930-
onError={(e) => {
1931-
(
1932-
e.target as HTMLImageElement
1933-
).style.display = "none";
1934-
}}
1935-
/>
1913+
{/* Comparison cards with separate action panel */}
1914+
<div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(0,1fr)_220px] shrink-0 w-full max-w-full">
1915+
<div className="space-y-4 min-w-0">
1916+
<div className="rounded-xl border border-zinc-200 bg-zinc-50/60 p-4 dark:border-zinc-700 dark:bg-zinc-900/40">
1917+
<div className="mb-4">
1918+
<h4 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
1919+
GameVault
1920+
</h4>
1921+
<div className="text-xs text-zinc-500 dark:text-zinc-400">
1922+
Source file and imported game data
19361923
</div>
1937-
)}
1924+
</div>
19381925

1939-
<div className="flex-1 space-y-2 text-sm">
1940-
<div>
1941-
<div className="text-zinc-500 dark:text-zinc-400 mb-1">
1942-
File Path:
1943-
</div>
1944-
<div className="text-zinc-900 dark:text-zinc-100 font-mono text-xs overflow-hidden whitespace-nowrap text-ellipsis">
1945-
{workingGame.file_path || "N/A"}
1946-
</div>
1947-
</div>
1948-
<div>
1949-
<div className="text-zinc-500 dark:text-zinc-400 mb-1">
1950-
Release Date:
1926+
<div className="flex flex-col gap-4 lg:flex-row">
1927+
{gameCoverUrl && (
1928+
<div className="shrink-0 self-start rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700">
1929+
<img
1930+
src={gameCoverUrl}
1931+
alt="Cover"
1932+
className="w-32 h-44 object-cover"
1933+
style={{ aspectRatio: "2/3" }}
1934+
onError={(e) => {
1935+
(
1936+
e.target as HTMLImageElement
1937+
).style.display = "none";
1938+
}}
1939+
/>
19511940
</div>
1952-
<div className="text-zinc-900 dark:text-zinc-100 overflow-hidden whitespace-nowrap text-ellipsis">
1953-
{workingGame.release_date
1954-
? new Date(
1955-
workingGame.release_date,
1956-
).toLocaleDateString()
1957-
: "N/A"}
1941+
)}
1942+
1943+
<div className="grid flex-1 gap-3 text-sm min-w-0 sm:grid-cols-2">
1944+
<div className="sm:col-span-2">
1945+
<div className="mb-1 text-zinc-500 dark:text-zinc-400">
1946+
File Path:
1947+
</div>
1948+
<div
1949+
className="font-mono text-xs leading-relaxed text-zinc-900 break-all dark:text-zinc-100"
1950+
title={workingGame.file_path || "N/A"}
1951+
>
1952+
{workingGame.file_path || "N/A"}
1953+
</div>
19581954
</div>
1959-
</div>
1960-
<div>
1961-
<div className="text-zinc-500 dark:text-zinc-400 mb-1">
1962-
Added:
1955+
<div>
1956+
<div className="mb-1 text-zinc-500 dark:text-zinc-400">
1957+
Release Date:
1958+
</div>
1959+
<div className="text-zinc-900 dark:text-zinc-100">
1960+
{workingGame.release_date
1961+
? new Date(
1962+
workingGame.release_date,
1963+
).toLocaleDateString()
1964+
: "N/A"}
1965+
</div>
19631966
</div>
1964-
<div className="text-zinc-900 dark:text-zinc-100 overflow-hidden whitespace-nowrap text-ellipsis">
1965-
{new Date(
1966-
workingGame.created_at,
1967-
).toLocaleDateString()}
1967+
<div>
1968+
<div className="mb-1 text-zinc-500 dark:text-zinc-400">
1969+
Added:
1970+
</div>
1971+
<div className="text-zinc-900 dark:text-zinc-100">
1972+
{new Date(
1973+
workingGame.created_at,
1974+
).toLocaleDateString()}
1975+
</div>
19681976
</div>
19691977
</div>
19701978
</div>
19711979
</div>
1972-
</div>
19731980

1974-
{/* Middle Column: Mapped Game Data */}
1975-
<div className="flex flex-col overflow-x-hidden space-y-4 pb-4 xl:pb-0 border-b xl:border-b-0 border-zinc-200 dark:border-zinc-700 min-w-0">
1976-
<h4 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
1977-
Mapped Game
1978-
</h4>
1981+
<div className="rounded-xl border border-zinc-200 bg-zinc-50/60 p-4 dark:border-zinc-700 dark:bg-zinc-900/40">
1982+
<div className="mb-4">
1983+
<h4 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
1984+
Mapped Game
1985+
</h4>
1986+
<div className="text-xs text-zinc-500 dark:text-zinc-400">
1987+
Current provider match and cached metadata
1988+
</div>
1989+
</div>
19791990

1980-
{currentShownMappedGame ? (
1981-
<>
1982-
<div className="flex gap-4">
1983-
{/* Cover Image */}
1991+
{currentShownMappedGame ? (
1992+
<div className="flex flex-col gap-4 lg:flex-row">
19841993
{mappedGameCoverUrl && (
1985-
<div className="flex-shrink-0 rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700">
1994+
<div className="shrink-0 self-start rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700">
19861995
<img
19871996
src={mappedGameCoverUrl}
19881997
alt="Provider Cover"
@@ -1997,21 +2006,21 @@ export function GameSettings({ game, onClose, onGameUpdated, onUninstalled }: Pr
19972006
</div>
19982007
)}
19992008

2000-
<div className="flex-1 space-y-2 text-sm">
2001-
<div>
2002-
<div className="text-zinc-500 dark:text-zinc-400 mb-1">
2009+
<div className="grid flex-1 gap-3 text-sm min-w-0 sm:grid-cols-2">
2010+
<div className="sm:col-span-2">
2011+
<div className="mb-1 text-zinc-500 dark:text-zinc-400">
20032012
Title:
20042013
</div>
2005-
<div className="text-zinc-900 dark:text-zinc-100 overflow-hidden whitespace-nowrap text-ellipsis">
2014+
<div className="leading-relaxed text-zinc-900 wrap-break-word dark:text-zinc-100">
20062015
{currentShownMappedGame.title ||
20072016
"N/A"}
20082017
</div>
20092018
</div>
20102019
<div>
2011-
<div className="text-zinc-500 dark:text-zinc-400 mb-1">
2020+
<div className="mb-1 text-zinc-500 dark:text-zinc-400">
20122021
Release Date:
20132022
</div>
2014-
<div className="text-zinc-900 dark:text-zinc-100 overflow-hidden whitespace-nowrap text-ellipsis">
2023+
<div className="text-zinc-900 dark:text-zinc-100">
20152024
{currentShownMappedGame.release_date
20162025
? new Date(
20172026
currentShownMappedGame.release_date,
@@ -2020,10 +2029,10 @@ export function GameSettings({ game, onClose, onGameUpdated, onUninstalled }: Pr
20202029
</div>
20212030
</div>
20222031
<div>
2023-
<div className="text-zinc-500 dark:text-zinc-400 mb-1">
2032+
<div className="mb-1 text-zinc-500 dark:text-zinc-400">
20242033
Last Cached:
20252034
</div>
2026-
<div className="text-zinc-900 dark:text-zinc-100 overflow-hidden whitespace-nowrap text-ellipsis">
2035+
<div className="text-zinc-900 dark:text-zinc-100">
20272036
{currentShownMappedGame.updated_at
20282037
? new Date(
20292038
currentShownMappedGame.updated_at,
@@ -2032,14 +2041,14 @@ export function GameSettings({ game, onClose, onGameUpdated, onUninstalled }: Pr
20322041
</div>
20332042
</div>
20342043
{currentShownMappedGame.provider_data_url && (
2035-
<div>
2044+
<div className="sm:col-span-2">
20362045
<a
20372046
href={
20382047
currentShownMappedGame.provider_data_url
20392048
}
20402049
target="_blank"
20412050
rel="noopener noreferrer"
2042-
className="text-indigo-600 dark:text-indigo-400 hover:underline text-xs"
2051+
className="text-xs text-indigo-600 hover:underline dark:text-indigo-400"
20432052
>
20442053
View on{" "}
20452054
{
@@ -2052,19 +2061,23 @@ export function GameSettings({ game, onClose, onGameUpdated, onUninstalled }: Pr
20522061
)}
20532062
</div>
20542063
</div>
2055-
</>
2056-
) : (
2057-
<div className="flex items-center justify-center h-32 text-sm text-zinc-500 dark:text-zinc-400">
2058-
Not mapped to this provider
2059-
</div>
2060-
)}
2064+
) : (
2065+
<div className="flex min-h-24 items-center justify-center text-sm text-zinc-500 dark:text-zinc-400">
2066+
Not mapped to this provider
2067+
</div>
2068+
)}
2069+
</div>
20612070
</div>
20622071

2063-
{/* Actions Column */}
2064-
<div className="flex flex-col space-y-4 w-full max-w-full xl:max-w-none">
2065-
<h4 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
2066-
Actions
2067-
</h4>
2072+
<div className="flex flex-col space-y-4 rounded-xl border border-zinc-200 bg-zinc-50/60 p-4 w-full max-w-full dark:border-zinc-700 dark:bg-zinc-900/40 2xl:max-w-none">
2073+
<div>
2074+
<h4 className="text-base font-semibold text-zinc-800 dark:text-zinc-100">
2075+
Actions
2076+
</h4>
2077+
<div className="text-xs text-zinc-500 dark:text-zinc-400">
2078+
Adjust match priority or refresh mapping
2079+
</div>
2080+
</div>
20682081

20692082
{currentShownMappedGame ? (
20702083
<div className="space-y-3 w-full max-w-full">

0 commit comments

Comments
 (0)