hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile nav & minor tweaks

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-20 00:21:41 +11:00
parent 8933e840f3
commit 03dc086246
4 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Connection.tsx
+3 -3
View File
@@ -56,8 +56,8 @@ export const Connection = (): JSX.Element => {
dispatch(closeConnectionModal()); dispatch(closeConnectionModal());
}} }}
> >
<div className="flex max-w-3xl flex-grow gap-4"> <div className="flex max-w-3xl flex-col gap-4 md:flex-row">
<div className="w-1/2"> <div className="md:w-1/2">
<div className="space-y-2"> <div className="space-y-2">
<Select <Select
label="Connection Method" label="Connection Method"
@@ -97,7 +97,7 @@ export const Connection = (): JSX.Element => {
)} )}
</div> </div>
</div> </div>
<div className="w-1/2"> <div className="md:w-1/2">
<div className="h-96 overflow-y-auto rounded-md bg-gray-200 p-2 dark:bg-secondaryDark dark:text-gray-400"> <div className="h-96 overflow-y-auto rounded-md bg-gray-200 p-2 dark:bg-secondaryDark dark:text-gray-400">
{state.logs {state.logs
.filter((log) => { .filter((log) => {
src/components/connection/BLE.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { FiCheck } from 'react-icons/fi'; import { FiArrowRightCircle } from 'react-icons/fi';
import { Button } from '@components/generic/button/Button'; import { Button } from '@components/generic/button/Button';
import { IconButton } from '@components/generic/button/IconButton'; import { IconButton } from '@components/generic/button/IconButton';
@@ -41,7 +41,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
await setConnection(connType.BLE); await setConnection(connType.BLE);
}} }}
className="flex justify-between rounded-md bg-gray-700 p-2" className="flex justify-between rounded-md bg-gray-700 p-2 dark:text-white"
key={index} key={index}
> >
<div className="my-auto">{device.name}</div> <div className="my-auto">{device.name}</div>
@@ -49,7 +49,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
await setConnection(connType.BLE); await setConnection(connType.BLE);
}} }}
icon={<FiCheck />} icon={<FiArrowRightCircle />}
disabled={connecting} disabled={connecting}
/> />
</div> </div>
src/components/connection/Serial.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { FiCheck } from 'react-icons/fi'; import { FiArrowRightCircle } from 'react-icons/fi';
import { Button } from '@components/generic/button/Button'; import { Button } from '@components/generic/button/Button';
import { IconButton } from '@components/generic/button/IconButton'; import { IconButton } from '@components/generic/button/IconButton';
@@ -41,7 +41,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
{serialDevices.length > 0 ? ( {serialDevices.length > 0 ? (
serialDevices.map((device, index) => ( serialDevices.map((device, index) => (
<div <div
className="flex justify-between rounded-md bg-secondaryDark p-2" className="flex justify-between rounded-md bg-secondaryDark p-2 dark:text-white"
key={index} key={index}
> >
<div className="my-auto flex gap-4"> <div className="my-auto flex gap-4">
@@ -65,7 +65,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
await setConnection(connType.SERIAL); await setConnection(connType.SERIAL);
}} }}
disabled={connecting} disabled={connecting}
icon={<FiCheck />} icon={<FiArrowRightCircle />}
/> />
</div> </div>
)) ))
src/pages/Nodes/NodeCard.tsx
+22 -17
View File
@@ -129,23 +129,28 @@ export const NodeCard = ({
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection title="Location" icon={<FiMapPin />}> <CollapsibleSection title="Location" icon={<FiMapPin />}>
<> <>
{node.currentPosition && ( <div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
<div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 "> {node.currentPosition ? (
<div className="my-auto px-1"> <>
{(node.currentPosition.latitudeI / 1e7).toPrecision(6)},&nbsp; <div className="my-auto px-1">
{(node.currentPosition?.longitudeI / 1e7).toPrecision(6)} {(node.currentPosition.latitudeI / 1e7).toPrecision(6)}
</div> ,&nbsp;
<CopyButton {(node.currentPosition?.longitudeI / 1e7).toPrecision(6)}
data={ </div>
node.currentPosition <CopyButton
? `${node.currentPosition.latitudeI / 1e7},${ data={
node.currentPosition.longitudeI / 1e7 node.currentPosition
}` ? `${node.currentPosition.latitudeI / 1e7},${
: '' node.currentPosition.longitudeI / 1e7
} }`
/> : ''
</div> }
)} />
</>
) : (
<div className="my-auto px-1">No location data received</div>
)}
</div>
</> </>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection title="Line of Sight" icon={<IoTelescope />}> <CollapsibleSection title="Line of Sight" icon={<IoTelescope />}>