update

Rodoro · Oct 5, 2024 · ec30406 · ec30406
1 parent 74fceff
commit ec30406
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 51 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -17,6 +17,10 @@ const nextConfig = {
                 protocol: 'https',
                 hostname: 'avatars.steamstatic.com',
             },
+            {
+                protocol: 'https',
+                hostname: 'lh3.googleusercontent.com',
+            },
         ]
     }
 };

diff --git a/src/app/admin/(sections)/games/page.tsx b/src/app/admin/(sections)/games/page.tsx
@@ -58,8 +58,8 @@ const GamesPage = () => {
     ]
 
     return (
-        <div style={{ height: loading ? 400 : games.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
-            <div className = "flex justify-end">
+        <div style={{ height: loading ? 400 : games.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
+            <div className = "flex justify-end mb-6">
                 <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
                     <p className='mr-[10px]'>Exit</p>
                     <FaDoorOpen className=''/>

diff --git a/src/app/admin/(sections)/items/page.tsx b/src/app/admin/(sections)/items/page.tsx
@@ -54,7 +54,7 @@ const ItemsPage = () => {
     ];
 
     return (
-        <div style={{ height: loading ? 400 : items.length === 0 ? 400 : 'auto', width: '100%' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+        <div style={{ height: loading ? 400 : items.length === 0 ? 400 : 'auto', width: '100%' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
             <div className = "flex justify-end">
                 <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
                     <p className='mr-[10px]'>Exit</p>

diff --git a/src/app/admin/(sections)/loot-cases/page.tsx b/src/app/admin/(sections)/loot-cases/page.tsx
@@ -88,10 +88,10 @@ const columns = [
     { key: "isVisible" as keyof LootCases, label: "Is Visible"}, 
 ];
     return (
-        <div style={{ height: loading ? 400 : loots.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+        <div style={{ height: loading ? 400 : loots.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
         <div className = "flex justify-between">
-            <Button2 className="px-2 mb-6" onClick={() => router.push("/admin/batches/create")}>+ Create Loot case</Button2>
-            <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+            <Button2 className="px-2 mb-6 max-md:w-full" onClick={() => router.push("/admin/batches/create")}>+ Create Loot case</Button2>
+            <Button className='max-md:hidden ' onClick={() => { authService.logout(); window.location.reload(); }}>
                 <p className='mr-[10px]'>Exit</p>
                 <FaDoorOpen className=''/>
             </Button>

diff --git a/src/app/admin/(sections)/staff/page.tsx b/src/app/admin/(sections)/staff/page.tsx
@@ -38,7 +38,7 @@ const StafsPage = () => {
     ];
 
     return (
-        <div style={{ height: loading ? 400 : stafs.length === 0 ? 400 : 'auto' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+        <div style={{ height: loading ? 400 : stafs.length === 0 ? 400 : 'auto' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
             <div className = "flex justify-end">
                 <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
                     <p className='mr-[10px]'>Exit</p>

diff --git a/src/app/admin/(sections)/users/page.tsx b/src/app/admin/(sections)/users/page.tsx
@@ -38,7 +38,7 @@ const UsersPage = () => {
     ];
 
     return (
-        <div style={{ height: users.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-32 md:mt-8 mb-8">
+        <div style={{ height: users.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
             <div className = "flex justify-end">
                 <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
                     <p className='mr-[10px]'>Exit</p>

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -22,22 +22,21 @@ export default function DashboardLayout({
     //     router.replace("/login");
     // }
 
-    const [isNavVisible, setIsNavVisible] = useState(false); // Изначально Nav скрыт
-    const toggleNavbar = () => setIsNavVisible((prev) => !prev); // Функция для переключения Nav
+    const [isNavVisible, setIsNavVisible] = useState(false); 
+    const toggleNavbar = () => setIsNavVisible((prev) => !prev);  
 
     useEffect(() => {
         const handleResize = () => {
             if (window.innerWidth > 768) {
-                setIsNavVisible(true); // Показываем Navbar при ширине больше 768px
+                setIsNavVisible(true); 
             } else {
-                setIsNavVisible(false); // Скрываем Navbar при меньшей ширине
+                setIsNavVisible(false); 
             }
         };
 
-        handleResize(); // Установить значение при первом рендере
-
-        window.addEventListener('resize', handleResize); // Добавляем слушатель изменения размера окна
-        return () => window.removeEventListener('resize', handleResize); // Удаляем слушатель при размонтировании
+        handleResize(); 
+        window.addEventListener('resize', handleResize); 
+        return () => window.removeEventListener('resize', handleResize); 
     }, []);
 
     return (

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -8,6 +8,12 @@ import { BsListNested } from "react-icons/bs";
 const page = () => {
     return (
         <div className="flex flex-row xl:justify-end m-6 mt-20 md:mt-8">
+            <div className = "flex justify-end">
+                <Button className='max-md:hidden' onClick={() => { authService.logout(); window.location.reload(); }}>
+                    <p className='mr-[10px]'>Exit</p>
+                    <FaDoorOpen className=''/>
+                </Button>
+            </div>
         </div>
     )
 }

diff --git a/src/containers/admin/DataGrid.tsx b/src/containers/admin/DataGrid.tsx
@@ -6,7 +6,7 @@ import { RxCross2 } from "react-icons/rx";
 import { IoCheckmarkSharp } from "react-icons/io5";
 import ChooseRows from '@/components/interface/admin/ChooseRows';
 import Select from '@/components/interface/admin/Select';
-
+import Image from 'next/image'
 
 type DataRow = { 
     [key: string]: any; 
@@ -96,27 +96,27 @@ const DataGrid = <T extends DataRow>({ data, columns }: DataGridProps<T>) => {
 
     return (
         <div className="space-y-2 ">
-        <div className="overflow-hidden"> {/* Добавляем overflow-hidden */}
+        <div className="overflow-hidden"> 
             <div className='grid' style={{
                 gridTemplateColumns: `repeat(${columns.length + 1}, 1fr)`,
                 gridTemplateRows: `repeat(${displayedData.length + 1}, 1fr)`,
             }}>
-                <div className={`h-[60px] flex items-center pl-[12px] mb-[10px] rounded-l-[15px] bg-[#7E50FF33]`}>
+                <div className={`h-[60px] flex items-center pl-[12px] mb-[10px] rounded-l-[15px] bg-[#1B1E4F] border-l-[1px] border-[#3A3269] border-b-[1px] border-t-[1px]`}>
                     <Select onChange={handleSelectAll} />
                 </div>
 
                 {columns.map(({ key, label }, colIndex) => (
                     <div
                         key={key.toString()}
-                        className={`h-[60px] flex items-center mb-[10px] bg-[#7E50FF33] ${colIndex === columns.length - 1 ? 'rounded-r-[15px]' : ''}`}
+                        className={`h-[60px] flex items-center mb-[10px] bg-[#1B1E4F] border-b-[1px] border-t-[1px] border-[#3A3269] ${colIndex === columns.length - 1 ? 'rounded-r-[15px] border-r-[1px] border-[#3A3269] border-b-[1px] border-t-[1px]' : ''}`}
                     >
                         {label}
                     </div>
                 ))}
 
                 {displayedData.map((row, rowIndex) => (
                     <React.Fragment key={row.id}>
-                        <div className={`h-[60px] flex items-center mb-[10px] pl-[12px] ${rowIndex === displayedData.length - 1 ? 'rounded-bl-[15px]' : ''} rounded-l-[15px] ${selectedRows.has(row.id) ? 'bg-[#7E50FF33]' : ''}`}>
+                        <div className={`h-[60px] flex items-center mb-[10px] pl-[12px] ${rowIndex === displayedData.length - 1 ? 'rounded-l-[15px] ' : ''}  border-[#3A3269] ${selectedRows.has(row.id) ? 'bg-[#7E50FF33]' : ''}`}>
                             <Select
                                 checked={selectedRows.has(row.id)}
                                 onChange={() => handleSelectRow(row.id)}
@@ -130,9 +130,9 @@ const DataGrid = <T extends DataRow>({ data, columns }: DataGridProps<T>) => {
                                 {key === 'imageUrl' ? (
                                     <img
                                         src={row[key].replace(/ /g, '%20')}
-                                        alt={row.title} // или любое другое значение, отвечающее за название
-                                        style={{ width: '50px', height: '50px', objectFit: 'cover' }} // меняйте размеры, по необходимости
-                                        onError={(e) => { e.currentTarget.src = 'fallback-image-url'; }} // замените на своего URL
+                                        alt={row.title} 
+                                        style={{ width: '50px', height: '50px', objectFit: 'cover' }} 
+                                        onError={(e) => { e.currentTarget.src = 'fallback-image-url'; }}
                                     />
                                 ) : (
                                     typeof row[key] === 'boolean' ? (
@@ -153,38 +153,40 @@ const DataGrid = <T extends DataRow>({ data, columns }: DataGridProps<T>) => {
                 ))}
             </div>
         </div>
-        <div className='h-[1px] w-[100%] bg-[#aabcf977]'></div>
-            <div className="flex justify-between items-center h-[32px] my-[20px]">
-                <div className="text-[#AABCF9] ml-[40px] py-[3px]">
+        <div className='h-[1px] w-full bg-[#aabcf977]'></div>
+            <div className="flex justify-between items-center h-[32px] my-[20px] w-full">
+                <div className="max-sm:hidden text-[#AABCF9] ml-[40px] py-[3px]">
                     {data.length} rows selected
                 </div>
-                <div className="flex items-center mr-[40px]">
+                <div className="flex sm:items-center max-sm:justify-between max-sm:w-full ">
                     <div className="flex items-center mr-[25px]">
                         <div className="text-white mr-[10px]">Rows per page:</div>
                         <ChooseRows onChange={setRowsPerPage} />
                     </div>
-                    <button
-                        onClick={() => handlePageChange(currentPage - 1)}
-                        disabled={currentPage === 1}
-                        className="text-white inline-flex items-center justify-center"
-                    >
-                        <IoIosArrowBack />
-                    </button>
-                    <div className="cursor-pointer inline-flex items-center justify-center ml-[15px] mr-[15px] text-white w-[32px] h-[32px] bg-[#7E50FF] shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] rounded-lg text-center">
-                        {currentPage}
-                    </div>
-                    {totalPages > 1 && (
-                    <div className="cursor-pointer inline-flex items-center justify-center w-[32px] h-[32px] text-white rounded-lg text-center bg-[#22276E99] mr-[15px]">
-                        ...
+                    <div >
+                        <button
+                            onClick={() => handlePageChange(currentPage - 1)}
+                            disabled={currentPage === 1}
+                            className="text-white inline-flex items-center justify-center"
+                        >
+                            <IoIosArrowBack />
+                        </button>
+                        <div className="cursor-pointer inline-flex items-center justify-center ml-[15px] mr-[15px] text-white w-[32px] h-[32px] bg-[#7E50FF] shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] rounded-lg text-center">
+                            {currentPage}
+                        </div>
+                        {totalPages > 1 && (
+                        <div className="cursor-pointer inline-flex items-center justify-center w-[32px] h-[32px] text-white rounded-lg text-center bg-[#22276E99] mr-[15px]">
+                            ...
+                        </div>
+                        )}
+                        <button
+                            onClick={() => handlePageChange(currentPage + 1)}
+                            disabled={currentPage === totalPages}
+                            className="text-white inline-flex items-center justify-center"
+                        >
+                            <IoIosArrowForward />
+                        </button>
                     </div>
-                    )}
-                    <button
-                        onClick={() => handlePageChange(currentPage + 1)}
-                        disabled={currentPage === totalPages}
-                        className="text-white inline-flex items-center justify-center"
-                    >
-                        <IoIosArrowForward />
-                    </button>
                 </div>
             </div>
         </div>

diff --git a/src/containers/admin/Navbar.tsx b/src/containers/admin/Navbar.tsx
@@ -50,7 +50,7 @@ const Navbar: React.FC<NavbarProps> = ({ isVisible, onClose, className }) => {
         >
             <div className='flex justify-between items-center mb-[40px] max-md:hidden'>
                 <Link href="/">
-                    <img
+                    <Image
                         src='/img/interface/nav/logo+text.png'
                         alt="Логотип"
                         width={180}
@@ -59,7 +59,7 @@ const Navbar: React.FC<NavbarProps> = ({ isVisible, onClose, className }) => {
                 </Link>
             </div>
             <div className='md:hidden flex justify-between mb-[50px]'>
-                <div><img src='/img/interface/nav/logo.png' alt="Логотип" width={'39px'} height={'41px'}/></div>
+                <div><Image src='/img/interface/nav/logo.png' alt="Логотип" width={39} height={41}/></div>
                 <div>
                     <button onClick={onClose}>
                         <RxCross2 className='text-white text-[32px]' />