external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update achievements page

Browse source
This commit is contained in:
Zamitto 2024-10-11 13:24:43 -03:00
parent be08fb6d14
commit 887ec3f8eb
2 changed files with 16 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/renderer/src/pages/achievement/achievements.css.ts
View file

@ -4,7 +4,6 @@ import { recipe } from "@vanilla-extract/recipes";
export const container = style({ export const container = style({
width: "100%", width: "100%",
padding: `${SPACING_UNIT * 2}px`,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: `${SPACING_UNIT * 2}px`, gap: `${SPACING_UNIT * 2}px`,
@ -13,18 +12,15 @@ export const container = style({
export const header = style({ export const header = style({
display: "flex", display: "flex",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
width: "50%", flexDirection: "column",
}); });
export const headerImage = style({ export const headerImage = style({
borderRadius: "4px", borderRadius: "4px",
objectFit: "cover", objectFit: "cover",
cursor: "pointer", cursor: "pointer",
height: "160px", width: "100%",
transition: "all ease 0.2s", transition: "all ease 0.2s",
":hover": {
transform: "scale(1.05)",
},
}); });
export const list = style({ export const list = style({
@ -33,7 +29,7 @@ export const list = style({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: `${SPACING_UNIT * 2}px`, gap: `${SPACING_UNIT * 2}px`,
padding: 0, padding: `${SPACING_UNIT * 2}px`,
}); });
export const listItem = style({ export const listItem = style({

23
src/renderer/src/pages/achievement/achievements.tsx
View file

@ -11,7 +11,7 @@ import {
formatDownloadProgress, formatDownloadProgress,
} from "@renderer/helpers"; } from "@renderer/helpers";
import { TrophyIcon } from "@primer/octicons-react"; import { TrophyIcon } from "@primer/octicons-react";
import { vars } from "@renderer/theme.css"; import { SPACING_UNIT, vars } from "@renderer/theme.css";
export function Achievement() { export function Achievement() {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
@ -42,7 +42,15 @@ export function Achievement() {
useEffect(() => { useEffect(() => {
if (title) { if (title) {
dispatch(setHeaderTitle(title)); dispatch(
setHeaderTitle(
displayName
? t("user_achievements", {
displayName,
})
: t("your_achievements")
)
);
} }
}, [dispatch, title]); }, [dispatch, title]);
@ -69,7 +77,7 @@ export function Achievement() {
<div className={styles.header}> <div className={styles.header}>
<button onClick={handleClickGame}> <button onClick={handleClickGame}>
<img <img
src={steamUrlBuilder.cover(objectId)} src={steamUrlBuilder.libraryHero(objectId)}
alt={title} alt={title}
className={styles.headerImage} className={styles.headerImage}
/> />
@ -79,15 +87,10 @@ export function Achievement() {
width: "100%", width: "100%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
padding: `0 ${SPACING_UNIT * 2}px`,
}} }}
> >
<h1> <h1>{title}</h1>
{displayName
? t("user_achievements", {
displayName,
})
: t("your_achievements")}
</h1>
<div <div
style={{ style={{
display: "flex", display: "flex",