Skip to content

Commit 2f898f3

Browse files
iamvukasiniamvukasin
committed
Modify layout to support mobile
- All four lanes are visible at the same time on mobile (2x2 grid) - Latest block goes to the top of the verified lane
1 parent 01667de commit 2f898f3

File tree

3 files changed

+23
-21
lines changed

3 files changed

+23
-21
lines changed

‎frontend/app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ export default function RootLayout({
2020
}>) {
2121
return (
2222
<html lang="en">
23-
<body className={`${brittiSans.variable} antialiased`}>{children}</body>
23+
<body className={`${brittiSans.variable} antialiased bg-[#0f0f1a]`}>
24+
{children}
25+
</body>
2426
</html>
2527
)
2628
}

‎frontend/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import BlockSpawner from '../components/block-spawner'
22

33
export default function Home() {
44
return (
5-
<div className="min-h-screen bg-[#0f0f1a] text-white font-sans">
6-
<main className="max-w-6xl mx-auto py-12 px-6">
7-
<h1 className="text-2xl font-bold mb-8 text-center">
5+
<div className="min-h-screen text-white font-sans max-sm:h-screen max-sm:overflow-hidden">
6+
<main className="max-w-6xl mx-auto py-12 px-6 max-md:py-8 max-md:px-6 max-sm:h-full max-sm:flex max-sm:flex-col max-sm:py-4 max-sm:px-4">
7+
<h1 className="text-2xl font-bold mb-8 text-center max-md:mb-4 max-sm:shrink-0">
88
Execution Events SDK Showcase
99
</h1>
1010
<BlockSpawner />

‎frontend/components/block-spawner.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function BlockSpawner() {
2525
const spawnBlock = useCallback(async () => {
2626
const id = blockNumRef.current++
2727

28-
setBlocks((prev) => [...prev, { id, state: 'proposed' }])
28+
setBlocks((prev) => [{ id, state: 'proposed' }, ...prev])
2929

3030
await sleep(100 * speed)
3131
updateBlockState(id, 'voted')
@@ -46,9 +46,9 @@ export default function BlockSpawner() {
4646
'px-4 py-3 rounded-md font-semibold text-sm text-center animate-slideIn transition-all duration-300 bg-linear-to-br'
4747

4848
return (
49-
<div className="w-full p-6">
49+
<div className="w-full p-6 max-md:p-0 max-sm:flex-1 max-sm:flex max-sm:flex-col max-sm:min-h-0">
5050
{/* Controls */}
51-
<div className="flex items-center gap-4 mb-8 p-4 bg-[#1a1a2e] rounded-lg flex-wrap">
51+
<div className="flex items-center gap-4 mb-8 p-4 bg-[#1a1a2e] rounded-lg flex-wrap max-md:p-3 max-md:gap-3 max-md:mb-2 max-sm:shrink-0">
5252
<label htmlFor="speed" className="text-[#a0a0b0] font-medium">
5353
Speed:
5454
</label>
@@ -66,20 +66,20 @@ export default function BlockSpawner() {
6666
<button
6767
type="button"
6868
onClick={spawnBlock}
69-
className="ml-auto px-6 py-3 bg-linear-to-br from-indigo-500 to-violet-500 text-white border-none rounded-md font-semibold cursor-pointer transition-all duration-150 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/40 active:translate-y-0 max-sm:w-full max-sm:ml-0 max-sm:mt-2"
69+
className="ml-auto px-6 py-3 bg-linear-to-br from-indigo-500 to-violet-500 text-white border-none rounded-md font-semibold cursor-pointer transition-all duration-150 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/40 active:translate-y-0 max-sm:w-full max-sm:ml-0 max-sm:mt-2 max-sm:px-4 max-sm:py-2"
7070
>
7171
Spawn Block
7272
</button>
7373
</div>
7474

7575
{/* Lanes */}
76-
<div className="grid grid-cols-4 gap-4 max-md:grid-cols-2 max-sm:grid-cols-1">
76+
<div className="grid grid-cols-4 gap-4 max-sm:grid-cols-2 max-sm:grid-rows-[1fr_1fr] max-sm:flex-1 max-sm:min-h-0 max-md:gap-2">
7777
{/* Proposed Lane */}
78-
<div className="bg-[#16162a] rounded-lg p-4 min-h-75">
79-
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm uppercase tracking-wide text-[#8888a0]">
78+
<div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
79+
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
8080
Proposed
8181
</h3>
82-
<div className="flex flex-col gap-2">
82+
<div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
8383
{proposedBlocks.map((block) => (
8484
<div
8585
key={block.id}
@@ -92,11 +92,11 @@ export default function BlockSpawner() {
9292
</div>
9393

9494
{/* Voted Lane */}
95-
<div className="bg-[#16162a] rounded-lg p-4 min-h-75">
96-
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm uppercase tracking-wide text-[#8888a0]">
95+
<div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
96+
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
9797
Voted
9898
</h3>
99-
<div className="flex flex-col gap-2">
99+
<div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
100100
{votedBlocks.map((block) => (
101101
<div
102102
key={block.id}
@@ -109,11 +109,11 @@ export default function BlockSpawner() {
109109
</div>
110110

111111
{/* Finalized Lane */}
112-
<div className="bg-[#16162a] rounded-lg p-4 min-h-75">
113-
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm uppercase tracking-wide text-[#8888a0]">
112+
<div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
113+
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
114114
Finalized
115115
</h3>
116-
<div className="flex flex-col gap-2">
116+
<div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
117117
{finalizedBlocks.map((block) => (
118118
<div
119119
key={block.id}
@@ -126,11 +126,11 @@ export default function BlockSpawner() {
126126
</div>
127127

128128
{/* Verified Lane */}
129-
<div className="bg-[#16162a] rounded-lg p-4 min-h-75">
130-
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm uppercase tracking-wide text-[#8888a0]">
129+
<div className="bg-[#16162a] rounded-lg p-4 min-h-75 max-md:min-h-0 max-md:flex max-md:flex-col max-md:overflow-hidden max-md:p-3">
130+
<h3 className="m-0 mb-4 pb-3 border-b-2 border-[#2a2a4a] text-sm font-medium uppercase tracking-wide text-[#8888a0] max-md:pb-2 max-sm:shrink-0">
131131
Verified
132132
</h3>
133-
<div className="flex flex-col gap-2">
133+
<div className="flex flex-col gap-2 max-md:overflow-auto max-md:flex-1 max-md:min-h-0">
134134
{verifiedBlocks.map((block) => (
135135
<div
136136
key={block.id}

0 commit comments

Comments
 (0)