Skip to content

Commit ae705fb

Browse files
ryuheechulryuheechul
committed
Optimize the visual for CIDR by reversing the vertical
1 parent 8593ebd commit ae705fb

File tree

8 files changed

+141
-130
lines changed

8 files changed

+141
-130
lines changed

‎src/components/CIDR.svelte‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,22 @@ Visualize CIDR
6262
</IPv4>
6363
</div>
6464

65-
<IPv4Chart
66-
{min}
67-
{max}
68-
{length}
69-
{prefix}
70-
bind:address
71-
{network}
72-
{mask}
73-
{broadcast}
74-
{hosts}
75-
{renderedHosts}
76-
{renderedAddress}
77-
{renderedMin}
78-
{renderedMax}
79-
{renderedBroadcast}
80-
{renderedNetwork}
81-
/>
65+
<div class="lt-sm:px-1 mt-2">
66+
<IPv4Chart
67+
{min}
68+
{max}
69+
{length}
70+
{prefix}
71+
bind:address
72+
{network}
73+
{mask}
74+
{broadcast}
75+
{hosts}
76+
{renderedHosts}
77+
{renderedAddress}
78+
{renderedMin}
79+
{renderedMax}
80+
{renderedBroadcast}
81+
{renderedNetwork}
82+
/>
83+
</div>

‎src/components/blend/BitHex.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ A combination of bit and hexadecimal together
88

99
<script lang="ts">
1010
export let colReverse = false;
11+
export let noMargin = false;
1112
export let compact = false;
1213
export let integer = 42;
1314
export let minLength = 0;
@@ -22,7 +23,7 @@ A combination of bit and hexadecimal together
2223

2324
<!-- safe list class="flex flex-col-reverse my-0.5" -->
2425
<div class:flex={colReverse} class:flex-col-reverse={colReverse}>
25-
<div class="flex my-0.5">
26+
<div class="flex" class:my-0.5={!noMargin}>
2627
<div class="grow" />
2728
<Bits
2829
bind:integer
@@ -35,7 +36,7 @@ A combination of bit and hexadecimal together
3536
{octetBorder}
3637
/>
3738
</div>
38-
<div class="flex" class:my-0.5={!colReverse}>
39+
<div class="flex" class:my-0.5={!colReverse && !noMargin}>
3940
<div class="grow" />
4041
<Digits
4142
bind:integer

‎src/components/blend/IPv4.svelte‎

Lines changed: 73 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -31,38 +31,54 @@ Represent IPv4 address including prefix notation
3131
$: addresses = calcHosts(prefix) + 2;
3232
</script>
3333

