Fix mobile responsiveness

Performave · Sep 15, 2022 · ce583a7 · ce583a7
1 parent 5a12dca
commit ce583a7
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/frontend/src/components/Benchmarks.tsx b/frontend/src/components/Benchmarks.tsx
@@ -12,7 +12,15 @@ interface Progress {
 
 const Benchmarks = () => {
   const [testRunning, setTestRunning] = useState<boolean>(false)
-  const [bytesPerSecond, setBytesPerSecond] = useState<number>(0)
+  const [bpsHistory, setBpsHistory] = useState<number[]>([])
+  const bytesPerSecond = useMemo(() => {
+      // get largest number in bps bpsHistory
+      let largest = 0
+      for (let i = 0; i < bpsHistory.length; i++) {
+        if (bpsHistory[i] > largest) largest = bpsHistory[i]
+      }
+      return largest
+  }, [bpsHistory])
   const [latency, setLatency] = useState<number>(0)
 
   const calculateGraph = (): number => {
@@ -66,7 +74,7 @@ const Benchmarks = () => {
 
   const handleBenchmark = async () => {
     setTestRunning(true)
-    setBytesPerSecond(0)
+    setBpsHistory([])
 
     let time = performance.now()
     await http.get('/benchmark/latency')
@@ -94,7 +102,13 @@ const Benchmarks = () => {
           let topDiff = delta.size - x.size
           let bottomDiff = delta.time - x.time
 
-          setBytesPerSecond(topDiff / bottomDiff)
+          setBpsHistory((old) => {
+            let newHistory = [...old, topDiff / bottomDiff]
+            // only keep last 10 values
+            if (newHistory.length > 10) newHistory.shift()
+
+            return newHistory
+          })
         }
 
         if (progressEvent.loaded === progressEvent.total) setTestRunning(false)
@@ -107,7 +121,7 @@ const Benchmarks = () => {
       <div className='content'>
         <h3 className='subheading'>Benchmarks</h3>
         <Card className='flex flex-col items-center mt-4'>
-          <div className='grid grid-cols-2 gap-4 place-items-center'>
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 place-items-center'>
             <div className='grid place-items-center'>
               <div className='absolute text-center'>
                 <p className='text-4xl font-bold'>{humanSize}</p>
@@ -158,7 +172,7 @@ const Benchmarks = () => {
               </div>
             </div>
           </div>
-          <div className='flex space-x-2'>
+          <div className='flex items-center flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 mt-2 sm:mt-0'>
             <Button
               className='text-center flex'
               onClick={handleBenchmark}
@@ -174,6 +188,7 @@ const Benchmarks = () => {
             <Button
               className='text-center flex'
               onClick={handleDownload}
+              isOutlined
             >
                500 MB Test File
             </Button>

diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
@@ -10,7 +10,7 @@ const ButtonStyle = styled.button<ButtonProps>`
   ${(props) =>
     !props.isOutlined &&
     css<ButtonProps>`
-      ${tw`hover:bg-white hover:text-black border-black bg-black text-white`}
+      ${tw`hover:bg-white hover:text-black border-black bg-black text-white active:bg-gray-200 active:text-black`}
     `}
     ${(props) =>
      props.isOutlined &&

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
@@ -33,7 +33,7 @@ const Dropdown = (props: DropdownProps) => {
         onChange={(...args) => callback(...args)}
         value={props.value}
         className={
-          'bg-white transition-colors border hover:border-neutral-700 border-neutral-300 text-sm outline-none rounded px-2.5 py-2  appearance-none ' +
+          'bg-white transition-colors border w-full hover:border-neutral-700 border-neutral-300 text-sm outline-none rounded px-2.5 py-2  appearance-none ' +
           props.className
         }
       >

diff --git a/frontend/src/components/NetworkTests.tsx b/frontend/src/components/NetworkTests.tsx
@@ -3,7 +3,7 @@ import Input from '@/components/Textbox'
 import Dropdown from '@/components/Dropdown'
 import Button from '@/components/Button'
 import { ChevronDownIcon } from '@heroicons/react/outline'
-import React, { useState } from 'react'
+import React, { FormEvent, useState } from 'react'
 import http from '@/util/http'
 import Spinner from '@/components/Spinner'
 
@@ -31,7 +31,9 @@ const NetworkTests = () => {
   const [testType, setTestType] = useState<string>('ping')
   const [runningTest, setRunningTest] = useState<boolean>(false)
 
-  const runTest = async () => {
+  const runTest = async (e: FormEvent<HTMLFormElement> ) => {
+    e.preventDefault()
+
     setRunningTest(true)
     if (testType === 'ping') {
       try {
@@ -63,26 +65,30 @@ const NetworkTests = () => {
     <div className='content'>
       <h3 className='subheading'>Network Tests</h3>
       <Card className='mt-4 space-y-4'>
-        <div className='flex space-x-2'>
-          <Input
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-            placeholder='Address'
-          ></Input>
-          <Dropdown
-            items={networkTestTypes}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setTestType(e.target.value)
-            }
-          />{' '}
-          <Button
-            className='flex items-center'
-            onClick={runTest}
-            disabled={runningTest}
-          >
-            {runningTest && <Spinner className='mr-2' />} Run
-          </Button>
-        </div>
+        <form onSubmit={runTest}>
+          <div className='flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2'>
+            <Input
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+              placeholder='Address'
+            ></Input>
+            <Dropdown
+              items={networkTestTypes}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setTestType(e.target.value)
+              }
+            />
+            <div className='grid md:block place-items-center'>
+              <Button
+                className='flex items-center h-full'
+                disabled={runningTest}
+                type='submit'
+              >
+                {runningTest && <Spinner className='mr-2' />} Run
+              </Button>
+            </div>
+          </div>
+        </form>
 
         <div
           className={`hover:bg-gray-100 transition-all border rounded ${