Skip to content

Commit 3be4940

Browse files
mikebarkminmikebarkmin
committed
improve teacher view
1 parent 5794de4 commit 3be4940

12 files changed

Lines changed: 474 additions & 105 deletions

File tree

‎platforms/web/src/Footer.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.app-footer {
2+
background-color: white;
3+
padding: 2rem;
4+
text-align: center;
5+
color: #666;
6+
font-size: 0.95rem;
7+
border-top: 1px solid #e0e0e0;
8+
margin-top: auto;
9+
}
10+
11+
.app-footer p {
12+
margin: 0.5rem 0;
13+
}
14+
15+
.app-footer a {
16+
color: #4a90e2;
17+
text-decoration: none;
18+
transition: color 0.2s ease;
19+
}
20+
21+
.app-footer a:hover {
22+
color: #357abd;
23+
text-decoration: underline;
24+
}
25+
26+
.app-footer a:focus {
27+
outline: 2px solid #4a90e2;
28+
outline-offset: 2px;
29+
border-radius: 2px;
30+
}

‎platforms/web/src/Footer.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import './Footer.css';
2+
3+
export function Footer() {
4+
return (
5+
<footer className="app-footer">
6+
<p>
7+
Built with ❤️ by <a href="https://openpatch.org" target="_blank" rel="noopener noreferrer">OpenPatch</a>
8+
</p>
9+
<p>
10+
<a href="https://learningmap.openpatch.org" target="_blank" rel="noopener noreferrer">Documentation</a>
11+
{' • '}
12+
<a href="https://github.com/openpatch/learningmap" target="_blank" rel="noopener noreferrer">GitHub</a>
13+
</p>
14+
</footer>
15+
);
16+
}

‎platforms/web/src/Header.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.app-header {
2+
width: 100%;
3+
background: #ffffff;
4+
border-bottom: 1px solid #e5e7eb;
5+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
6+
z-index: 100;
7+
box-sizing: border-box;
8+
flex-shrink: 0;
9+
}
10+
11+
.header-inner {
12+
padding: 0.5rem 2rem;
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
}
17+
18+
.header-left {
19+
display: flex;
20+
align-items: center;
21+
gap: 0.75rem;
22+
}
23+
24+
.header-logo {
25+
height: 40px;
26+
width: 40px;
27+
}
28+
29+
.header-title {
30+
margin: 0;
31+
font-size: 1.5rem;
32+
font-weight: 600;
33+
color: #333;
34+
}
35+
36+
.header-right {
37+
display: flex;
38+
gap: 8px;
39+
}
40+
41+
/* Responsive */
42+
@media (max-width: 768px) {
43+
.header-inner {
44+
padding: 0.5rem 1rem;
45+
}
46+
47+
.header-title {
48+
font-size: 1.25rem;
49+
}
50+
}

‎platforms/web/src/Header.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useNavigate } from 'react-router-dom';
2+
import logo from './logo.svg';
3+
import './Header.css';
4+
5+
interface HeaderProps {
6+
children?: React.ReactNode;
7+
}
8+
9+
export function Header({ children }: HeaderProps) {
10+
const navigate = useNavigate();
11+
12+
return (
13+
<div className="app-header">
14+
<div className="header-inner">
15+
<div className="header-left" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
16+
<img
17+
src={logo}
18+
alt="Logo"
19+
className="header-logo"
20+
/>
21+
<h1 className="header-title">
22+
Learningmap
23+
</h1>
24+
</div>
25+
{children && (
26+
<div className="header-right">
27+
{children}
28+
</div>
29+
)}
30+
</div>
31+
</div>
32+
);
33+
}

‎platforms/web/src/Landing.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ body {
2020
}
2121

2222
.header-content {
23-
padding: 1rem 2rem;
23+
padding: 0.5rem 2rem;
2424
display: flex;
2525
justify-content: space-between;
2626
align-items: center;

‎platforms/web/src/Landing.tsx‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useNavigate } from 'react-router-dom';
22
import './Landing.css';
3-
import logo from './logo.svg';
3+
import { Header } from './Header';
4+
import { Footer } from './Footer';
45

