Skip to content

Commit 2f3038c

Browse files
author
mige
committed
Merge remote-tracking branch 'origin/master'
2 parents e1d494c + 5e6a842 commit 2f3038c

File tree

4 files changed

+191
-44
lines changed

4 files changed

+191
-44
lines changed

‎src/App.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,69 @@
1212
flex-direction: row;
1313
}
1414

15+
.og-examples__mobile-layout {
16+
display: flex;
17+
flex-direction: column;
18+
height: 100vh;
19+
width: 100%;
20+
}
21+
22+
.og-examples__frame-container {
23+
height: 70%;
24+
width: 100%;
25+
position: relative;
26+
overflow: hidden;
27+
}
28+
29+
.og-examples__list-container {
30+
height: 30%;
31+
width: 100%;
32+
border-top: 1px solid var(--blue);
33+
background-color: var(--black);
34+
display: flex;
35+
flex-direction: column;
36+
}
37+
38+
.og-examples__list-container .mb-3 {
39+
flex-shrink: 0;
40+
padding: 10px;
41+
background-color: var(--black);
42+
}
43+
44+
.og-examples__list-container .nav {
45+
flex: 1;
46+
overflow-y: auto;
47+
padding: 0 10px;
48+
}
49+
50+
.og-sandbox_list {
51+
width: 300px;
52+
}
53+
54+
@media screen and (max-width: 768px) {
55+
.og-sandbox_list {
56+
width: auto;
57+
}
58+
}
59+
60+
.code-toggle-btn {
61+
position: fixed;
62+
top: 10px;
63+
right: 10px;
64+
z-index: 1000;
65+
background-color: var(--blue);
66+
color: var(--white);
67+
border: none;
68+
padding: 8px 16px;
69+
border-radius: 4px;
70+
cursor: pointer;
71+
font-size: 14px;
72+
}
73+
74+
.code-toggle-btn:hover {
75+
opacity: 0.9;
76+
}
77+
1578
.mb-3 {
1679
border: none !important;
1780
}

‎src/App.js‎

Lines changed: 114 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,24 @@ import useExampleContext from "./hooks/useExampleContext";
1313
import SplitPane, {Pane} from 'split-pane-react';
1414
import 'split-pane-react/esm/themes/default.css';
1515