34-
<div class="flex lt-sm:overflow-x-auto">
34+
<!-- for xs only -->
35+
<div class="sm:hidden items-end mb-2 flex">
3536
<div class="grow" />
36-
<div>
37-
<slot name="extra-bits" />
38-
<div class="relative">
39-
<div class="absolute w-full h-full rounded-b overflow-clip z--10">
40-
<div class="h-full bg-gray-200" style:width={`${(prefix / 32) * 100}%`} />
41-
</div>
42-
<div class="mix-blend-multiply">
43-
<div class="text-gray-600">
44-
<BitHex
45-
bind:integer={address}
46-
colReverse={true}
47-
minLength={length}
48-
maxLength={length}
49-
borderOctal={false}
50-
borderHex={true}
51-
compact={true}
52-
octetBorder={true}
53-
/>
54-
</div>
37+
<div class="flex text-2xl lt-xs:text-lg mr-2 items-center">
38+
<div>
39+
<div class="flex">
40+
{#each octets as octet, idx}
41+
<div class="flex-1 flex group mt-1">
42+
<div class="group-first:hidden font-bold z-10">.</div>
43+
<InputNumberLocaled
44+
{min}
45+
{max}
46+
strictRangeOnInput={true}
47+
class="text-center w-12 lt-xs:w-8 input-number-hide-arrows bg-gray-100 rounded font-mono"
48+
value={octet}
49+
on:change={(e) => onChange(idx, e)}
50+
/>
51+
</div>
52+
{/each}
5553
</div>
5654
</div>
55+
<div class="mx-3 lt-xs:mx-1 text-base">/</div>
56+
<div>
57+
<InputNumberLocaled
58+
min={0}
59+
max={31}
60+
strictRangeOnInput={true}
61+
class="text-center w-8 mt-1 bg-gray-100 rounded input-number-hide-arrows font-mono"
62+
bind:value={prefix}
63+
/>
64+
</div>
65+
</div>
66+
<IPv4Prefix bind:integer={prefix} hideHeader={false} />
67+
<div class="grow" />
68+
</div>
69+
<!-- main -->
70+
<div class="flex lt-sm:overflow-x-auto px-2 mx--2">
71+
<div class="grow" />
72+
<div>
5773
<div class="flex lt-sm:hidden">
5874
{#each octets as octet, idx}
59-
<div class="flex-1 flex group text-2xl mt-1 relative">
75+
<div class="flex-1 flex group text-2xl mb-2 relative">
6076
<!-- adding max-w-[[n]rem] for Firefox -->
6177
<InputNumberLocaled
6278
{min}
6379
{max}
6480
strictRangeOnInput={true}
65-
class="text-center w-full max-w-[7.4rem] input-number-hide-arrows bg-gray-50 rounded mx-1"
81+
class="text-center w-full max-w-[7.4rem] input-number-hide-arrows bg-gray-50 rounded mx-1 font-mono"
6682
value={octet}
6783
on:change={(e) => onChange(idx, e)}
6884
/>
@@ -72,18 +88,47 @@ Represent IPv4 address including prefix notation
7288
</div>
7389
{/each}
7490
</div>
91+
<div class="relative">
92+
<div class="absolute w-full h-full rounded-t overflow-clip z--10">
93+
<div class="h-full bg-gray-200" style:width={`${(prefix / 32) * 100}%`} />
94+
</div>
95+
<div class="mix-blend-multiply">
96+
<div class="text-gray-600">
97+
<BitHex
98+
bind:integer={address}
99+
noMargin={true}
100+
minLength={length}
101+
maxLength={length}
102+
borderOctal={false}
103+
borderHex={true}
104+
compact={true}
105+
octetBorder={true}
106+
/>
107+
</div>
108+
</div>
109+
</div>
110+
<slot name="extra-bits" />
75111
</div>
76-
<div class="flex flex-col mx-2 text-2xl">
77-
<div class="grow" />
112+
<div class="flex flex-col mx-2 text-2xl lt-sm:hidden">
78113
<div class="lt-sm:text-base sm:translate-x--0.8 lt-sm:mb-1 lt-sm:font-bold">/</div>
114+
<div class="grow" />
79115
</div>
80-
<div class="flex flex-col">
81-
<div class="py-0.5 flex flex-col grow text-gray-600">
116+
<div class="flex flex-col lt-sm:hidden">
117+
<div class="lt-sm:hidden mb-2">
118+
<InputNumberLocaled
119+
min={0}
120+
max={31}
121+
strictRangeOnInput={true}
122+
class="text-center text-2xl w-20 bg-gray-50 rounded input-number-hide-arrows font-mono"
123+
bind:value={prefix}
124+
/>
125+
</div>
126+
<div class="flex flex-col grow text-gray-600">
82127
<div class="grow text-center flex flex-col">
83-
<div class="grow" />
128+
<IPv4Prefix bind:integer={prefix} />
84129
<!-- safe list class="text-sm text-xs ![font-size:0.6rem]" -->
85130
<div
86-
class="leading-3"
131+
class="leading-3 mt-1.5"
87132
class:text-sm={addresses > 99999}
88133
class:text-xs={addresses > 99999999}
89134
class:![font-size:0.6rem]={addresses > 999999999}
@@ -92,51 +137,7 @@ Represent IPv4 address including prefix notation
92137
</div>
93138
<div><small>addresses</small></div>
94139
</div>
95-
<div>
96-
<IPv4Prefix bind:integer={prefix} />
97-
</div>
98140
</div>
99-
<div class="lt-sm:hidden">
100-
<InputNumberLocaled
101-
min={0}
102-
max={31}
103-
strictRangeOnInput={true}
104-
class="text-center text-2xl w-20 mt-1 bg-gray-50 rounded input-number-hide-arrows"
105-
bind:value={prefix}
106-
/>
107-
</div>
108-
</div>
109-
<div class="grow" />
110-
</div>
111-
<!-- for xs only -->
112-
<div class="flex text-2xl lt-xs:text-lg sm:hidden items-center">
113-
<div class="grow" />
114-
<div>
115-
<div class="flex">
116-
{#each octets as octet, idx}
117-
<div class="flex-1 flex group mt-1">
118-
<div class="group-first:hidden font-bold z-10">.</div>
119-
<InputNumberLocaled
120-
{min}
121-
{max}
122-
strictRangeOnInput={true}
123-
class="text-center w-12 lt-xs:w-8 input-number-hide-arrows bg-gray-100 rounded"
124-
value={octet}
125-
on:change={(e) => onChange(idx, e)}
126-
/>
127-
</div>
128-
{/each}
129-
</div>
130-
</div>
131-
<div class="mx-3 lt-xs:mx-1 text-base">/</div>
132-
<div>
133-
<InputNumberLocaled
134-
min={0}
135-
max={31}
136-
strictRangeOnInput={true}
137-
class="text-center w-8 mt-1 bg-gray-100 rounded"
138-
bind:value={prefix}
139-
/>
140141
</div>
141142
<div class="grow" />
142143
</div>

‎src/components/blend/IPv4Network.svelte‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -55,27 +55,8 @@ to augment IPv4 with Network and Netmask visualization
5555
}
5656
</script>
5757

58-
<small class="mx-2 text-gray-600">
59-
<pre class="text-gray-400 inline-block">IP & Netmask = </pre>
60-
<pre class="inline-block">Network: {renderedNetwork}</pre>
61-
</small>
62-
<Bits
63-
hideHeader={true}
64-
integer={network}
65-
multipleOf={length}
66-
maxLength={length}
67-
borderOctal={false}
68-
borderHex={true}
69-
compact={true}
70-
octetBorder={true}
71-
on:update={onUpdateForNetwork}
72-
disabledBits={~mask >>> 0}
73-
/>
74-
<small>
75-
<pre class="mx-2 text-gray-400">Netmask: {renderedMask}</pre>
76-
</small>
7758
<div class="relative">
78-
<div class="absolute w-full h-full rounded-t overflow-clip z--10">
59+
<div class="absolute w-full h-full rounded-b overflow-clip z--10">
7960
<div class="h-full bg-gray-200" style:width={`${(prefix / 32) * 100}%`} />
8061
</div>
8162
<div class="mix-blend-multiply">
@@ -94,3 +75,24 @@ to augment IPv4 with Network and Netmask visualization
9475
/>
9576
</div>
9677
</div>
78+
<small class="absolute mt-0.6">
79+
<pre class="mx-2 text-gray-400">Netmask: {renderedMask}</pre>
80+
</small>
81+
<small class="opacity-0">placeholder</small>
82+
<Bits
83+
hideHeader={true}
84+
integer={network}
85+
multipleOf={length}
86+
maxLength={length}
87+
borderOctal={false}
88+
borderHex={true}
89+
compact={true}
90+
octetBorder={true}
91+
on:update={onUpdateForNetwork}
92+
disabledBits={~mask >>> 0}
93+
/>
94+
<small class="mx-2 text-gray-600 absolute mt-0.6">
95+
<pre class="text-gray-400 inline-block">IP & Netmask = </pre>
96+
<pre class="inline-block text-cyan">Network: {renderedNetwork}</pre>
97+
</small>
98+
<small class="opacity-0">placeholder</small>

‎src/components/blend/IPv4Prefix.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ for CIDR network prefix
99

1010
<script lang="ts">
1111
export let integer = 16;
12+
export let hideHeader = false;
1213
</script>
1314

1415
<div>
@@ -20,5 +21,6 @@ for CIDR network prefix
2021
borderHex={false}
2122
compact={true}
2223
powered={true}
24+
{hideHeader}
2325
/>
2426
</div>

‎src/components/blend/SubPixel.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ Visualize a sub pixel with 8 bits
5050
borderOctal={false}
5151
borderHex={false}
5252
overrideCellBg={`${tint.color}50`}
53+
noMargin={true}
5354
/>
5455
</div>
5556
</div>
@@ -74,7 +75,7 @@ Visualize a sub pixel with 8 bits
7475
{min}
7576
{max}
7677
bind:value={integerInput}
77-
class="focus:outline-none w-17 px-2 bg-transparent"
78+
class="focus:outline-none w-17 px-2 bg-transparent font-mono"
7879
/>
7980
</div>
8081
<div class="grow" />

0 commit comments

Comments
 (0)