Fovway/time-tracking-eltex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Интерфейс оптимизирован для мобильных устройств

Browse Source
This commit is contained in:
Fovway 2025-10-12 14:36:09 +07:00
parent f40ff5f248
commit 8a2e95b82e
8 changed files with 88 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/index.html
View File

@ -4,10 +4,15 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" /> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>Неучтенное время</title> <title>Неучтенное время</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

8
frontend/src/App.css
View File

@ -42,3 +42,11 @@
.read-the-docs { .read-the-docs {
color: #888; color: #888;
} }
/* Мобильная оптимизация */
@media (max-width: 767.98px) {
.container-fluid {
margin-top: 0 !important;
padding-top: 1rem;
}
}

2
frontend/src/components/AdminPage.jsx
View File

@ -2,7 +2,7 @@ import AdminPanel from "./AdminPanel";
const AdminPage = () => { const AdminPage = () => {
return ( return (
<div className="container-fluid px-3" style={{ marginTop: "2rem" }}> <div className="container-fluid px-0" style={{ marginTop: "2rem" }}>
<AdminPanel /> <AdminPanel />
</div> </div>
); );

46
frontend/src/components/AdminPanel.jsx
View File

@ -154,14 +154,14 @@ const AdminPanel = () => {
}; };
return ( return (
<div className="w-100 mt-5"> <div className="w-100 mt-5 px-0">
<h3>Админ панель</h3> <h3>Админ панель</h3>
<div className="mb-3"> <div className="mb-3 d-flex gap-2 flex-column flex-lg-row">
<Link to="/" className="btn btn-primary me-2"> <Link to="/" className="btn btn-primary">
Перейти в дешборд Перейти в дешборд
</Link> </Link>
<button <button
className="btn btn-success me-2" className="btn btn-success"
onClick={() => setShowCreateForm(true)} onClick={() => setShowCreateForm(true)}
> >
Создать пользователя Создать пользователя
@ -257,24 +257,26 @@ const AdminPanel = () => {
: "Пользователь"} : "Пользователь"}
</td> </td>
<td> <td>
<button <div className="d-flex gap-1 flex-column flex-lg-row">
className="btn btn-sm btn-warning me-2" <button
onClick={() => setResetPasswordId(user.id)} className="btn btn-sm btn-warning"
> onClick={() => setResetPasswordId(user.id)}
Сбросить пароль >
</button> Сбросить пароль
<button </button>
className="btn btn-sm btn-success me-2" <button
onClick={() => handleExportUser(user.id, user.username)} className="btn btn-sm btn-success"
> onClick={() => handleExportUser(user.id, user.username)}
Экспорт >
</button> Экспорт
<button </button>
className="btn btn-sm btn-danger" <button
onClick={() => setDeleteUserId(user.id)} className="btn btn-sm btn-danger"
> onClick={() => setDeleteUserId(user.id)}
Удалить >
</button> Удалить
</button>
</div>
</td> </td>
</tr> </tr>
))} ))}

14
frontend/src/components/Dashboard.jsx
View File

