Finished switching to table

This commit is contained in:
z0ccc 2021-06-07 22:30:00 -04:00
parent a63492aa3f
commit b28764705b
3 changed files with 115 additions and 69 deletions

View file

@ -1,10 +1,10 @@
.title {
font-weight: 600;
margin: 3px 0 0 0;
}
table {
width: 100%;
margin: 0 0 6px 0;
}
tr {
@ -18,8 +18,4 @@ tr {
.flagWrap {
margin: 0 0 0 6px;
}
.loadingFlag {
display: none;
}

View file

@ -58,14 +58,15 @@ const App = () => {
return (
<div className="App">
<div className="title">Connection</div>
<table>
<col style="width:40%" />
<col style="width:60%" />
<div className="title">Connection</div>
<tr>
<td>IP address:</td>
<td>
<div id="ipAddress" />
</td>
<td>?</td>
</tr>
<tr>
<td>Country:</td>
@ -77,96 +78,145 @@ const App = () => {
</div>
</div>
</td>
<td>?</td>
</tr>
<tr>
<td>Region:</td>
<td>
<div id="region" />
</td>
<td>?</td>
</tr>
<tr>
<td>City:</td>
<td>
<div id="city" />
</td>
<td>?</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<div id="zip" />
</td>
<td>?</td>
</tr>
<tr>
<td>Provider:</td>
<td>
<div id="provider" />
</td>
<td>?</td>
</tr>
<div className="title">Software</div>
<tr>
<td>Browser:</td>
<td>
<div id="browser" />
</td>
</tr>
<tr>
<td>Browser version:</td>
<td>
<div id="browserVersion" />
</td>
</tr>
<tr>
<td>Browser engine:</td>
<td>
<div id="browserEngine" />
</td>
</tr>
<tr>
<td>Operating system:</td>
<td>
<div id="os" />
</td>
</tr>
<tr>
<td>Language:</td>
<td>
<div id="language" />
</td>
</tr>
<tr>
<td>Timezone:</td>
<td>
<div id="timezone" />
</td>
</tr>
<tr>
<td>Cookies enabled:</td>
<td>
<div id="cookies" />
</td>
</tr>
<tr>
<td>Java enabled:</td>
<td>
<div id="java" />
</td>
</tr>
<tr>
<td>DNT header enabled:</td>
<td>
<div id="dnt" />
</td>
</tr>
<div className="title">Hardware</div>
<tr>
<td>Platform:</td>
<td>
<div id="platform" />
</td>
</tr>
<tr>
<td>Screen resolution:</td>
<td>
<div id="screenSize" />
</td>
</tr>
<tr>
<td>Color Resolution:</td>
<td>
<div id="color" />
</td>
</tr>
<tr>
<td>Battery level:</td>
<td>
<div id="batteryLevel" />
</td>
</tr>
<tr>
<td>Battery status:</td>
<td>
<div id="batteryStatus" />
</td>
</tr>
<tr>
<td>Device memory:</td>
<td>
<div id="memory" />
</td>
</tr>
<tr>
<td># of CPU cores:</td>
<td>
<div id="cores" />
</td>
</tr>
<tr>
<td>WebGL vendor:</td>
<td>
<div id="vendor" />
</td>
</tr>
<tr>
<td>WebGL renderer:</td>
<td>
<div id="renderer" />
</td>
</tr>
</table>
<div className="title">Software</div>
<div className="item" id="browser">
Browser:{' '}
</div>
<div className="item" id="browserVersion">
Browser version:{' '}
</div>
<div className="item" id="browserEngine">
Browser engine:{' '}
</div>
<div className="item" id="os">
Operating system:{' '}
</div>
<div className="item" id="language">
Language:{' '}
</div>
<div className="item" id="timezone">
Timezone:{' '}
</div>
<div className="item" id="cookies">
Cookies enabled:{' '}
</div>
<div className="item" id="java">
Java enabled:{' '}
</div>
<div className="item" id="dnt">
DNT header enabled:{' '}
</div>
{/* <div className="item" id="plugins">
Plugins:{' '}
</div> */}
<div className="title">Hardware</div>
<div className="item" id="platform">
Platform:{' '}
</div>
<div className="item" id="screenSize">
Screen resolution:{' '}
</div>
<div className="item" id="color">
Color Resolution:{' '}
</div>
<div className="item" id="batteryLevel">
Battery level:{' '}
</div>
<div className="item" id="batteryStatus">
Battery status:{' '}
</div>
<div className="item" id="memory">
Device memory:{' '}
</div>
<div className="item" id="cores">
# of CPU cores:{' '}
</div>
<div className="item" id="vendor">
WebGL vendor:{' '}
</div>
<div className="item" id="renderer">
WebGL renderer:{' '}
</div>
</div>
);
};

View file

@ -8,5 +8,5 @@ body {
background-color: var(--background);
font-size: 15px;
line-height: 22px;
width: 350px;
width: 400px;
}