denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update FilterManager layout to utilize a grid system for server display, enhancing visual organization and responsiveness of server cards.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m4s
Details

Browse Source
This commit is contained in:
denozord
2025-12-06 22:59:43 +07:00
parent c84d4367b1
commit 6f1f8b368e
1 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+40 -40
View File
@@ -985,54 +985,54 @@ function FilterManager() {
</div> </div>
</div> </div>
{/* Горизонтальный список серверов */} {/* Список серверов в сетке Tabler */}
<div className="d-flex flex-wrap gap-2 mb-2"> <div className="row row-cards g-2 mb-2">
{activeServers.map(server => ( {activeServers.map(server => (
<div <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={server.id}>
key={server.id} <div
className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`} className={`card card-sm h-100 cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
style={{ minWidth: '220px', maxWidth: '260px' }} onClick={() => setSelectedServer(server)}
onClick={() => setSelectedServer(server)} >
> <div className="card-body d-flex align-items-start gap-2">
<div className="card-body d-flex align-items-start gap-2"> <span className="avatar bg-primary-lt">
<span className="avatar bg-primary-lt"> <IconServer size={16} />
<IconServer size={16} /> </span>
</span> <div className="flex-grow-1">
<div className="flex-grow-1"> <div className="d-flex align-items-center gap-2">
<div className="d-flex align-items-center gap-2"> <div className="fw-bold text-truncate" title={server.name}>{server.name}</div>
<div className="fw-bold text-truncate" title={server.name}>{server.name}</div> <span className="badge bg-green-lt text-green">Активен</span>
<span className="badge bg-green-lt text-green">Активен</span>
</div>
{server.description && (
<div className="text-muted small text-truncate" title={server.description}>
{server.description}
</div> </div>
)} {server.description && (
<div className="text-muted small text-truncate" title={server.description}>
{server.description}
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
))} ))}
{inactiveServers.map(server => ( {inactiveServers.map(server => (
<div <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={server.id}>
key={server.id} <div
className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`} className={`card card-sm h-100 cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
style={{ minWidth: '220px', maxWidth: '260px' }} onClick={() => setSelectedServer(server)}
onClick={() => setSelectedServer(server)} >
> <div className="card-body d-flex align-items-start gap-2">
<div className="card-body d-flex align-items-start gap-2"> <span className="avatar bg-secondary-lt">
<span className="avatar bg-secondary-lt"> <IconServer size={16} />
<IconServer size={16} /> </span>
</span> <div className="flex-grow-1">
<div className="flex-grow-1"> <div className="d-flex align-items-center gap-2">
<div className="d-flex align-items-center gap-2"> <div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div>
<div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div> <span className="badge bg-secondary-lt text-secondary">Выкл</span>
<span className="badge bg-secondary-lt text-secondary">Выкл</span>
</div>
{server.description && (
<div className="text-muted small text-truncate" title={server.description}>
{server.description}
</div> </div>
)} {server.description && (
<div className="text-muted small text-truncate" title={server.description}>
{server.description}
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>