danamir/asuinventory
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adapt all pages for mobile (Galaxy S10, 360px)

Browse Source 
- Remove min-width: 580px from body — was forcing horizontal scroll
- Reduce container padding to px-2 on mobile
- Fix .inv width (was 400px fixed, now auto)
- Add @media (max-width: 575.98px) block: smaller card margins,
  font sizes, full-width forms and select bars
- Audit/owner/admin/inspection forms: col-auto → col-12 col-sm-auto
- Inspection stats: col-md-3 → col-6 col-md-3 (2x2 grid on mobile)
- Inspection action buttons: d-flex flex-wrap gap-2
- Home search input: flex-grow-1 to fill available width
- aud-select-bar: stacks vertically on mobile
- Bump cache-busting version for styles.css and app.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-05-19 14:48:56 +03:00
parent 68a8865dc6
commit 73ce68b071
2 changed files with 105 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>АСУ Инвентаризация</title>
<link rel="stylesheet" href="/app/bootstrap.min.css" />
<link rel="stylesheet" href="/app/styles.css" />
<link rel="stylesheet" href="/app/styles.css?v=2" />
</head>
<body>
<header class="no-print">
@@ -63,7 +63,7 @@
</nav>
</div>
<div class="container-fluid px-4">
<div class="container-fluid px-2 px-md-4">
<!-- Главная страница -->
<div v-if="view==='home'">
@@ -72,7 +72,7 @@
<div class="card-body">
<form @submit.prevent="doHomeSearch">
<div class="d-flex align-items-center gap-2">
<input type="text" class="form-control w-auto" v-model="homeSearch" placeholder="инвентарный номер" />
<input type="text" class="form-control flex-grow-1" v-model="homeSearch" placeholder="инвентарный номер" />
<button class="btn btn-primary" type="submit">Найти</button>
</div>
</form>
@@ -163,9 +163,9 @@
<div class="card-body">
<h3 class="card-title no-print">Оборудование по аудитории</h3>
<h2 class="print-only print-title">{{ printTitle }}</h2>
<div class="mb-2 d-flex align-items-center justify-content-center gap-2 no-print">
<div class="mb-2 d-flex align-items-center justify-content-center gap-2 no-print aud-select-bar">
<label for="aud-select" class="mb-0">Аудитория:</label>
<select id="aud-select" class="form-select w-auto" v-model="selectedAudId">
<select id="aud-select" class="form-select" style="max-width:220px;" v-model="selectedAudId">
<option value="">— выберите аудиторию —</option>
<option v-for="a in auditories" :key="a.id" :value="a.id">{{ a.audnazvanie }}</option>
</select>
@@ -264,16 +264,16 @@
<div v-else>
<h5 class="mt-2">Создать пользователя-админа</h5>
<div class="row g-2 align-items-end">
<div class="col-auto">
<div class="col-12 col-sm-auto">
<label class="form-label">Логин</label>
<input class="form-control" v-model="newAdminUsername" placeholder="username" />
</div>
<div class="col-auto">
<div class="col-12 col-sm-auto">
<label class="form-label">Пароль</label>
<input type="password" class="form-control" v-model="newAdminPassword" placeholder="password" />
</div>
<div class="col-auto">
<button class="btn btn-success" @click="createAdmin">Создать админа</button>
<div class="col-12 col-sm-auto">
<button class="btn btn-success w-100" @click="createAdmin">Создать админа</button>
</div>
</div>
<div class="status mt-2" :class="{error: !!error}">{{ status }}</div>
@@ -311,12 +311,12 @@
<div v-else>
<h5 class="mt-2">Добавить аудиторию</h5>
<div class="row g-2 align-items-end">
<div class="col-auto">
<div class="col-12 col-sm-auto">
<label class="form-label">Название аудитории</label>
<input class="form-control" v-model="newAudName" placeholder="например, 519" />
</div>
<div class="col-auto">
<button class="btn btn-success" @click="createAuditory">Добавить</button>
<div class="col-12 col-sm-auto">
<button class="btn btn-success w-100" @click="createAuditory">Добавить</button>
</div>
</div>
<div class="status mt-2" :class="{error: !!error}">{{ status }}</div>
@@ -351,12 +351,12 @@
<div v-else>
<h5 class="mt-2">Добавить владельца</h5>
<div class="row g-2 align-items-end">
<div class="col-auto">
<div class="col-12 col-sm-auto">
<label class="form-label">Имя владельца</label>
<input class="form-control" v-model="newOwnerName" placeholder="например, Иванов И.И." />
</div>
<div class="col-auto">
<button class="btn btn-success" @click="createOwner">Добавить</button>
<div class="col-12 col-sm-auto">
<button class="btn btn-success w-100" @click="createOwner">Добавить</button>
</div>
</div>
<div class="status mt-2" :class="{error: !!error}">{{ status }}</div>
@@ -580,15 +580,15 @@
<div v-if="!activeInspection">
<h5>Начать новую проверку</h5>
<div class="row g-2 align-items-end mb-3">
<div class="col-auto">
<div class="col-12 col-sm-auto">
<label class="form-label">Аудитория (необязательно)</label>
<select class="form-select" v-model="inspectionAudId">
<option value="">— Всё оборудование —</option>
<option v-for="a in auditories" :key="a.id" :value="a.id">{{ a.audnazvanie }}</option>
</select>
</div>
<div class="col-auto">
<button class="btn btn-success" @click="startInspection">Начать проверку</button>
<div class="col-12 col-sm-auto">
<button class="btn btn-success w-100" @click="startInspection">Начать проверку</button>
</div>
</div>
@@ -631,36 +631,36 @@
</div>
<!-- Статистика прогресса -->
<div class="row mb-3">
<div class="col-md-3">
<div class="card text-center">
<div class="card-body">
<div class="row mb-3 g-2">
<div class="col-6 col-md-3">
<div class="card text-center h-100">
<div class="card-body py-2">
<h5 class="card-title">{{ inspectionStats.total_checked }}</h5>
<p class="card-text">Проверено</p>
<p class="card-text small">Проверено</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center">
<div class="card-body">
<div class="col-6 col-md-3">
<div class="card text-center h-100">
<div class="card-body py-2">
<h5 class="card-title">{{ inspectionStats.total_expected }}</h5>
<p class="card-text">Всего</p>
<p class="card-text small">Всего</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center">
<div class="card-body">
<div class="col-6 col-md-3">
<div class="card text-center h-100">
<div class="card-body py-2">
<h5 class="card-title">{{ inspectionStats.total_unknown }}</h5>
<p class="card-text">Не найдено</p>
<p class="card-text small">Не найдено</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center bg-success text-white">
<div class="card-body">
<div class="col-6 col-md-3">
<div class="card text-center h-100 bg-success text-white">
<div class="card-body py-2">
<h5 class="card-title">{{ inspectionStats.progress_percent }}%</h5>
<p class="card-text">Прогресс</p>
<p class="card-text small">Прогресс</p>
</div>
</div>
</div>
@@ -689,9 +689,9 @@
</div>
<!-- Кнопки действий -->
<div class="mt-3 mb-4">
<button class="btn btn-primary me-2" @click="refreshInspectionData">Обновить данные</button>
<button class="btn btn-success me-2" @click="completeInspection">Завершить проверку</button>
<div class="d-flex flex-wrap gap-2 mt-3 mb-4">
<button class="btn btn-primary" @click="refreshInspectionData">Обновить данные</button>
<button class="btn btn-success" @click="completeInspection">Завершить проверку</button>
<button class="btn btn-secondary" @click="cancelInspection">Отменить</button>
</div>
@@ -735,6 +735,6 @@
<script src="/app/vue.global.prod.js"></script>
<script src="/app/bootstrap.bundle.min.js"></script>
<script src="/app/app.js?v=2" defer></script>
<script src="/app/app.js?v=3" defer></script>
</body>
</html>

