Browse Source

fix(admin): sticky фильтры — скролл только списка через layout

neyrogovnarik 1 week ago
parent
commit
765b788d87
2 changed files with 15 additions and 18 deletions
  1. 3 5
      frontend/src/app/admin/page.tsx
  2. 12 13
      frontend/src/app/admin/users/page.tsx

+ 3 - 5
frontend/src/app/admin/page.tsx

@@ -104,15 +104,14 @@ export default function AdminModerationPage() {
   }
 
   return (
-    <div className="min-h-screen pt-20">
-      <div className="mx-auto max-w-3xl px-4">
+      <div className="mx-auto max-w-3xl px-4 pb-8">
         <h1 className="mb-6 text-2xl font-bold text-white">Модерация</h1>
 
         {actionMsg && (
           <p className="mb-4 rounded-lg bg-green-500/10 px-4 py-2 text-sm text-green-400">{actionMsg}</p>
         )}
 
-        <div className="mb-6 flex flex-wrap gap-2">
+        <div className="sticky top-6 z-10 -mx-4 mb-6 bg-[#0f172a] px-4 pb-3 pt-3 flex flex-wrap gap-2">
           {FILTERS.map((f) => (
             <button key={f.key} onClick={() => { setFilter(f.key); setActionMsg('') }}
               className={`rounded-lg px-4 py-2 text-sm transition ${
@@ -129,7 +128,7 @@ export default function AdminModerationPage() {
         ) : places.length === 0 ? (
           <p className="text-white/40">Нет мест</p>
         ) : (
-          <div className="max-h-[calc(100vh-17rem)] space-y-4 overflow-y-auto pb-8 pr-1">
+          <div className="space-y-4 pb-8 pr-1">
           {places.map((place) => (
             <div key={place.id} className="rounded-lg border border-white/10 bg-white/5 p-4">
               <div className="mb-2 flex items-center gap-3">
@@ -221,6 +220,5 @@ export default function AdminModerationPage() {
           </div>
         </Modal>
       )}
-    </div>
   )
 }

+ 12 - 13
frontend/src/app/admin/users/page.tsx

@@ -117,17 +117,16 @@ export default function AdminUsersPage() {
   if (loading) return <p className="text-white/60">Загрузка...</p>
 
   return (
-    <div className="min-h-screen pt-20">
-      <div className="mx-auto max-w-3xl px-4">
-        <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-white">Управление пользователями</h1>
-        <button onClick={() => setShowCreate(true)}
-          className="rounded-lg bg-green-600 px-4 py-2 text-sm text-white hover:bg-green-500 transition"
-        >+ Создать</button>
-      </div>
-      {msg && <p className="mb-4 rounded-lg bg-blue-500/10 px-4 py-2 text-sm text-blue-400">{msg}</p>}
-
-      <div className="mb-4 flex flex-wrap gap-2">
+      <div className="mx-auto max-w-3xl px-4 pb-8">
+        <div className="sticky top-6 z-10 -mx-4 mb-6 bg-[#0f172a] px-4 pb-3">
+          <div className="flex items-center justify-between pt-3">
+            <h1 className="text-2xl font-bold text-white">Управление пользователями</h1>
+            <button onClick={() => setShowCreate(true)}
+              className="rounded-lg bg-green-600 px-4 py-2 text-sm text-white hover:bg-green-500 transition"
+            >+ Создать</button>
+          </div>
+          {msg && <p className="mt-3 rounded-lg bg-blue-500/10 px-4 py-2 text-sm text-blue-400">{msg}</p>}
+          <div className="mt-3 flex flex-wrap gap-2">
         {['', 'customer', 'landlord', 'executor', 'moderator'].map((r) => (
           <button key={r} onClick={() => setRoleFilter(r)}
             className={`rounded-lg px-3 py-1.5 text-sm transition ${
@@ -138,10 +137,11 @@ export default function AdminUsersPage() {
           </button>
         ))}
       </div>
+        </div>
 
       {(() => {
         return (
-          <div className="max-h-[calc(100vh-17rem)] space-y-2 overflow-y-auto pb-8 pr-1">
+          <div className="space-y-2 pb-8 pr-1">
             {users.map((user) => {
               const isSelf = user.id === currentUser?.id
 
@@ -195,6 +195,5 @@ export default function AdminUsersPage() {
       {showCreate && (
         <CreateUserModal onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); setMsg('Пользователь создан'); fetchUsers() }} />
       )}
-    </div>
   )
 }