lukas/uis-cloud-computing
1
0
Fork 0
mirror of https://github.com/dat515-2025/Group-8.git synced 2026-03-22 15:12:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend): implemented mobile friendly UI responsiveness

Browse Source
This commit is contained in:
ribardej
2025-11-05 20:24:33 +01:00
parent 36b1fe887b
commit a9b2aba55a
6 changed files with 219 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
7project/frontend/src/appearance.ts
View File

@@ -13,9 +13,9 @@ export function applyTheme(theme: Theme) {
export function applyFontSize(size: FontSize) { export function applyFontSize(size: FontSize) {
const root = document.documentElement; const root = document.documentElement;
const map: Record<FontSize, string> = { const map: Record<FontSize, string> = {
small: '14px', small: '12px',
medium: '18px', medium: '15px',
large: '22px', large: '21px',
}; };
root.style.fontSize = map[size]; root.style.fontSize = map[size];
} }

76
7project/frontend/src/pages/BalanceChart.tsx
View File

@@ -1,5 +1,6 @@
// src/BalanceChart.tsx // src/BalanceChart.tsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import { useEffect, useRef, useState } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { type BalancePoint } from '../api'; import { type BalancePoint } from '../api';
function formatAmount(n: number) { function formatAmount(n: number) {
@@ -10,37 +11,56 @@ function formatDate(dateStr: string) {
return new Date(dateStr).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); return new Date(dateStr).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
} }
export default function BalanceChart({ data }: { data: BalancePoint[] }) { type Props = { data: BalancePoint[]; pxPerPoint?: number };
export default function BalanceChart({ data, pxPerPoint = 40 }: Props) {
const wrapRef = useRef<HTMLDivElement | null>(null);
const [containerWidth, setContainerWidth] = useState(0);
useEffect(() => {
function measure() {
if (!wrapRef.current) return;
setContainerWidth(wrapRef.current.clientWidth);
}
measure();
const obs = new ResizeObserver(measure);
if (wrapRef.current) obs.observe(wrapRef.current);
return () => obs.disconnect();
}, []);
if (data.length === 0) { if (data.length === 0) {
return <div>No data to display</div>; return <div>No data to display</div>;
} }
const desiredWidth = Math.max(containerWidth, Math.max(600, data.length * pxPerPoint));
return ( return (
<ResponsiveContainer width="100%" height={300}> <div ref={wrapRef} className="chart-scroll">
<LineChart <div className="chart-inner" style={{ minWidth: desiredWidth, paddingBottom: 8 }}>
data={data} <LineChart
// Increased 'left' margin to create more space for the Y-axis label and tick values width={desiredWidth}
margin={{ top: 5, right: 30, left: 50, bottom: 5 }} // <-- Change this line height={300}
> data={data}
<CartesianGrid strokeDasharray="3 3" /> margin={{ top: 5, right: 30, left: 50, bottom: 5 }}
<XAxis >
dataKey="date" <CartesianGrid strokeDasharray="3 3" />
tickFormatter={formatDate} <XAxis
label={{ value: 'Date', position: 'insideBottom', offset: -5 }} dataKey="date"
/> tickFormatter={formatDate}
<YAxis label={{ value: 'Date', position: 'insideBottom', offset: -5 }}
tickFormatter={(value) => formatAmount(value as number)} />
// Adjusted 'offset' for the Y-axis label. <YAxis
// A negative offset moves it further away from the axis. tickFormatter={(value) => formatAmount(value as number)}
label={{ value: 'Balance', angle: -90, position: 'insideLeft', offset: -30 }} // <-- Change this line label={{ value: 'Balance', angle: -90, position: 'insideLeft', offset: -30 }}
/> />
<Tooltip <Tooltip
labelFormatter={formatDate} labelFormatter={formatDate}
formatter={(value) => [formatAmount(value as number), 'Balance']} formatter={(value) => [formatAmount(value as number), 'Balance']}
/> />
<Legend /> <Legend />
<Line type="monotone" dataKey="balance" stroke="#3b82f6" strokeWidth={2} activeDot={{ r: 8 }} /> <Line type="monotone" dataKey="balance" stroke="#3b82f6" strokeWidth={2} activeDot={{ r: 8 }} />
</LineChart> </LineChart>
</ResponsiveContainer> </div>
</div>
); );
} }

10
7project/frontend/src/pages/CategoryPieChart.tsx
View File

@@ -92,9 +92,13 @@ export default function CategoryPieCharts({ transactions, categories }: { transa
return ( return (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', justifyContent: 'center' }}> <div className="pie-grid" >
<SinglePieChart data={expensesData} title="Expenses by Category" /> <div className="pie-card">
<SinglePieChart data={earningsData} title="Earnings by Category" /> <SinglePieChart data={expensesData} title="Expenses by Category" />
</div>
<div className="pie-card">
<SinglePieChart data={earningsData} title="Earnings by Category" />
</div>
</div> </div>
); );
} }

30
7project/frontend/src/pages/Dashboard.tsx
View File

@@ -168,6 +168,9 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
const [editingDescription, setEditingDescription] = useState<string>(''); const [editingDescription, setEditingDescription] = useState<string>('');
const [editingDate, setEditingDate] = useState<string>(''); // YYYY-MM-DD const [editingDate, setEditingDate] = useState<string>(''); // YYYY-MM-DD
// Sidebar toggle for mobile
const [sidebarOpen, setSidebarOpen] = useState(false)
async function loadAll() { async function loadAll() {
@@ -312,11 +315,11 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
} }
return ( return (
<div className="app-layout"> <div className={`app-layout ${sidebarOpen ? 'sidebar-open' : ''}`}>
<aside className="sidebar" style={{ display: 'flex', flexDirection: 'column' }}> <aside className="sidebar" style={{ display: 'flex', flexDirection: 'column' }}>
<div> <div>
<div className="logo">7Project</div> <div className="logo">7Project</div>
<nav className="nav"> <nav className="nav" onClick={() => setSidebarOpen(false)}>
<button className={current === 'home' ? 'active' : ''} onClick={() => setCurrent('home')}>Home</button> <button className={current === 'home' ? 'active' : ''} onClick={() => setCurrent('home')}>Home</button>
<button className={current === 'manual' ? 'active' : ''} onClick={() => setCurrent('manual')}>Manual management</button> <button className={current === 'manual' ? 'active' : ''} onClick={() => setCurrent('manual')}>Manual management</button>
<button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button> <button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button>
@@ -329,6 +332,12 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</aside> </aside>
<div className="content"> <div className="content">
<div className="topbar"> <div className="topbar">
<button
className="icon-btn hamburger"
aria-label="Open menu"
aria-expanded={sidebarOpen}
onClick={() => setSidebarOpen(true)}
>☰</button>
<h2 style={{ margin: 0 }}>{current === 'home' ? 'Dashboard' : current === 'manual' ? 'Manual management' : current === 'account' ? 'Account' : 'Appearance'}</h2> <h2 style={{ margin: 0 }}>{current === 'home' ? 'Dashboard' : current === 'manual' ? 'Manual management' : current === 'account' ? 'Account' : 'Appearance'}</h2>
<div className="actions"> <div className="actions">
<span className="user muted">Signed in</span> <span className="user muted">Signed in</span>
@@ -409,7 +418,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
<button className="btn primary" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Next</button> <button className="btn primary" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Next</button>
</div> </div>
</div> </div>
<table className="table"> <table className="table responsive">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>
@@ -423,7 +432,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
{visible.map(t => ( {visible.map(t => (
<tr key={t.id}> <tr key={t.id}>
{/* Date cell */} {/* Date cell */}
<td> <td data-label="Date">
{editingTxId === t.id ? ( {editingTxId === t.id ? (
<input <input
className="input" className="input"
@@ -437,7 +446,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td> </td>
{/* Amount cell */} {/* Amount cell */}
<td className="amount" style={{ textAlign: 'right' }}> <td data-label="Amount" className="amount" style={{ textAlign: 'right' }}>
{editingTxId === t.id ? ( {editingTxId === t.id ? (
<input <input
className="input" className="input"
@@ -453,7 +462,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td> </td>
{/* Description cell */} {/* Description cell */}
<td> <td data-label="Description">
{editingTxId === t.id ? ( {editingTxId === t.id ? (
<input <input
className="input" className="input"
@@ -467,7 +476,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td> </td>
{/* Categories cell */} {/* Categories cell */}
<td> <td data-label="Categories">
{editingTxId === t.id ? ( {editingTxId === t.id ? (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<select <select
@@ -490,15 +499,15 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td> </td>
{/* Actions cell */} {/* Actions cell */}
<td> <td data-label="Actions">
{editingTxId === t.id ? ( {editingTxId === t.id ? (
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}> <div className="actions" style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
<button className="btn small" onClick={saveEditTransaction}>Save</button> <button className="btn small" onClick={saveEditTransaction}>Save</button>
<button className="btn small" onClick={cancelEditTransaction}>Cancel</button> <button className="btn small" onClick={cancelEditTransaction}>Cancel</button>
<button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button> <button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button>
</div> </div>
) : ( ) : (
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}> <div className="actions" style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
<button className="btn small" onClick={() => beginEditTransaction(t)}>Edit</button> <button className="btn small" onClick={() => beginEditTransaction(t)}>Edit</button>
<button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button> <button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button>
</div> </div>
@@ -539,6 +548,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
onClose={() => setMockModalOpen(false)} onClose={() => setMockModalOpen(false)}
onGenerate={handleGenerateMockTransactions} onGenerate={handleGenerateMockTransactions}
/> />
{sidebarOpen && <div className="backdrop" onClick={() => setSidebarOpen(false)} />}
</div> </div>
); );
} }

2
7project/frontend/src/pages/LoginRegisterPage.tsx
View File

@@ -80,7 +80,7 @@ export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => vo
<input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} /> <input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
</div> </div>
{mode === 'register' && ( {mode === 'register' && (
<div className="form-row"> <div className="space-y">
<div> <div>
<label className="muted">First name (optional)</label> <label className="muted">First name (optional)</label>
<input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} /> <input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />

143
7project/frontend/src/ui.css
View File

@@ -48,26 +48,49 @@ body[data-theme="dark"] {
.card h3 { margin: 0 0 12px; } .card h3 { margin: 0 0 12px; }
/* Forms */ /* Forms */
.input, select, textarea { /* Common field styles (no custom arrow here) */
.input, textarea {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
background-color: var(--panel); background-color: var(--panel);
color: var(--muted); color: var(--muted);
}
/* Add these properties specifically for the select element */ /* Select-only: show custom dropdown arrow */
select.input {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
padding-right: 32px; /* Add space for the custom arrow */ padding-right: 32px; /* room for the arrow */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center; background-position: right 0.5rem center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.5em 1.5em; background-size: 1.5em 1.5em;
cursor: pointer; cursor: pointer;
} }
.pie-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) {
.pie-grid {
grid-template-columns: 1fr;
}
}
/* Make charts scale nicely within the cards */
.pie-card canvas, .pie-card svg {
max-width: 100%;
height: auto;
display: block;
}
.input:focus, select:focus, textarea:focus { .input:focus, select:focus, textarea:focus {
outline: 2px solid var(--primary); outline: 2px solid var(--primary);
outline-offset: 2px; outline-offset: 2px;
@@ -151,3 +174,117 @@ body.auth-page #root {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
/* Responsive enhancements */
/* Off-canvas sidebar + hamburger for mobile */
@media (max-width: 900px) {
.app-layout {
grid-template-columns: 1fr;
min-height: 100dvh;
position: relative;
}
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: 80vw;
max-width: 320px;
transform: translateX(-100%);
transition: transform 200ms ease;
z-index: 1000;
overflow-y: auto;
}
.app-layout.sidebar-open .sidebar {
transform: translateX(0);
}
.hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: 8px;
}
.topbar { position: sticky; top: 0; z-index: 500; }
}
@media (min-width: 901px) {
.hamburger { display: none; }
}
/* Backdrop when sidebar is open */
.backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 900;
}
/* Responsive table: convert to card list on small screens */
.table.responsive { width: 100%; }
@media (max-width: 700px) {
.table.responsive thead { display: none; }
.table.responsive tbody tr {
display: block;
border: 1px solid var(--border, #2a2f45);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
background: var(--panel);
}
.table.responsive tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
text-align: left !important; /* override any right align */
}
.table.responsive tbody td:last-child { border-bottom: 0; }
.table.responsive tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--muted);
}
.table.responsive .actions { width: 100%; justify-content: flex-end; }
.table.responsive .amount { font-weight: 600; }
}
/* Filters and controls wrapping */
@media (max-width: 900px) {
.form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.form-row { grid-template-columns: 1fr; }
}
.table-controls { gap: 12px; }
@media (max-width: 700px) {
.table-controls { flex-direction: column; align-items: stretch; }
.table-controls .actions { width: 100%; }
.table-controls .actions .btn { flex: 1 0 auto; }
}
/* Touch-friendly sizes */
.btn, .input, select.input { min-height: 40px; }
.btn.small { min-height: 36px; }
/* Connection rows on mobile */
@media (max-width: 700px) {
.connection-row { flex-direction: column; align-items: stretch; gap: 8px; }
.connection-row .btn { width: 100%; }
}
/* Charts should scale to container */
.card canvas, .card svg { max-width: 100%; height: auto; display: block; }
/* Horizontal scroll container for wide charts */
.chart-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}
.chart-inner { min-width: 900px; }