68
frontend/styles.css
View File

@@ -5,7 +5,7 @@
body {
background-color: #E2F3FD;
min-width: 580px;
min-width: 0;
}
.row {
@@ -125,7 +125,8 @@ td.inv-col, th.inv-col {
}
.inv {
width: 400px;
width: auto;
min-width: 80px;
}
.rasp {
@@ -158,6 +159,69 @@ td.inv-col, th.inv-col {
width: 200px;
}
@media (max-width: 575.98px) {
header h1 {
font-size: 1.2rem;
}
.container-fluid {
padding-left: 8px !important;
padding-right: 8px !important;
}
.card {
margin: 4px;
border-radius: 10px;
}
.rasp {
width: auto;
max-width: 120px;
}
.table td, .table th {
font-size: 12px;
padding: 4px 3px;
}
.aud-select-bar {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
.aud-select-bar label {
margin-bottom: 4px;
}
.aud-select-bar select,
.aud-select-bar .btn {
width: 100% !important;
max-width: 100% !important;
}
.form-row-mobile {
flex-direction: column !important;
}
.form-row-mobile .col-auto,
.form-row-mobile [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
}
.btn-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn-bar .btn {
flex: 1 1 auto;
margin: 0 !important;
}
}
@media print {
* {
font-family: "Times New Roman", Times, serif;