Phase 1: Responsive tables and Tailwind CSS standardization
- Added responsive table styles with mobile card layouts to base.html - Converted all templates from Bootstrap/plain CSS to Tailwind CSS - Implemented responsive tables with horizontal scroll on desktop - Added mobile card layouts for better readability on small screens - Standardized form layouts with Tailwind responsive grid - Updated all 15 templates for consistent styling: * base.html (responsive table CSS) * index.html (responsive tables + mobile cards) * students.html (Bootstrap -> Tailwind) * student_detail.html (Bootstrap -> Tailwind) * add_student.html (Bootstrap -> Tailwind) * edit_student.html (Bootstrap -> Tailwind) * import_students.html (Bootstrap -> Tailwind) * loan_tablet.html (Bootstrap -> Tailwind) * history.html (plain CSS -> Tailwind) * non_loanable_devices.html (plain CSS -> Tailwind) * add_non_loanable_device.html (plain CSS -> Tailwind) * edit_non_loanable_device.html (plain CSS -> Tailwind) * add_tablet.html (plain CSS -> Tailwind) * add_user.html (plain CSS -> Tailwind) * project_management.html (plain CSS -> Tailwind)
This commit is contained in:
ijuanes
parent
1b28021134
commit
06da5bdf2f
15 changed files with 1766 additions and 1229 deletions
|
|
@ -3,84 +3,101 @@
|
|||
{% block title %}{{ gettext('Loan Tablet') }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<h1 class="page-title">{{ gettext('Loan Tablet') }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ gettext('Loan Information') }}</h5>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
{# Page Header #}
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">{{ gettext('Loan Tablet') }}</h1>
|
||||
<p class="text-gray-600 mt-1">{{ gettext('Loan a tablet to a user or student') }}</p>
|
||||
</div>
|
||||
|
||||
{# Loan Form #}
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div class="bg-cobalt-600 px-6 py-4">
|
||||
<h2 class="text-lg font-semibold text-white">{{ gettext('Loan Information') }}</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form method="POST" action="/loan_tablet" class="space-y-6">
|
||||
{# Tablet Selection #}
|
||||
<div>
|
||||
<label for="tablet_id" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Tablet') }} *</label>
|
||||
<input type="text" id="tablet_search"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 mb-2"
|
||||
placeholder="{{ gettext('Search tablets (brand, model, or serial)...') }}"
|
||||
onkeyup="filterDropdown('tablet_search', 'tablet_id')">
|
||||
<select id="tablet_id" name="tablet_id" required size="5"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
|
||||
style="max-height: 200px; overflow-y: auto;">
|
||||
<option value="">{{ gettext('Select a tablet') }}</option>
|
||||
{% for tablet in available_tablets %}
|
||||
<option value="{{ tablet.id }}"
|
||||
data-search="{{ tablet.brand|lower }} {{ tablet.model|lower }} {{ tablet.serial_number|lower }}">
|
||||
{{ tablet.brand }} {{ tablet.model }} ({{ tablet.serial_number }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ gettext('Select which tablet to loan') }}</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="/loan_tablet">
|
||||
|
||||
<!-- Tablet Selection -->
|
||||
<div class="mb-3">
|
||||
<label for="tablet_id" class="form-label">{{ gettext('Tablet') }} *</label>
|
||||
<input type="text" id="tablet_search" class="form-control mb-2"
|
||||
placeholder="{{ gettext('Search tablets (brand, model, or serial)...') }}"
|
||||
onkeyup="filterDropdown('tablet_search', 'tablet_id')">
|
||||
<select id="tablet_id" name="tablet_id" class="form-select" required size="5">
|
||||
<option value="">{{ gettext('Select a tablet') }}</option>
|
||||
{% for tablet in available_tablets %}
|
||||
<option value="{{ tablet.id }}"
|
||||
data-search="{{ tablet.brand|lower }} {{ tablet.model|lower }} {{ tablet.serial_number|lower }}">
|
||||
{{ tablet.brand }} {{ tablet.model }} ({{ tablet.serial_number }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-text">{{ gettext('Select which tablet to loan') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- User Selection (Staff) -->
|
||||
<div class="mb-3">
|
||||
<label for="user_id" class="form-label">{{ gettext('Staff User') }} *</label>
|
||||
<input type="text" id="user_search" class="form-control mb-2"
|
||||
placeholder="{{ gettext('Search users (name or ID)...') }}"
|
||||
onkeyup="filterDropdown('user_search', 'user_id')">
|
||||
<select id="user_id" name="user_id" class="form-select" required size="5">
|
||||
<option value="">{{ gettext('Select a user') }}</option>
|
||||
{% for user in users %}
|
||||
<option value="{{ user.id }}"
|
||||
data-search="{{ user.name|lower }} {{ user.identification|lower }}">
|
||||
{{ user.name }} ({{ user.identification }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-text">{{ gettext('Select the staff member processing the loan') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Student Selection (Optional) -->
|
||||
<div class="mb-3">
|
||||
<label for="student_id" class="form-label">{{ gettext('Student (Optional)') }}</label>
|
||||
<input type="text" id="student_search" class="form-control mb-2"
|
||||
placeholder="{{ gettext('Search students (name, CIAL, or NIF)...') }}"
|
||||
onkeyup="filterDropdown('student_search', 'student_id')">
|
||||
<select id="student_id" name="student_id" class="form-select" size="5">
|
||||
<option value="">{{ gettext('Select a student (optional)') }}</option>
|
||||
{% for student in students %}
|
||||
<option value="{{ student.id }}"
|
||||
data-search="{{ student.last_name|lower }} {{ student.first_name|lower }} {{ student.cial_code|lower }} {{ student.nif_nie_passport|lower }}">
|
||||
{{ student.last_name }}, {{ student.first_name }} ({{ student.cial_code }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-text">{{ gettext('Optionally associate this loan with a student') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<a href="/" class="btn btn-secondary">
|
||||
<i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-circle"></i> {{ gettext('Loan Tablet') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{# User Selection (Staff) #}
|
||||
<div>
|
||||
<label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Staff User') }} *</label>
|
||||
<input type="text" id="user_search"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 mb-2"
|
||||
placeholder="{{ gettext('Search users (name or ID)...') }}"
|
||||
onkeyup="filterDropdown('user_search', 'user_id')">
|
||||
<select id="user_id" name="user_id" required size="5"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
|
||||
style="max-height: 200px; overflow-y: auto;">
|
||||
<option value="">{{ gettext('Select a user') }}</option>
|
||||
{% for user in users %}
|
||||
<option value="{{ user.id }}"
|
||||
data-search="{{ user.name|lower }} {{ user.identification|lower }}">
|
||||
{{ user.name }} ({{ user.identification }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ gettext('Select the staff member processing the loan') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Student Selection (Optional) #}
|
||||
<div>
|
||||
<label for="student_id" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Student (Optional)') }}</label>
|
||||
<input type="text" id="student_search"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 mb-2"
|
||||
placeholder="{{ gettext('Search students (name, CIAL, or NIF)...') }}"
|
||||
onkeyup="filterDropdown('student_search', 'student_id')">
|
||||
<select id="student_id" name="student_id" size="5"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
|
||||
style="max-height: 200px; overflow-y: auto;">
|
||||
<option value="">{{ gettext('Select a student (optional)') }}</option>
|
||||
{% for student in students %}
|
||||
<option value="{{ student.id }}"
|
||||
data-search="{{ student.last_name|lower }} {{ student.first_name|lower }} {{ student.cial_code|lower }} {{ student.nif_nie_passport|lower }}">
|
||||
{{ student.last_name }}, {{ student.first_name }} ({{ student.cial_code }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ gettext('Optionally associate this loan with a student') }}</p>
|
||||
</div>
|
||||
|
||||
{# Form Actions #}
|
||||
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
|
||||
<a href="/"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
{{ gettext('Cancel') }}
|
||||
</a>
|
||||
<button type="submit"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
{{ gettext('Loan Tablet') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,12 +119,4 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
select[size] {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue