Skip to content

Commit 5268dc0

Browse files
nrmnqddsbal7hazar
andauthored
feat: remove dashboard header on mobile (cartridge-gg#65)
* fix: remove dashboard header on mobile * fix: button styling * fix: gap between header and sub tabs * chore: simplify logic * fix: arcade default icon * fix: update gap between header and subtabs * fix: play button hover * style: update play button --------- Co-authored-by: Bal7hazar <bal7hazar@proton.me>
1 parent 1353aab commit 5268dc0

8 files changed

Lines changed: 29 additions & 15 deletions

File tree

client/src/components/app.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { SceneLayout } from "@/components/scenes/layout";
33
import { GamePage } from "./pages/game";
44
import { useEffect } from "react";
55
import { PlayerPage } from "./pages/player";
6-
import { useMediaQuery } from "@cartridge/ui";
76
import { cn } from "@cartridge/ui/utils";
87
import { useSidebar } from "@/hooks/sidebar";
98
import { Header } from "./header";
109
import { useProject } from "@/hooks/project";
1110
import { ThemeProvider } from "@/context/theme";
1211
import { useArcade } from "@/hooks/arcade";
12+
import { useDevice } from "@/hooks/device";
1313

1414
export function App() {
1515
const { isOpen, toggle, handleTouchMove, handleTouchStart } = useSidebar();
1616
const { setPlayer } = useArcade();
1717
const { player } = useProject();
1818

19-
const isPWA = useMediaQuery("(display-mode: standalone)");
19+
const isPWA = useDevice();
2020

2121
useEffect(() => {
2222
setPlayer(player);
@@ -62,7 +62,7 @@ export function App() {
6262
</div>
6363
<div
6464
className={cn(
65-
"relative grow h-full flex flex-col rounded-xl lg:gap-2 overflow-hidden border border-background-200 bg-background-100",
65+
"relative grow h-full flex flex-col rounded-xl lg:gap-3 overflow-hidden border border-background-200 bg-background-100",
6666
player &&
6767
"bg-background-125 shadow-[0px_0px_8px_0px_rgba(15,20,16,_0.50)]",
6868
)}

client/src/components/editions/register.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,8 @@ export function Register({
169169
<SheetTrigger asChild>
170170
{!edition ? (
171171
<Button
172-
variant="secondary"
173172
size="icon"
174-
className="w-8 h-8 bg-background-150 hover:bg-background-200 text-foreground-300 hover:text-foreground-100 border border-background-200"
173+
className="w-8 h-8 bg-background-150 hover:bg-background-200 text-foreground-300 hover:text-foreground-100"
175174
disabled={!account}
176175
>
177176
<PlusIcon size="sm" variant="solid" />

client/src/components/modules/arcade-header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { cn } from "@cartridge/ui/utils";
22
import { HTMLAttributes, SVGProps } from "react";
33
import { SidebarToggle } from "../sidebar-toggle";
4-
import { useMediaQuery } from "@cartridge/ui";
54
import { useTheme } from "@/hooks/context";
5+
import { useDevice } from "@/hooks/device";
66

77
export interface ArcadeHeaderProps extends HTMLAttributes<HTMLDivElement> {}
88

@@ -11,7 +11,7 @@ export const ArcadeHeader = ({
1111
onClick,
1212
...props
1313
}: ArcadeHeaderProps) => {
14-
const isMobile = useMediaQuery("(max-width: 1024px)");
14+
const isMobile = useDevice();
1515

1616
return (
1717
<div

client/src/components/modules/edition-actions.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,7 @@ const EditionActions = ({
5656
data-disabled={disabled}
5757
active={false}
5858
simplified={true}
59-
className={cn(
60-
"bg-background-150 hover:bg-background-200 data-[disabled=true]:hover:bg-background-150 text-foreground-300 hover:text-foreground-200 data-[disabled=true]:hover:text-foreground-300 data-[disabled=true]:cursor-default border border-background-200 h-8 w-full flex items-center justify-start gap-1 px-1",
61-
)}
59+
className="bg-background-150 hover:bg-background-200 data-[disabled=true]:hover:bg-background-150 text-foreground-300 hover:text-foreground-200 data-[disabled=true]:hover:text-foreground-300 data-[disabled=true]:cursor-default h-8 w-full flex items-center justify-start gap-1 px-1"
6260
>
6361
{certified && whitelisted ? (
6462
<VerifiedIcon size="sm" />

client/src/components/modules/game-social.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const GameSocialWebsite = ({
2525
href={website}
2626
label={label ? "Play" : undefined}
2727
variant={variant}
28-
className="text-primary justify-center text-base/[20px] tracking-wide px-2 py-2.5 h-10"
28+
className="text-spacer-100 bg-primary hover:bg-primary hover:opacity-80 justify-center text-base/[20px] lg:px-4 py-2.5"
2929
/>
3030
);
3131
};

client/src/components/modules/game-socials.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
} from "./game-social";
1212
import ArcadeMenuButton from "./menu-button";
1313

14-
const gameSocialsVariants = cva("flex gap-2", {
14+
const gameSocialsVariants = cva("flex gap-3", {
1515
variants: {
1616
variant: {
1717
darkest: "",

client/src/components/pages/game.tsx

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import arcade from "@/assets/arcade-logo.png";
1515
import { GameSocialWebsite } from "../modules/game-social";
1616
import { useProject } from "@/hooks/project";
1717
import { joinPaths } from "@/helpers";
18+
import { useDevice } from "@/hooks/device";
1819

1920
export function GamePage() {
2021
const { game, edition } = useProject();
2122
const { tab } = useProject();
23+
const { isMobile } = useDevice();
2224

2325
const location = useLocation();
2426
const navigate = useNavigate();
@@ -46,19 +48,31 @@ export function GamePage() {
4648
return Socials.merge(edition?.socials, game?.socials);
4749
}, [edition, game]);
4850

51+
const isDashboard = !(edition && game);
52+
4953
return (
5054
<>
51-
<div className="lg:h-[88px] w-full flex flex-col p-4 gap-4 lg:p-6 lg:pb-0 border-b border-background-200 lg:border-none">
55+
<div
56+
className={cn(
57+
"lg:h-[88px] w-full flex flex-col gap-4 lg:p-6 lg:pb-0 border-b border-background-200 lg:border-none",
58+
isDashboard ? "p-0" : "p-4",
59+
)}
60+
>
5261
<div className="flex items-start justify-between">
53-
<div className="flex gap-3 items-center overflow-hidden">
62+
<div
63+
className={cn(
64+
"flex gap-4 items-center overflow-hidden",
65+
isDashboard && isMobile && "hidden",
66+
)}
67+
>
5468
<Thumbnail
5569
icon={edition?.properties.icon || game?.properties.icon || arcade}
5670
size="xl"
5771
className="min-w-16 min-h-16"
5872
/>
5973
<div className="flex flex-col gap-2 overflow-hidden">
6074
<p className="font-semibold text-xl/[24px] text-foreground-100 truncate">
61-
{game?.name ?? "Arcade Dashboard"}
75+
{game?.name || "Dashboard"}
6276
</p>
6377
<Editions />
6478
</div>

client/tailwind.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ const config = {
88
],
99
presets: [cartridgeTWPreset],
1010
theme: {
11+
screens: {
12+
lg: "1160px",
13+
},
1114
extend: {
1215
width: {
1316
desktop: "432px",

0 commit comments

Comments
 (0)