927c323a6e
- Add mobile-first responsive CSS to base.html - Wrap all tables in .table-container for horizontal scrolling on mobile - Add breakpoints for phones (576px), tablets (768px), desktops (992px, 1200px) - Improve mobile navigation (vertical stack) and form layouts (full-width) - Add print styles for clean printing - Update project_management.html editor for mobile - Document all changes in docs/RESPONSIVE_CSS.md No backend or JavaScript changes - pure CSS solution. For 5 internal technical users, this is simpler and more appropriate than HTMX or SPA approaches. Solves mobile accessibility issue with minimal changes.
325 lines
8.3 KiB
HTML
325 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tablet Management System</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nav a {
|
|
padding: 8px 16px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
}
|
|
.nav a:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.section {
|
|
margin-bottom: 30px;
|
|
}
|
|
.section h2 {
|
|
color: #4CAF50;
|
|
border-bottom: 2px solid #4CAF50;
|
|
padding-bottom: 5px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 10px;
|
|
}
|
|
th, td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.btn {
|
|
padding: 6px 12px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
.btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.btn-danger {
|
|
background-color: #f44336;
|
|
}
|
|
.btn-danger:hover {
|
|
background-color: #CC00CC;
|
|
}
|
|
.flash-message {
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
.flash-success {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
border: 1px solid #d6e9c6;
|
|
}
|
|
.flash-error {
|
|
background-color: #f2dede;
|
|
color: #a94442;
|
|
border: 1px solid #ebccd1;
|
|
}
|
|
form {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
input[type="text"],
|
|
input[type="email"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
textarea {
|
|
height: 100px;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN - Mobile First
|
|
Added for internal technical staff mobile access
|
|
============================================ */
|
|
|
|
/* Mobile-first base styles */
|
|
.container {
|
|
max-width: 100%;
|
|
padding: 1rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Navigation - stack vertically on mobile */
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.nav a {
|
|
padding: 0.75rem 1rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Tables - responsive with horizontal scroll */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin-top: 1rem;
|
|
}
|
|
table {
|
|
min-width: 600px;
|
|
width: 100%;
|
|
}
|
|
th, td {
|
|
padding: 0.75rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Forms - full width on mobile */
|
|
form {
|
|
max-width: 100%;
|
|
}
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Buttons - full width on mobile */
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
display: block;
|
|
}
|
|
.btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Cards for mobile display */
|
|
.tablet-card,
|
|
.user-card,
|
|
.loan-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
/* Flash messages */
|
|
.flash-message {
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Section spacing */
|
|
.section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* ============================================
|
|
BREAKPOINTS - Tablet and Desktop
|
|
============================================ */
|
|
|
|
/* Small devices (landscape phones, 576px and up) */
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
.nav {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nav a {
|
|
flex: 1 1 auto;
|
|
min-width: 120px;
|
|
}
|
|
.btn {
|
|
width: auto;
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
/* Medium devices (tablets, 768px and up) */
|
|
@media (min-width: 768px) {
|
|
body {
|
|
padding: 1rem;
|
|
}
|
|
.container {
|
|
max-width: 720px;
|
|
padding: 1.5rem;
|
|
}
|
|
table {
|
|
min-width: auto;
|
|
}
|
|
.table-container {
|
|
overflow-x: visible;
|
|
}
|
|
}
|
|
|
|
/* Large devices (desktops, 992px and up) */
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
.nav {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
/* Extra large devices (large desktops, 1200px and up) */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.nav,
|
|
.btn,
|
|
.flash-message {
|
|
display: none !important;
|
|
}
|
|
body {
|
|
background: white;
|
|
padding: 0;
|
|
}
|
|
.container {
|
|
box-shadow: none;
|
|
border: none;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Tablet Management System</h1>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="flash-message flash-{{ category }}">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="nav">
|
|
<a href="/">Home</a>
|
|
<a href="/add_tablet">Add Tablet</a>
|
|
<a href="/add_user">Add User</a>
|
|
<a href="/loan_tablet">Loan Tablet</a>
|
|
<a href="/history">Loan History</a>
|
|
<a href="/user_loans">User Loans</a>
|
|
<a href="/non_loanable_devices">Non-Loanable Devices</a>
|
|
<a href="/project_management">Project Management</a>
|
|
</div>
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</body>
|
|
</html>
|