stepus53/door-thing
1
0
Fork 0
mirror of https://github.com/usatiuk/door-thing.git synced 2025-10-26 11:17:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

A less terrible UI

Browse Source
This commit is contained in:
Stepan Usatiuk
2022-04-19 16:44:04 +02:00
parent 751f16fbab
commit 657d583b28
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
door-thing-app/src/App.tsx
View File

@@ -120,23 +120,30 @@ export function App() {
}; };
return ( return (
<div> <div class="connectionBar">
<input <div class="autoconnectSwitch">
onChange={onAutoConnectChange} Autoconnect:
checked={autoConnect} <input
type="checkbox" onChange={onAutoConnectChange}
/> checked={autoConnect}
{connecting && !device && <span>Trying to connect</span>} type="checkbox"
{device == null && !connecting && ( />
<button onClick={tryConnect}>Connect</button> </div>
)} <div class="connectionStatus">
{device && ( {connecting && !device && <span>Trying to connect</span>}
<> {device == null && !connecting && (
<span>connected</span> <button onClick={tryConnect}>Connect</button>
<button onClick={onDisconnectClick}>Disconnect</button> )}
{doorOpen != null && <span>{doorOpen ? "open" : "closed"}</span>} {device && (
</> <>
)} <span>Connected </span>
<button onClick={onDisconnectClick}>Disconnect</button>
</>
)}
</div>
<div>
{doorOpen != null && <span>Door: {doorOpen ? "open" : "closed"}</span>}
</div>
</div> </div>
); );
} }

19
door-thing-app/src/index.css
View File

@@ -1,7 +1,24 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif; Arial, sans-serif;
margin: auto; margin: auto;
max-width: 38rem; max-width: 38rem;
padding: 2rem; padding: 2rem;
} }
.connectionBar {
display: flex;
flex-wrap: wrap;
}
.autoconnectSwitch {
width: 100%;
}
.connectionStatus {
width: 100%;
}
.connectionBar >* {
height: 2rem;
}