style: Improve filter table header layout and styling
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m40s

This commit is contained in:
2025-11-13 16:49:48 +07:00
parent 9b36b7c4f6
commit afa1049f1f
+34 -26
View File
@@ -1007,33 +1007,41 @@ function FilterManager() {
{selectedServer && ( {selectedServer && (
<div className="card"> <div className="card">
<div className="card-header"> <div className="card-header">
<h3 className="card-title"> <div className="row align-items-center">
<IconFilter className="me-2" /> <div className="col">
Фильтры сервера: {selectedServer.name} <h3 className="card-title mb-1">
<span className="badge bg-blue-lt text-blue ms-2"> <IconFilter size={20} className="me-2" />
{serverFilters.length} Фильтры сервера: {selectedServer.name}
</span> </h3>
</h3> <div className="text-muted">
<div className="card-actions"> <span className="badge bg-blue-lt text-blue">
<div className="input-icon me-2"> {serverFilters.length} {serverFilters.length === 1 ? 'фильтр' : serverFilters.length > 1 && serverFilters.length < 5 ? 'фильтра' : 'фильтров'}
<input </span>
type="text" </div>
className="form-control" </div>
placeholder="Поиск фильтров..." <div className="col-auto">
value={filterSearch} <div className="d-flex gap-2">
onChange={(e) => setFilterSearch(e.target.value)} <div className="input-icon" style={{ minWidth: '280px' }}>
/> <input
<span className="input-icon-addon"> type="text"
<IconSearch /> className="form-control"
</span> placeholder="Поиск фильтров..."
value={filterSearch}
onChange={(e) => setFilterSearch(e.target.value)}
/>
<span className="input-icon-addon">
<IconSearch size={18} />
</span>
</div>
<button
className="btn btn-primary"
onClick={() => setAddFilterModalOpen(true)}
>
<IconPlus className="icon me-1" />
Добавить фильтр
</button>
</div>
</div> </div>
<button
className="btn btn-primary"
onClick={() => setAddFilterModalOpen(true)}
>
<IconPlus className="icon" />
Добавить фильтр
</button>
</div> </div>
</div> </div>
<div className="card-body"> <div className="card-body">