lukas/uis-cloud-computing
1
0
Fork 0
mirror of https://github.com/dat515-2025/Group-8.git synced 2026-03-23 07:29:39 +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

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 [editingDate, setEditingDate] = useState<string>(''); // YYYY-MM-DD
// Sidebar toggle for mobile
const [sidebarOpen, setSidebarOpen] = useState(false)
async function loadAll() {
@@ -312,11 +315,11 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
}
return (
<div className="app-layout">
<div className={`app-layout ${sidebarOpen ? 'sidebar-open' : ''}`}>
<aside className="sidebar" style={{ display: 'flex', flexDirection: 'column' }}>
<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 === 'manual' ? 'active' : ''} onClick={() => setCurrent('manual')}>Manual management</button>
<button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button>
@@ -329,6 +332,12 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</aside>
<div className="content">
<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>
<div className="actions">
<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>
</div>
</div>
<table className="table">
<table className="table responsive">
<thead>
<tr>
<th>Date</th>
@@ -423,7 +432,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
{visible.map(t => (
<tr key={t.id}>
{/* Date cell */}
<td>
<td data-label="Date">
{editingTxId === t.id ? (
<input
className="input"
@@ -437,7 +446,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td>
{/* Amount cell */}
<td className="amount" style={{ textAlign: 'right' }}>
<td data-label="Amount" className="amount" style={{ textAlign: 'right' }}>
{editingTxId === t.id ? (
<input
className="input"
@@ -453,7 +462,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td>
{/* Description cell */}
<td>
<td data-label="Description">
{editingTxId === t.id ? (
<input
className="input"
@@ -467,7 +476,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td>
{/* Categories cell */}
<td>
<td data-label="Categories">
{editingTxId === t.id ? (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<select
@@ -490,15 +499,15 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
</td>
{/* Actions cell */}
<td>
<td data-label="Actions">
{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={cancelEditTransaction}>Cancel</button>
<button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button>
</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={() => handleDeleteTransaction(t.id)}>Delete</button>
</div>
@@ -539,6 +548,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
onClose={() => setMockModalOpen(false)}
onGenerate={handleGenerateMockTransactions}
/>
{sidebarOpen && <div className="backdrop" onClick={() => setSidebarOpen(false)} />}
</div>
);
}