lukas/WordClockESP
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

UI Usability Fixes

Browse Source 
* Fallback to sessionStorage if localStorage is absent
* Disable auto-correct and auto-capitalize on username field (SignIn)
* Fix SignIn component name
* Improve support for low screen widths

Co-authored-by: kasedy <kasedy@gmail.com>
This commit is contained in:
rjwats
2020-05-16 12:39:18 +01:00
committed by GitHub
parent a1f4e57a21
commit 7d3bbf4240
6 changed files with 84 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
interface/src/project/DemoInformation.tsx
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Typography, TableRow, TableBody, TableCell, TableHead, Table, Box } from '@material-ui/core';
import { Typography, Box, List, ListItem, ListItemText } from '@material-ui/core';
import { SectionContent } from '../components';
class DemoInformation extends Component {
@ -17,78 +17,52 @@ class DemoInformation extends Component {
simplify merges should you wish to update your project with future framework changes.
</Typography>
<Typography variant="body1" paragraph>
The demo project interface code stored in the interface/project directory:
</Typography>
<Table>
<TableHead>
<TableRow>
<TableCell>
File
</TableCell>
<TableCell>
Description
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>
ProjectMenu.tsx
</TableCell>
<TableCell>
You can add your project's screens to the side bar here.
</TableCell>
</TableRow>
<TableRow>
<TableCell>
ProjectRouting.tsx
</TableCell>
<TableCell>
The routing which controls the screens of your project.
</TableCell>
</TableRow>
<TableRow>
<TableCell>
DemoProject.tsx
</TableCell>
<TableCell>
This screen, with tabs and tab routing.
</TableCell>
</TableRow>
<TableRow>
<TableCell>
DemoInformation.tsx
</TableCell>
<TableCell>
The demo information page.
</TableCell>
</TableRow>
<TableRow>
<TableCell>
LightStateRestController.tsx
</TableCell>
<TableCell>
A form which lets the user control the LED over a REST service.
</TableCell>
</TableRow>
<TableRow>
<TableCell>
LightStateWebSocketController.tsx
</TableCell>
<TableCell>
A form which lets the user control and monitor the status of the LED over WebSockets.
</TableCell>
</TableRow>
<TableRow>
<TableCell>
LightMqttSettingsController.tsx
</TableCell>
<TableCell>
A form which lets the user change the MQTT settings for MQTT based control of the LED.
</TableCell>
</TableRow>
</TableBody>
</Table>
The demo project interface code is stored in the interface/project directory:
</Typography>
<List>
<ListItem>
<ListItemText
primary="ProjectMenu.tsx"
secondary="You can add your project's screens to the side bar here."
/>
</ListItem>
<ListItem>
<ListItemText
primary="ProjectRouting.tsx"
secondary="The routing which controls the screens of your project."
/>
</ListItem>
<ListItem>
<ListItemText
primary="DemoProject.tsx"
secondary="This screen, with tabs and tab routing."
/>
</ListItem>
<ListItem>
<ListItemText
primary="DemoInformation.tsx"
secondary="The demo information page."
/>
</ListItem>
<ListItem>
<ListItemText
primary="LightStateRestController.tsx"
secondary="A form which lets the user control the LED over a REST service."
/>
</ListItem>
<ListItem>
<ListItemText
primary="LightStateWebSocketController.tsx"
secondary="A form which lets the user control and monitor the status of the LED over WebSockets."
/>
</ListItem>
<ListItem>
<ListItemText
primary="LightMqttSettingsController.tsx"
secondary="A form which lets the user change the MQTT settings for MQTT based control of the LED."
/>
</ListItem>
</List>
<Box mt={2}>
<Typography variant="body1">
See the project <a href="https://github.com/rjwats/esp8266-react/">README</a> for a full description of the demo project.