cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 14:39:06 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: use inline elements

Browse Source
This commit is contained in:
Carlos Valente
2025-01-24 16:12:08 +01:00
committed by Carlos Valente
parent a1d34c8f6c
commit a12694b186
26 changed files with 56 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel/client-control-panel/ClientControlPanel.module.scss
+3 -15
View File
@@ -2,23 +2,11 @@
width: 100%;
}
.actionButtons {
display: flex;
gap: $element-spacing;
.halfWidth {
width: 50%;
}
.halfWidth {
.halfWidthNoWrap {
width: 50%;
white-space: nowrap;
}
.pathList {
width: 100%;
}
.badgeList {
width: 100%;
* {
margin-right: $element-spacing;
}
}
apps/client/src/features/app-settings/panel/client-control-panel/ClientList.tsx
+10 -10
View File
@@ -52,7 +52,7 @@ export default function ClientList() {
<Panel.Table>
<thead>
<tr>
<td className={style.fullWidth}>Client Name (Connection ID)</td>
<td className={style.halfWidth}>Client Name (Connection ID)</td>
<td className={style.fullWidth}>Path</td>
<td />
</tr>
@@ -63,7 +63,7 @@ export default function ClientList() {
const isCurrent = id === key;
return (
<tr key={key}>
<td className={style.badgeList}>
<Panel.InlineElements relation='inner' as='td'>
<Badge variant='outline' size='xs'>
{key}
</Badge>
@@ -73,9 +73,9 @@ export default function ClientList() {
</Badge>
)}
{name}
</td>
<td className={style.pathList}>{path}</td>
<td className={style.actionButtons}>
</Panel.InlineElements>
<td>{path}</td>
<Panel.InlineElements relation='inner'>
<Button
size='xs'
className={`${identify ? style.blink : ''}`}
@@ -106,7 +106,7 @@ export default function ClientList() {
>
Redirect
</Button>
</td>
</Panel.InlineElements>
</tr>
);
})}
@@ -119,8 +119,8 @@ export default function ClientList() {
<Panel.Table>
<thead>
<tr>
<td className={style.halfWidth}>Client Name (Connection ID)</td>
<td className={style.halfWidth}>Client type</td>
<td className={style.halfWidthNoWrap}>Client Name (Connection ID)</td>
<td className={style.halfWidthNoWrap}>Client type</td>
</tr>
</thead>
<tbody>
@@ -129,12 +129,12 @@ export default function ClientList() {
return (
<tr key={key}>
<td className={style.badgeList}>
<Panel.InlineElements relation='inner' as='td'>
<Badge variant='outline' size='sx'>
{key}
</Badge>
{name}
</td>
</Panel.InlineElements>
<td>{type}</td>
</tr>
);