56
function Landing() {
67
const navigate = useNavigate();
@@ -37,23 +38,14 @@ function Landing() {
3738

3839
return (
3940
<div className="landing-container">
40-
{/* Header */}
41-
<header className="landing-header">
42-
<div className="header-content">
43-
<div className="logo-section" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
44-
<img src={logo} alt="LearningMap Logo" className="logo" />
45-
<span className="logo-text">Learningmap</span>
46-
</div>
47-
<nav className="nav-links">
48-
<button onClick={() => navigate('/teach')} className="nav-button">
49-
For Teachers
50-
</button>
51-
<button onClick={() => navigate('/learn')} className="nav-button">
52-
For Students
53-
</button>
54-
</nav>
55-
</div>
56-
</header>
41+
<Header>
42+
<button onClick={() => navigate('/teach')} className="nav-button">
43+
For Teachers
44+
</button>
45+
<button onClick={() => navigate('/learn')} className="nav-button">
46+
For Students
47+
</button>
48+
</Header>
5749

5850
{/* Hero Section */}
5951
<section className="hero-section">
@@ -141,17 +133,7 @@ function Landing() {
141133
</div>
142134
</section>
143135

144-
{/* Footer */}
145-
<footer className="landing-footer">
146-
<p>
147-
Built with ❤️ by <a href="https://openpatch.org" target="_blank" rel="noopener noreferrer">OpenPatch</a>
148-
</p>
149-
<p>
150-
<a href="https://learningmap.openpatch.org" target="_blank" rel="noopener noreferrer">Documentation</a>
151-
{' • '}
152-
<a href="https://github.com/openpatch/learningmap" target="_blank" rel="noopener noreferrer">GitHub</a>
153-
</p>
154-
</footer>
136+
<Footer />
155137
</div>
156138
);
157139
}

‎platforms/web/src/Learn.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818

1919
.toolbar-inner {
20-
padding: 1rem 2rem;
20+
padding: 0.5rem 2rem;
2121
display: flex;
2222
justify-content: space-between;
2323
align-items: center;

‎platforms/web/src/Learn.tsx‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import type { RoadmapState } from '@learningmap/learningmap';
55
import '@learningmap/learningmap/index.css';
66
import * as db from './db';
77
import './Learn.css';
8-
import logo from './logo.svg';
8+
import { Header } from './Header';
9+
import { Footer } from './Footer';
910

1011
function Learn() {
1112
const navigate = useNavigate();
@@ -246,25 +247,11 @@ function Learn() {
246247

247248
return (
248249
<div className="learn-container">
249-
<div className="learn-toolbar">
250-
<div className="toolbar-inner">
251-
<div className="toolbar-left">
252-
<img
253-
src={logo}
254-
alt="Logo"
255-
className="toolbar-logo"
256-
onClick={() => navigate('/')}
257-
style={{ cursor: 'pointer' }}
258-
/>
259-
<h1 className="toolbar-title" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Learningmap</h1>
260-
</div>
261-
<div className="toolbar-right">
262-
<button onClick={() => navigate('/learn')} className="toolbar-button">
263-
My Learningmaps
264-
</button>
265-
</div>
266-
</div>
267-
</div>
250+
<Header>
251+
<button onClick={() => navigate('/learn')} className="toolbar-button">
252+
My Learningmaps
253+
</button>
254+
</Header>
268255
<LearningMap
269256
key={storageKey}
270257
roadmapData={learningMap.roadmapData}
@@ -277,20 +264,7 @@ function Learn() {
277264

278265
return (
279266
<div className="learn-list-container">
280-
<div className="learn-toolbar">
281-
<div className="toolbar-inner">
282-
<div className="toolbar-left">
283-
<img
284-
src={logo}
285-
alt="Logo"
286-
className="toolbar-logo"
287-
onClick={() => navigate('/')}
288-
style={{ cursor: 'pointer' }}
289-
/>
290-
<h1 className="toolbar-title" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Learningmap</h1>
291-
</div>
292-
</div>
293-
</div>
267+
<Header />
294268

295269
<div className="learn-list-content">
296270
<div className="add-map-section">
@@ -388,6 +362,7 @@ function Learn() {
388362
</div>
389363
)}
390364
</div>
365+
<Footer />
391366
</div>
392367
);
393368
}

0 commit comments

Comments
 (0)