diff --git a/docs/RESPONSIVE_CSS.md b/docs/RESPONSIVE_CSS.md index 36e1b4b..7b3b84f 100644 --- a/docs/RESPONSIVE_CSS.md +++ b/docs/RESPONSIVE_CSS.md @@ -4,6 +4,115 @@ Added responsive CSS to the Tablet Management System to improve mobile accessibility for internal technical staff. This addresses the issue where the interface was too wide for mobile devices. +## ⚠️ TOP PRIORITY: Spanish Translation Required + +**Status:** Not started - Documentation only +**Priority:** HIGH +**Timeline:** To be determined + +The entire user interface needs to be translated from English to Spanish. This includes: + +### Scope of Translation +- ✅ All template text (buttons, labels, headers, messages) +- ✅ Navigation links +- ✅ Form field labels and placeholders +- ✅ Button text +- ✅ Flash messages (success/error) +- ✅ Table headers +- ✅ Help text and descriptions +- ✅ Page titles + +### Files to Translate +| File | Status | Notes | +|------|--------|-------| +| `templates/base.html` | ⏳ Pending | Title, navigation, flash messages | +| `templates/index.html` | ⏳ Pending | Section headers, table headers, messages | +| `templates/add_tablet.html` | ⏳ Pending | Form labels, button | +| `templates/add_user.html` | ⏳ Pending | Form labels, button | +| `templates/loan_tablet.html` | ⏳ Pending | Form labels, button, search placeholders | +| `templates/history.html` | ⏳ Pending | Section header, table headers, messages | +| `templates/user_loans.html` | ⏳ Pending | All text content, search placeholder | +| `templates/non_loanable_devices.html` | ⏳ Pending | Section header, table headers, messages, button | +| `templates/edit_non_loanable_device.html` | ⏳ Pending | Form labels, buttons | +| `templates/project_management.html` | ⏳ Pending | All text content, buttons | + +### Approach Options + +#### Option 1: Direct Template Translation (Recommended for simplicity) +- Replace all English text with Spanish directly in templates +- **Pros:** Simple, fast, no dependencies +- **Cons:** Harder to maintain bilingual support + +#### Option 2: Flask-Babel Integration (Recommended for future i18n) +```python +# Install: pip install flask-babel +from flask_babel import Babel, gettext as _ + +app = Flask(__name__) +babel = Babel(app) + +# In templates: +# Before:

Tablet Management System

+# After:

{{ _('Tablet Management System') }}

+``` +- **Pros:** Supports multiple languages, professional i18n +- **Cons:** More complex setup, requires extracting strings + +#### Option 3: Jinja2 Macros +```html +{# macros.html #} +{% macro trans(text) %}{{ text|trans }}{% endmacro %} + +{# In templates #} +{% import 'macros.html' as m %} +

{{ m.trans('Tablet Management System') }}

+``` +- **Pros:** Reusable, clean templates +- **Cons:** Requires macro setup + +### Recommended Spanish Translations + +| English | Spanish | +|---------|---------| +| Tablet Management System | Sistema de Gestión de Tablets | +| Available Tablets | Tablets Disponibles | +| Active Loans | Préstamos Activos | +| Loan History | Historial de Préstamos | +| User Loans | Préstamos por Usuario | +| Non-Loanable Devices | Dispositivos No Prestables | +| Project Management | Gestión de Proyectos | +| Add Tablet | Añadir Tablet | +| Add User | Añadir Usuario | +| Loan Tablet | Prestar Tablet | +| Return | Devolver | +| Brand | Marca | +| Model | Modelo | +| Serial Number | Número de Serie | +| Notes | Notas | +| Name | Nombre | +| Email | Correo Electrónico | +| Phone | Teléfono | +| Identification | Identificación | +| Loan Date | Fecha de Préstamo | +| Return Date | Fecha de Devolución | +| Status | Estado | +| Actions | Acciones | +| Edit | Editar | +| Delete | Eliminar | +| Save | Guardar | +| Search | Buscar | +| No available tablets. | No hay tablets disponibles. | +| No active loans. | No hay préstamos activos. | +| No loan history available. | No hay historial de préstamos disponible. | + +### Implementation Notes +- **Do not change code yet** - This is documentation only for now +- Consider using a translation dictionary or Flask-Babel for maintainability +- Test all translated text fits within the responsive design +- Verify character encoding supports Spanish (UTF-8 should be fine) + +--- + ## Changes Made ### Date