26b77cf0e9
- Add overflow-x: hidden to body to prevent horizontal scroll on zoom - Add overflow: hidden to .container to prevent margin overflow - Ensure .nav a has flex: 1 1 auto and min-width: 120px for proper wrapping - Fixes issue where navigation buttons overflow through right margin when zoomed in This ensures the navigation bar wraps properly and doesn't cause horizontal scrolling or overflow issues on any screen size or zoom level.
331 lines
8.5 KiB
HTML
331 lines
8.5 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;
|
|
overflow-x: hidden; /* Prevent horizontal overflow on zoom */
|
|
}
|
|
.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;
|
|
overflow: hidden; /* Prevent horizontal overflow */
|
|
}
|
|
|
|
/* Navigation - stack vertically on mobile */
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nav a {
|
|
padding: 0.75rem 1rem;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
flex: 1 1 auto;
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
</style>
|
|
</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>
|