16-
const ExampleDetail = ({examplesUrl}) => {
17-
16+
const ExampleDetail = ({examplesUrl, examples, refresh}) => {
1817
const {id} = useParams();
19-
2018
const {exampleHtml, loadExample, setExampleHtml} = useExampleContext();
21-
2219
const [sizes, setSizes] = useState(['44%', 'auto']);
23-
24-
// Fixing mouse pointer evetns when dragging panels
2520
const [drag, setDrag] = useState(false);
21+
const [showCode, setShowCode] = useState(window.innerWidth > 768);
22+
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
23+
24+
useEffect(() => {
25+
const handleResize = () => {
26+
const mobile = window.innerWidth <= 768;
27+
setIsMobile(mobile);
28+
setShowCode(!mobile);
29+
};
30+
31+
window.addEventListener('resize', handleResize);
32+
return () => window.removeEventListener('resize', handleResize);
33+
}, []);
2634

2735
useEffect(() => {
2836
let _id = id || 'baseLayers';
@@ -49,33 +57,98 @@ const ExampleDetail = ({examplesUrl}) => {
4957
setDrag(false)
5058
}
5159

52-
return (<>
53-
<div className="og-examples__panel">
54-
<SplitPane
55-
split='vertical'
56-
sizes={sizes}
57-
onChange={setSizes}
58-
onDragStart={handleDragStart}
59-
onDragEnd={handleDragEnd}
60-
>
61-
<Pane>
62-
<Editor examplesUrl={examplesUrl} onRun={handleRun} onRaw={handleRaw} code={exampleHtml}
63-
id={id}/>
64-
</Pane>
65-
<Frame examplesUrl={examplesUrl} code={exampleHtml} id={id}
66-
style={{"pointerEvents": drag ? "none" : ""}}/>
67-
</SplitPane>
60+
const toggleCode = () => {
61+
setShowCode(!showCode);
62+
}
63+
64+
if (isMobile) {
65+
return (
66+
<div className="og-examples__mobile-layout">
67+
<div className="og-examples__frame-container">
68+
{showCode && (
69+
<button
70+
className="code-toggle-btn"
71+
onClick={toggleCode}
72+
>
73+
Hide Code
74+
</button>
75+
)}
76+
{showCode ? (
77+
<SplitPane
78+
split='vertical'
79+
sizes={sizes}
80+
onChange={setSizes}
81+
onDragStart={handleDragStart}
82+
onDragEnd={handleDragEnd}
83+
>
84+
<Pane>
85+
<Editor examplesUrl={examplesUrl} onRun={handleRun} onRaw={handleRaw} code={exampleHtml}
86+
id={id}/>
87+
</Pane>
88+
<Frame examplesUrl={examplesUrl} code={exampleHtml} id={id}
89+
style={{"pointerEvents": drag ? "none" : ""}}/>
90+
</SplitPane>
91+
) : (
92+
<>
93+
<Frame examplesUrl={examplesUrl} code={exampleHtml} id={id}
94+
style={{"pointerEvents": drag ? "none" : ""}}/>
95+
<button
96+
className="code-toggle-btn"
97+
onClick={toggleCode}
98+
>
99+
Show Code
100+
</button>
101+
</>
102+
)}
103+
</div>
104+
<div className="og-examples__list-container">
105+
<List
106+
examples={examples}
107+
onClick={(id) => {
108+
if (window.location.pathname.endsWith(id)) {
109+
refresh();
110+
}
111+
}}
112+
/>
113+
</div>
68114
</div>
69-
</>
70-
)
115+
);
116+
}
117+
118+
return (
119+
<div className="og-examples__panel">
120+
<SplitPane
121+
split='vertical'
122+
sizes={sizes}
123+
onChange={setSizes}
124+
onDragStart={handleDragStart}
125+
onDragEnd={handleDragEnd}
126+
>
127+
<Pane>
128+
<Editor examplesUrl={examplesUrl} onRun={handleRun} onRaw={handleRaw} code={exampleHtml}
129+
id={id}/>
130+
</Pane>
131+
<Frame examplesUrl={examplesUrl} code={exampleHtml} id={id}
132+
style={{"pointerEvents": drag ? "none" : ""}}/>
133+
</SplitPane>
134+
</div>
135+
);
71136
};
72137

73138
function App() {
74-
75139
const {refresh} = useExampleContext();
76-
77140
const [examples, setExamples] = useState([]);
78141
const [examplesUrl, setExamplesUrl] = useState('');
142+
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
143+
144+
useEffect(() => {
145+
const handleResize = () => {
146+
setIsMobile(window.innerWidth <= 768);
147+
};
148+
149+
window.addEventListener('resize', handleResize);
150+
return () => window.removeEventListener('resize', handleResize);
151+
}, []);
79152

80153
const fetchData = useCallback(async () => {
81154
try {
@@ -99,17 +172,21 @@ function App() {
99172
fetchConfig();
100173
}, [fetchConfig]);
101174

102-
return (<Router>
103-
<List examples={examples} onClick={(id) => {
104-
if (window.location.pathname.endsWith(id)) {
105-
refresh();
106-
}
107-
}}/>
108-
<Routes>
109-
<Route path="/" element={<ExampleDetail examplesUrl={examplesUrl}/>}/>
110-
<Route path="/examples/:id" element={<ExampleDetail examplesUrl={examplesUrl}/>}/>
111-
</Routes>
112-
</Router>);
175+
return (
176+
<Router>
177+
{!isMobile && (
178+
<List examples={examples} onClick={(id) => {
179+
if (window.location.pathname.endsWith(id)) {
180+
refresh();
181+
}
182+
}}/>
183+
)}
184+
<Routes>
185+
<Route path="/" element={<ExampleDetail examplesUrl={examplesUrl} examples={examples} refresh={refresh}/>}/>
186+
<Route path="/examples/:id" element={<ExampleDetail examplesUrl={examplesUrl} examples={examples} refresh={refresh}/>}/>
187+
</Routes>
188+
</Router>
189+
);
113190
}
114191

115192
export default App;

‎src/components/List.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@
33
display: flex;
44
flex-direction: column;
55
background-color: var(--black);
6+
position: relative;
7+
height: 100%;
68
}
79

810
.og-sandbox_examples .mb-3 {
911
padding: 0 18px 0px 14px;
1012
}
1113

1214
.og-sandbox_list {
13-
width: 300px;
1415
height: 100%;
1516
overflow: auto;
1617
overflow-x: hidden;
1718
position: relative;
1819
float: left;
20+
padding: 2px;
1921
}
2022

2123
.og-sandbox_list a {

‎src/components/List.jsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
import "./List.css";
22
import {useState} from "react";
3-
import {NavLink} from 'react-router-dom';
3+
import {NavLink, useNavigate} from 'react-router-dom';
44
import Button from 'react-bootstrap/Button';
55
import Form from 'react-bootstrap/Form';
66

77
function List({examples, onClick}) {
8-
8+
const navigate = useNavigate();
99
const [filter, setFilter] = useState('');
1010

1111
const examplesLinks = examples.filter((example) => {
1212
return filter.length === 0 || example.label.toLowerCase().includes(filter.toLowerCase());
1313
}).map((example) => {
1414
return (
15-
<NavLink to={`examples/${example.id}`} key={example.id}>
16-
<Button variant="light" onClick={() => {
17-
onClick(example.id);
18-
}}>{example.label}</Button>
15+
<NavLink to={`/examples/${example.id}`} key={example.id}>
16+
<Button
17+
variant="light"
18+
onClick={() => {
19+
onClick(example.id);
20+
}}
21+
>
22+
{example.label}
23+
</Button>
1924
</NavLink>
2025
)
2126
});

0 commit comments

Comments
 (0)