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

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

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>

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;
}
}

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>
); );

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,14 +257,15 @@ const AdminPanel = () => {
: "Пользователь"} : "Пользователь"}
</td> </td>
<td> <td>
<div className="d-flex gap-1 flex-column flex-lg-row">
<button <button
className="btn btn-sm btn-warning me-2" className="btn btn-sm btn-warning"
onClick={() => setResetPasswordId(user.id)} onClick={() => setResetPasswordId(user.id)}
> >
Сбросить пароль Сбросить пароль
</button> </button>
<button <button
className="btn btn-sm btn-success me-2" className="btn btn-sm btn-success"
onClick={() => handleExportUser(user.id, user.username)} onClick={() => handleExportUser(user.id, user.username)}
> >
Экспорт Экспорт
@ -275,6 +276,7 @@ const AdminPanel = () => {
> >
Удалить Удалить
</button> </button>
</div>
</td> </td>
</tr> </tr>
))} ))}

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>

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>
); );

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,14 +256,15 @@ const ManagerPanel = () => {
: "Пользователь"} : "Пользователь"}
</td> </td>
<td> <td>
<div className="d-flex gap-1 flex-column flex-lg-row">
<button <button
className="btn btn-sm btn-warning me-2" className="btn btn-sm btn-warning"
onClick={() => setResetPasswordId(user.id)} onClick={() => setResetPasswordId(user.id)}
> >
Сбросить пароль Сбросить пароль
</button> </button>
<button <button
className="btn btn-sm btn-success me-2" className="btn btn-sm btn-success"
onClick={() => handleExportUser(user.id, user.username)} onClick={() => handleExportUser(user.id, user.username)}
> >
Экспорт Экспорт
@ -274,6 +275,7 @@ const ManagerPanel = () => {
> >
Удалить Удалить
</button> </button>
</div>
</td> </td>
</tr> </tr>
))} ))}

View File

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