mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-03-05 21:00:08 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add mobile layout change

Browse source
This commit is contained in:
Sacha Weatherstone 2021-12-24 21:41:56 +11:00
parent e92b73d1d8
commit 564890a93e
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/pages/showcase/_components/Network.tsx
View file

@ -25,14 +25,8 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
fetcher fetcher
).data; ).data;
return true ? ( return (
<PlaceholderNetwork />
) : (
<div> <div>
<a className="button button--outline button--secondary" href="/showcase">
Back
</a>
{data && !error ? ( {data && !error ? (
<div className="container"> <div className="container">
<h1>{data.title}</h1> <h1>{data.title}</h1>
@ -127,7 +121,7 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
<JSONPretty data={error} /> <JSONPretty data={error} />
</div> </div>
)} )}
{!data && <div>Loading...</div>} {!data && <PlaceholderNetwork />}
</div> </div>
)} )}
</div> </div>
@ -136,10 +130,17 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
export const PlaceholderNetwork = (): JSX.Element => { export const PlaceholderNetwork = (): JSX.Element => {
return ( return (
<div className="container" style={{ display: "flex", gap: "2rem" }}> <div
className="container"
style={{
display: "flex",
flexDirection: window.innerWidth > 768 ? "row" : "column",
gap: "2rem",
}}
>
<div <div
style={{ style={{
width: "60%", width: window.innerWidth > 768 ? "60%" : "100%",
}} }}
> >
<div <div
@ -208,7 +209,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
</div> </div>
<div <div
style={{ style={{
width: "40%", width: window.innerWidth > 768 ? "40%" : "100%",
}} }}
> >
<div <div