Skip to content

Commit ae3ddbb

Browse files
Mystery-CLIMystery-CLI
authored
Merge pull request #353 from CollinsC1O/Responsive-Design
feat: implement mobile responsive features
2 parents dc5be39 + 30047a7 commit ae3ddbb

8 files changed

Lines changed: 165 additions & 5 deletions

File tree

‎app/src/App.css‎

Lines changed: 124 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ body {
2323
height: 56px;
2424
display: flex;
2525
align-items: center;
26-
gap: 1.5rem;
26+
justify-content: space-between;
27+
position: relative;
28+
z-index: 100;
2729
}
2830

2931
.nav-brand {
@@ -32,17 +34,73 @@ body {
3234
margin-right: auto;
3335
}
3436

37+
.nav-links {
38+
display: flex;
39+
gap: 1.5rem;
40+
align-items: center;
41+
}
42+
43+
.nav-mobile-toggle {
44+
display: none;
45+
background: none;
46+
border: none;
47+
color: white;
48+
font-size: 1.5rem;
49+
cursor: pointer;
50+
padding: 0.5rem;
51+
min-height: 44px;
52+
min-width: 44px;
53+
}
54+
3555
.nav a {
3656
color: rgba(255, 255, 255, 0.8);
3757
text-decoration: none;
3858
font-size: 0.9rem;
59+
display: inline-flex;
60+
align-items: center;
3961
}
4062

4163
.nav a.active,
4264
.nav a:hover {
4365
color: white;
4466
}
4567

68+
@media (max-width: 600px) {
69+
.nav-mobile-toggle {
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
}
74+
75+
.nav-links {
76+
display: none;
77+
flex-direction: column;
78+
position: absolute;
79+
top: 56px;
80+
left: 0;
81+
right: 0;
82+
background: #1a1a2e;
83+
padding: 1rem;
84+
gap: 0.5rem;
85+
border-top: 1px solid #333;
86+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
87+
}
88+
89+
.nav-links.nav-links-open {
90+
display: flex;
91+
}
92+
93+
.nav a {
94+
width: 100%;
95+
padding: 0.75rem;
96+
text-align: center;
97+
background: rgba(255, 255, 255, 0.05);
98+
border-radius: 4px;
99+
justify-content: center;
100+
min-height: 44px;
101+
}
102+
}
103+
46104
.main {
47105
flex: 1;
48106
padding: 2rem 1.5rem;
@@ -51,6 +109,71 @@ body {
51109
margin: 0 auto;
52110
}
53111

112+
/* Page Layouts */
113+
.dashboard-header {
114+
display: flex;
115+
justify-content: space-between;
116+
align-items: center;
117+
margin-bottom: 1.5rem;
118+
}
119+
120+
.dashboard-new-btn {
121+
padding: 0.5rem 1rem;
122+
background: #1a1a2e;
123+
color: white;
124+
border-radius: 6px;
125+
text-decoration: none;
126+
display: inline-flex;
127+
align-items: center;
128+
justify-content: center;
129+
min-height: 44px;
130+
}
131+
132+
.trades-grid {
133+
display: grid;
134+
gap: 1rem;
135+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
136+
}
137+
138+
.trade-detail-grid {
139+
display: grid;
140+
gap: 1.5rem;
141+
grid-template-columns: 1fr 1fr;
142+
}
143+
144+
.create-trade-container {
145+
max-width: 480px;
146+
width: 100%;
147+
margin: 0 auto;
148+
}
149+
150+
/* Touch targets for global elements */
151+
button,
152+
a,
153+
input,
154+
select,
155+
textarea {
156+
touch-action: manipulation;
157+
}
158+
159+
@media (max-width: 768px) {
160+
.main {
161+
padding: 1.5rem 1rem;
162+
}
163+
164+
.dashboard-header {
165+
flex-direction: column;
166+
align-items: flex-start;
167+
gap: 1rem;
168+
}
169+
170+
.dashboard-new-btn {
171+
width: 100%;
172+
}
173+
174+
.trade-detail-grid {
175+
grid-template-columns: 1fr;
176+
}
54177
.onboarding {
55178
background: #fff;
56179
border: 1px solid #e1e3e8;

‎app/src/App.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useState } from 'react';
2+
import { Routes, Route, NavLink } from 'react-router-dom';
13
import { Routes, Route } from 'react-router-dom';
24
import { AppBar, Toolbar, Typography, Button, Box, Container } from '@mui/material';
35
import { NavLink } from 'react-router-dom';
@@ -7,8 +9,27 @@ import CreateTrade from './pages/CreateTrade';
79
import { ErrorBoundary } from './ErrorBoundary';
810

911
export default function App() {
12+
const [isMenuOpen, setIsMenuOpen] = useState(false);
13+
1014
return (
1115
<ErrorBoundary>
16+
<div className="app">
17+
<nav className="nav">
18+
<span className="nav-brand">StellarEscrow</span>
19+
<button
20+
className="nav-mobile-toggle"
21+
onClick={() => setIsMenuOpen(!isMenuOpen)}
22+
aria-label="Toggle navigation"
23+
aria-expanded={isMenuOpen}
24+
>
25+
☰
26+
</button>
27+
<div className={`nav-links ${isMenuOpen ? 'nav-links-open' : ''}`}>
28+
<NavLink to="/" end onClick={() => setIsMenuOpen(false)}>Dashboard</NavLink>
29+
<NavLink to="/trades/new" onClick={() => setIsMenuOpen(false)}>New Trade</NavLink>
30+
</div>
31+
</nav>
32+
<main className="main">
1233
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
1334
<AppBar position="static" color="primary">
1435
<Toolbar sx={{ gap: 2 }}>

‎app/src/pages/CreateTrade.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function CreateTrade() {
1414
};
1515

1616
return (
17-
<div style={{ maxWidth: 480 }}>
17+
<div className="create-trade-container">
1818
<h1 style={{ fontSize: '1.5rem', marginBottom: '1.5rem' }}>Create Trade</h1>
1919
{error && <p style={{ color: 'red', marginBottom: '1rem' }}>Failed to create trade.</p>}
2020
<TradeForm onSubmit={handleSubmit} loading={isLoading} />

‎app/src/pages/Dashboard.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,18 @@ export default function Dashboard() {
1111

1212
return (
1313
<div>
14+
<div className="dashboard-header">
1415
<OnboardingFlow />
1516
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
1617
<h1 style={{ fontSize: '1.5rem' }}>Trades</h1>
17-
<Link to="/trades/new" style={{ padding: '0.5rem 1rem', background: '#1a1a2e', color: 'white', borderRadius: 6, textDecoration: 'none' }}>
18+
<Link to="/trades/new" className="dashboard-new-btn">
1819
+ New Trade
1920
</Link>
2021
</div>
2122
{trades.length === 0 ? (
2223
<p style={{ color: '#666' }}>No trades yet.</p>
2324
) : (
24-
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))' }}>
25+
<div className="trades-grid">
2526
{trades.map((trade) => (
2627
<Link key={trade.id} to={`/trades/${trade.id}`} style={{ textDecoration: 'none' }}>
2728
<TradeCard

‎app/src/pages/TradeDetail.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function TradeDetail() {
1111
if (error || !trade) return <p>Trade not found. <Link to="/">Back</Link></p>;
1212

1313
return (
14-
<div style={{ display: 'grid', gap: '1.5rem', gridTemplateColumns: '1fr 1fr' }}>
14+
<div className="trade-detail-grid">
1515
<div>
1616
<h1 style={{ fontSize: '1.5rem', marginBottom: '1rem' }}>Trade #{trade.id}</h1>
1717
<TradeCard

‎components/src/escrow/EventFeed.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
justify-content: space-between;
4242
align-items: center;
4343
margin-bottom: 0.5rem;
44+
gap: 0.5rem;
45+
flex-wrap: wrap;
4446
}
4547

4648
.event-time {

‎components/src/escrow/TradeCard.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
margin-bottom: 1rem;
1515
padding-bottom: 1rem;
1616
border-bottom: 1px solid #e0e0e0;
17+
gap: 0.5rem;
18+
flex-wrap: wrap;
1719
}
1820

1921
.trade-id {
@@ -38,6 +40,8 @@
3840
display: flex;
3941
justify-content: space-between;
4042
align-items: center;
43+
gap: 0.5rem;
44+
flex-wrap: wrap;
4145
}
4246

4347
.party-label {
@@ -58,6 +62,8 @@
5862
align-items: center;
5963
padding-top: 0.5rem;
6064
border-top: 1px solid #f0f0f0;
65+
gap: 0.5rem;
66+
flex-wrap: wrap;
6167
}
6268

6369
.amount-label {

‎components/src/escrow/TradeForm.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@
3030
margin-top: 0.5rem;
3131
}
3232

33+
@media (max-width: 600px) {
34+
.trade-form button[type="submit"] {
35+
align-self: stretch;
36+
width: 100%;
37+
}
38+
}
39+
3340
/* ── Auto-save indicator ─────────────────────────────────── */
3441

3542
.trade-form__save-indicator {

0 commit comments

Comments
 (0)