@axium/sysadmin 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axium/sysadmin",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "author": "James Prevett <axium@jamespre.dev>",
5
5
  "description": "System administration for Axium",
6
6
  "funding": {
@@ -145,21 +145,23 @@
145
145
  <div class="component">
146
146
  <h3><Icon i="network-wired" /> {text('sysadmin.system.network')}</h3>
147
147
  {#each info.networkInterfaces as iface}
148
- <div class="line">
149
- <span class="icon-text">
148
+ <div class="net-line">
149
+ <span class="icon-text net-name">
150
150
  <Icon i={iface.wireless ? 'wifi' : 'ethernet'} />
151
151
  {iface.name}
152
152
  </span>
153
- <span class="subtle">{iface.model}</span>
154
- <span class={['net-status', iface.connected ? 'online' : 'offline']}>
155
- {iface.connected ? text('sysadmin.system.connected') : text('sysadmin.system.disconnected')}
156
- {#if iface.connection}
157
- <span class="subtle">{text('sysadmin.system.connected_to', { connection: iface.connection })}</span>
153
+ <span class="subtle net-model">{iface.model}</span>
154
+ <span class="net-state">
155
+ <span class={['net-status', iface.connected ? 'online' : 'offline']}>
156
+ {iface.connected ? text('sysadmin.system.connected') : text('sysadmin.system.disconnected')}
157
+ {#if iface.connection}
158
+ <span class="subtle">{text('sysadmin.system.connected_to', { connection: iface.connection })}</span>
159
+ {/if}
160
+ </span>
161
+ {#if iface.speed}
162
+ <span class="subtle">{speedText(iface.speed)}</span>
158
163
  {/if}
159
164
  </span>
160
- {#if iface.speed}
161
- <span class="subtle">{speedText(iface.speed)}</span>
162
- {/if}
163
165
  </div>
164
166
  {/each}
165
167
  </div>
@@ -275,6 +277,29 @@
275
277
  }
276
278
  }
277
279
 
280
+ .net-line {
281
+ display: flex;
282
+ align-items: center;
283
+ gap: 0.5em 1em;
284
+ flex-wrap: wrap;
285
+ }
286
+
287
+ .net-name {
288
+ font-weight: bold;
289
+ }
290
+
291
+ /* Push the status/speed cluster to the trailing edge; let the model take the slack. */
292
+ .net-model {
293
+ margin-right: auto;
294
+ }
295
+
296
+ .net-state {
297
+ display: inline-flex;
298
+ align-items: center;
299
+ gap: 0.35em 0.75em;
300
+ flex-wrap: wrap;
301
+ }
302
+
278
303
  dl {
279
304
  display: grid;
280
305
  grid-template-columns: max-content 1fr;
@@ -295,5 +320,9 @@
295
320
  padding: 1em;
296
321
  padding-bottom: 5em;
297
322
  }
323
+
324
+ .net-model {
325
+ flex-basis: 100%;
326
+ }
298
327
  }
299
328
  </style>