Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-11 13:56:16 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

style: update compact view styles for game cards; adjust grid layout and add button order

Browse Source
This commit is contained in:
ctrlcat0x
2025-10-22 18:28:24 +05:30
parent e19102ea66
commit a0a967aacd
4 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/src/pages/library/library-game-card.scss
View File

@@ -280,3 +280,10 @@
opacity: 0.5;
}
}
/* Force fixed size for compact grid cells so cards render at 220x320 */
.library__games-grid--compact .library-game-card__wrapper {
width: 215px;
height: 320px;
aspect-ratio: unset;
}

15
src/renderer/src/pages/library/library.scss
View File

@@ -161,26 +161,29 @@
// Compact view - smaller cards
&--compact {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, 215px);
grid-auto-rows: 320px;
justify-content: start;
@container #{globals.$app-container} (min-width: 900px) {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(auto-fill, 215px);
}
@container #{globals.$app-container} (min-width: 1300px) {
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(auto-fill, 215px);
}
/* keep same pattern for very large screens */
@container #{globals.$app-container} (min-width: 2000px) {
grid-template-columns: repeat(9, 1fr);
grid-template-columns: repeat(auto-fill, 215px);
}
@container #{globals.$app-container} (min-width: 2600px) {
grid-template-columns: repeat(12, 1fr);
grid-template-columns: repeat(auto-fill, 215px);
}
@container #{globals.$app-container} (min-width: 3000px) {
grid-template-columns: repeat(16, 1fr);
grid-template-columns: repeat(auto-fill, 210px);
}
}
}

2
src/renderer/src/pages/library/library.tsx
View File

@@ -14,7 +14,7 @@ import "./library.scss";
export default function Library() {
const { library, updateLibrary } = useLibrary();
const [viewMode, setViewMode] = useState<ViewMode>("grid");
const [viewMode, setViewMode] = useState<ViewMode>("compact");
const [filterBy, setFilterBy] = useState<FilterOption>("all");
const [searchQuery, setSearchQuery] = useState<string>("");
const dispatch = useAppDispatch();

14
src/renderer/src/pages/library/view-options.tsx
View File

@@ -15,13 +15,6 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
return (
<div className="library-view-options__container">
<div className="library-view-options__options">
<button
className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
onClick={() => onViewModeChange("grid")}
title={t("grid_view")}
>
<AppsIcon size={16} />
</button>
<button
className={`library-view-options__option ${viewMode === "compact" ? "active" : ""}`}
onClick={() => onViewModeChange("compact")}
@@ -29,6 +22,13 @@ export function ViewOptions({ viewMode, onViewModeChange }: ViewOptionsProps) {
>
<SquareIcon size={16} />
</button>
<button
className={`library-view-options__option ${viewMode === "grid" ? "active" : ""}`}
onClick={() => onViewModeChange("grid")}
title={t("grid_view")}
>
<AppsIcon size={16} />
</button>
<button
className={`library-view-options__option ${viewMode === "large" ? "active" : ""}`}
onClick={() => onViewModeChange("large")}