@ -100,17 +100,17 @@ const Dashboard = () => {
} }
return ( return (
<div className="w-100 dashboard-container"> <div className="w-100 dashboard-container px-0">
<div className="d-flex justify-content-between align-items-center mb-4"> <div className="d-flex justify-content-between align-items-center mb-4 flex-column flex-lg-row">
<h2>Добро пожаловать, {user.username}!</h2> <h2 className="mb-3 mb-lg-0">Добро пожаловать, {user.username}!</h2>
<div> <div className="d-flex flex-column flex-lg-row gap-2">
{user.role === "admin" && ( {user.role === "admin" && (
<Link to="/admin" className="btn btn-secondary me-2"> <Link to="/admin" className="btn btn-secondary">
Админ панель Админ панель
</Link> </Link>
)} )}
{user.role === "manager" && ( {user.role === "manager" && (
<Link to="/manager" className="btn btn-secondary me-2"> <Link to="/manager" className="btn btn-secondary">
Менеджер панель Менеджер панель
</Link> </Link>
)} )}
@ -120,7 +120,7 @@ const Dashboard = () => {
</div> </div>
</div> </div>
<div className="mb-4 d-flex gap-2"> <div className="mb-4 d-flex gap-2 flex-column flex-lg-row">
<button className="btn btn-primary" onClick={() => setShowModal(true)}> <button className="btn btn-primary" onClick={() => setShowModal(true)}>
Добавить запись о неучтенном времени Добавить запись о неучтенном времени
</button> </button>

2
frontend/src/components/ManagerPage.jsx
View File

@ -2,7 +2,7 @@ import ManagerPanel from "./ManagerPanel";
const ManagerPage = () => { const ManagerPage = () => {
return ( return (
<div className="container-fluid px-3" style={{ marginTop: "2rem" }}> <div className="container-fluid px-0" style={{ marginTop: "2rem" }}>
<ManagerPanel /> <ManagerPanel />
</div> </div>
); );

46
frontend/src/components/ManagerPanel.jsx
View File

@ -154,14 +154,14 @@ const ManagerPanel = () => {
}; };
return ( return (
<div className="w-100 mt-5"> <div className="w-100 mt-5 px-0">
<h3>Менеджер панель</h3> <h3>Менеджер панель</h3>
<div className="mb-3"> <div className="mb-3 d-flex gap-2 flex-column flex-lg-row">
<Link to="/" className="btn btn-primary me-2"> <Link to="/" className="btn btn-primary">
Перейти в дешборд Перейти в дешборд
</Link> </Link>
<button <button
className="btn btn-success me-2" className="btn btn-success"
onClick={() => setShowCreateForm(true)} onClick={() => setShowCreateForm(true)}
> >
Создать пользователя Создать пользователя
@ -256,24 +256,26 @@ const ManagerPanel = () => {
: "Пользователь"} : "Пользователь"}
</td> </td>
<td> <td>
<button <div className="d-flex gap-1 flex-column flex-lg-row">
className="btn btn-sm btn-warning me-2" <button
onClick={() => setResetPasswordId(user.id)} className="btn btn-sm btn-warning"
> onClick={() => setResetPasswordId(user.id)}
Сбросить пароль >
</button> Сбросить пароль
<button </button>
className="btn btn-sm btn-success me-2" <button
onClick={() => handleExportUser(user.id, user.username)} className="btn btn-sm btn-success"
> onClick={() => handleExportUser(user.id, user.username)}
Экспорт >
</button> Экспорт
<button </button>
className="btn btn-sm btn-danger" <button
onClick={() => setDeleteUserId(user.id)} className="btn btn-sm btn-danger"
> onClick={() => setDeleteUserId(user.id)}
Удалить >
</button> Удалить
</button>
</div>
</td> </td>
</tr> </tr>
))} ))}

34
frontend/src/components/TimeEntriesTable.jsx
View File

@ -18,22 +18,24 @@ const TimeEntriesTable = ({ entries, onDelete, onEdit, isManager = false }) => {
<td>{entry.hours}</td> <td>{entry.hours}</td>
{!isManager && ( {!isManager && (
<td> <td>
{onEdit && ( <div className="d-flex gap-1 flex-column flex-lg-row">
<button {onEdit && (
className="btn btn-sm btn-primary me-2" <button
onClick={() => onEdit(entry)} className="btn btn-sm btn-primary"
> onClick={() => onEdit(entry)}
Редактировать >
</button> Редактировать
)} </button>
{onDelete && ( )}
<button {onDelete && (
className="btn btn-sm btn-danger" <button
onClick={() => onDelete(entry.id)} className="btn btn-sm btn-danger"
> onClick={() => onDelete(entry.id)}
Удалить >
</button> Удалить
)} </button>
)}
</div>
</td> </td>
)} )}
</tr> </tr>