kevin/data-toolbox-site
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/data-toolbox-site.git synced 2025-05-06 13:25:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

Improve IPv4SubnettingTool styling on big screens

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-05-04 16:19:43 +02:00
parent ade100fdb8
commit 4c3162e3f5
4 changed files with 63 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "kevins-data-toolbox",
"version": "2.4.3",
"version": "2.4.4",
"private": true,
"dependencies": {
"@loadable/component": "^5.15.0",

9
src/tools/networking/ipv4subnetting/IPv4SubnettingTool.module.scss
View file

@ -21,6 +21,15 @@
}
}
.inputGrid {
display: grid;
grid-template-columns: 1fr 1fr;
@media(max-width: 800px) {
grid-template-columns: 1fr;
}
}
.combiInput {
@include boxStyle;

1
src/tools/networking/ipv4subnetting/IPv4SubnettingTool.module.scss.d.ts vendored
View file

@ -3,5 +3,6 @@ export const combiInput: string;
export const fakeField: string;
export const fakeLabel: string;
export const flexList: string;
export const inputGrid: string;
export const layoutBox: string;
export const title: string;

27
src/tools/networking/ipv4subnetting/IPv4SubnettingTool.tsx
View file

@ -228,6 +228,8 @@ const IPv4SubnettingTool = () => {
<p><Trans i18nKey={"tools.networking.ipv4subnetting.description"} components={{}} /></p>
<div className={styles.inputGrid}>
<div>
<label htmlFor="ipv4-input">{t("tools.networking.common.ipv4addr")}</label>
<div className={styles.combiInput}>
<input ref={ipInput1} id="ipv4-input" placeholder={"192"} onChange={(e) => {setIPPart1(e.currentTarget.value); if((e.currentTarget.value.length >= 3 && e.currentTarget.value.length > ipPart1.length) || e.currentTarget.value[e.currentTarget.value.length - 1] === ".") ipInput2.current?.focus()}} value={ipPart1} />
@ -240,38 +242,45 @@ const IPv4SubnettingTool = () => {
<span>/</span>
<input ref={subnetInput} id="subnet-input" placeholder={"24"} onChange={(e) => {setSubnet(e.currentTarget.value);}} value={subnet} />
</div>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.subnetMask")}</span>
<span className={styles.fakeField}>{subnetMask || subnetMask === 0 ? intToIPv4String(subnetMask) : "???"}</span>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.firstAddr")}</span>
<span className={styles.fakeField}>{firstAddr ? intToIPv4String(firstAddr) : "???"}</span>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.lastAddr")}</span>
<span className={styles.fakeField}>{lastAddr ? intToIPv4String(lastAddr) : "???"}</span>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.netAddr")}</span>
<span className={styles.fakeField}>{isPeerNet ? "n/a" : (firstAddr ? intToIPv4String(firstAddr - 1) : "???")}</span>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.broadcastAddr")}</span>
<span className={styles.fakeField}>{isPeerNet ? "n/a" : (lastAddr ? intToIPv4String(lastAddr + 1) : "???")}</span>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.ipv4addr")} ({t("tools.networking.common.binary")})</span>
<span className={styles.fakeField}>
{ipBinary || ipBinary === 0 ? ipBinary.toString(2).padStart(32, "0").split("").map((bit, index) => {
return <span style={{color: (index) >= (subnetNumber||32) ? "red" : undefined}} key={"bit"+index}>{bit}</span>
}) : "???"}
</span>
</div>
<div>
<span className={styles.fakeLabel}>{t("tools.networking.common.subnetMask")} ({t("tools.networking.common.binary")})</span>
<span className={styles.fakeField}>
{subnetMask || subnetMask === 0 ? subnetMask.toString(2).padStart(32, "0").split("").map((bit, index) => {
return <span key={"maskbit"+index}>{bit}</span>
}) : "???"}
</span>
</div>
</div>
</div>
</main>
)