310 lines
9.2 KiB
Markdown
310 lines
9.2 KiB
Markdown
# Template Tailwind CSS Conversion Summary
|
|
|
|
## Objective
|
|
Convert all templates to match the base.html theme and use only Tailwind CSS instead of Bootstrap.
|
|
|
|
## Base Theme Configuration
|
|
- **Primary Color**: Temple Red (#9d2235) and hover (#7a1a29)
|
|
- **Background Colors**: White (#ffffff), Light Gray (#f9fafb)
|
|
- **Border Colors**: Gray-200 (#e5e7eb)
|
|
- **Text Colors**: Gray-900 (#111827), Gray-700 (#374151), Gray-600 (#4b5563)
|
|
- **Icons**: Lucide Icons
|
|
- **Components**:
|
|
- Cards: `bg-white rounded-2xl shadow-sm border border-gray-200`
|
|
- Buttons Primary: `bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-4 py-2.5 rounded-xl`
|
|
- Buttons Secondary: `border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2 rounded-xl`
|
|
- Inputs: `w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red focus:border-transparent`
|
|
|
|
## Completed Templates ✓
|
|
|
|
### Includes Directory (ALL COMPLETED ✓)
|
|
- [x] delete_modal.html
|
|
- [x] edit_comment_form.html
|
|
- [x] delete_comment_form.html
|
|
- [x] comment_form.html
|
|
- [x] comment_list.html
|
|
- [x] meeting_form.html
|
|
- [x] _list_view_switcher.html
|
|
- [x] language_options.html
|
|
- [x] search_form.html
|
|
- [x] easy_logs.html
|
|
- [x] paginator.html
|
|
- [x] application_exam_status_form.html
|
|
- [x] application_modal_body.html
|
|
- [x] applications_update_exam_form.html
|
|
- [x] applications_update_interview_form.html
|
|
- [x] applications_update_offer_form.html
|
|
- [x] candidate_resume_template.html
|
|
- [x] copy_to_clipboard.html
|
|
- [x] schedule_interview_div.html
|
|
|
|
### Recruitment Directory
|
|
- [x] application_delete.html
|
|
- [x] candidate_delete.html
|
|
- [x] agency_access_link_confirm.html
|
|
- [x] notification_confirm_all_read.html
|
|
- [x] notification_confirm_delete.html
|
|
- [x] agency_access_link_detail.html
|
|
- [x] agency_portal_assignment_detail.html
|
|
- [x] applicant_signup.html
|
|
- [x] agency_portal_persons_list.html
|
|
- [x] interview_calendar.html
|
|
- [x] source_form.html
|
|
|
|
### Recruitment/Partials Directory
|
|
- [x] stage_update_modal.html
|
|
- [x] note_form.html
|
|
- [x] note_modal.html
|
|
- [x] stage_confirmation_modal.html
|
|
|
|
## Templates Requiring Conversion
|
|
|
|
### Recruitment Directory
|
|
- [ ] agency_form.html
|
|
- [ ] agency_detail.html
|
|
- [ ] agency_portal_login.html
|
|
- [ ] agency_portal_dashboard.html
|
|
- [ ] agency_list.html
|
|
- [ ] agency_assignment_list.html
|
|
- [ ] settings_form.html
|
|
- [ ] settings_list.html
|
|
- [ ] settings_detail.html
|
|
- [ ] application_detail.html
|
|
- [ ] applications_list.html
|
|
- [ ] applicant_profile.html
|
|
- [ ] dashboard.html
|
|
|
|
### Recruitment/Partials Directory
|
|
- [ ] _candidate_table.html
|
|
- [ ] _guage_chart.html
|
|
- [ ] ai_overview_breadcromb.html
|
|
- [ ] error.html
|
|
- [ ] exam-results.html
|
|
- [ ] interview-results.html
|
|
- [ ] offer-results.html
|
|
- [ ] stage_display.html
|
|
- [ ] stage_update_form.html
|
|
- [ ] stage_update_success.html
|
|
- [ ] stats_cards.html
|
|
|
|
### Jobs Directory
|
|
- [ ] job_list.html
|
|
- [ ] job_detail.html
|
|
- [ ] create_job.html
|
|
- [ ] edit_job.html
|
|
- [ ] job_applicants.html
|
|
- [ ] applicants_of_stage.html
|
|
- [ ] apply_form.html
|
|
- [ ] application_success.html
|
|
- [ ] job_bank.html
|
|
- [ ] job_applications_list.html
|
|
|
|
### Jobs/Partials Directory
|
|
- [ ] delete_modal.html
|
|
- [ ] applicant_tracking.html
|
|
- [ ] image_upload.html
|
|
- [ ] linkedin_content_form.html
|
|
|
|
### Account Directory
|
|
- [ ] login.html
|
|
- [ ] logout.html
|
|
- [ ] account_inactive.html
|
|
- [ ] password_reset.html
|
|
- [ ] password_reset_done.html
|
|
- [ ] password_reset_from_key.html
|
|
- [ ] password_reset_from_key_done.html
|
|
- [ ] password_change.html
|
|
- [ ] email_confirm.html
|
|
- [ ] email.html
|
|
- [ ] verification_sent.html
|
|
- [ ] email/email_confirmation_message.html
|
|
- [ ] email/password_reset_key_message.html
|
|
|
|
### Interviews Directory
|
|
- [ ] interview_list.html
|
|
- [ ] interview_detail.html
|
|
- [ ] interview_create_type_selection.html
|
|
- [ ] interview_create_onsite.html
|
|
- [ ] interview_create_remote.html
|
|
- [ ] interview_participants_form.html
|
|
- [ ] onsite_location_form.html
|
|
- [ ] preview_schedule.html
|
|
- [ ] schedule_interviews.html
|
|
|
|
### Interviews/Partials Directory
|
|
- [ ] ai_questions_list.html
|
|
- [ ] interview_list.html
|
|
|
|
### Interviews/Email Directory
|
|
- [ ] interview_invitation.html
|
|
|
|
### People Directory
|
|
- [ ] person_list.html
|
|
- [ ] person_detail.html
|
|
- [ ] create_person.html
|
|
- [ ] update_person.html
|
|
- [ ] delete_person.html
|
|
- [ ] person_confirm_delete.html
|
|
|
|
### Messages Directory
|
|
- [ ] message_list.html
|
|
- [ ] message_detail.html
|
|
- [ ] message_form.html
|
|
- [ ] application_message_list.html
|
|
- [ ] application_message_detail.html
|
|
- [ ] application_message_form.html
|
|
|
|
### Meetings Directory
|
|
- [ ] list_meetings.html
|
|
- [ ] meeting_details.html
|
|
- [ ] create_meeting.html
|
|
- [ ] update_meeting.html
|
|
- [ ] delete_meeting_form.html
|
|
- [ ] create_remote_meeting.html
|
|
- [ ] reschedule_meeting.html
|
|
- [ ] reschedule_onsite_meeting.html
|
|
- [ ] schedule_meeting_form.html
|
|
- [ ] schedule_onsite_meeting_form.html
|
|
|
|
### User Directory
|
|
- [ ] profile.html
|
|
- [ ] settings.html
|
|
- [ ] admin_settings.html
|
|
- [ ] portal_profile.html
|
|
- [ ] staff_password_create.html
|
|
- [ ] create_staff.html
|
|
|
|
### Applicant Directory
|
|
- [ ] career.html
|
|
- [ ] job_application_detail.html
|
|
- [ ] application_submit_form.html
|
|
|
|
### Applicant/Partials Directory
|
|
- [ ] candidate_facing_base.html
|
|
|
|
### Forms Directory
|
|
- [ ] form_list.html
|
|
- [ ] form_templates_list.html
|
|
- [ ] create_form_template.html
|
|
- [ ] edit_form.html
|
|
- [ ] form_builder.html
|
|
- [ ] form_embed.html
|
|
- [ ] form_preview.html
|
|
- [ ] form_template_submissions_list.html
|
|
- [ ] form_template_all_submissions.html
|
|
- [ ] form_submission_details.html
|
|
- [ ] document_form.html
|
|
|
|
## Conversion Guidelines
|
|
|
|
### Key Changes Made:
|
|
1. **Removed Bootstrap classes** (e.g., `btn btn-primary`, `card`, `form-control`)
|
|
2. **Added Tailwind CSS classes** with custom color scheme
|
|
3. **Replaced Bootstrap icons** with Lucide Icons
|
|
4. **Standardized component styling** using:
|
|
- `bg-temple-red` for primary actions
|
|
- `rounded-2xl` for cards
|
|
- `shadow-sm` for subtle depth
|
|
- Consistent padding and spacing
|
|
|
|
### Common Patterns:
|
|
|
|
#### Buttons
|
|
```html
|
|
<!-- Primary -->
|
|
<button class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-4 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="icon-name" class="w-4 h-4"></i> Button Text
|
|
</button>
|
|
|
|
<!-- Secondary -->
|
|
<button class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2 rounded-xl transition">
|
|
<i data-lucide="icon-name" class="w-4 h-4"></i> Button Text
|
|
</button>
|
|
```
|
|
|
|
#### Cards
|
|
```html
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<!-- Content -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Forms
|
|
```html
|
|
<div class="space-y-2">
|
|
<label for="field-id" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
Label Text <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" id="field-id" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red focus:border-transparent transition">
|
|
</div>
|
|
```
|
|
|
|
#### Alerts/Notifications
|
|
```html
|
|
<!-- Success -->
|
|
<div class="bg-green-50 border border-green-200 text-green-800 rounded-xl p-4 mb-6 font-semibold text-sm">
|
|
Success Message
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div class="bg-red-50 border border-red-200 text-red-800 rounded-xl p-4 mb-6 font-semibold text-sm">
|
|
Error Message
|
|
</div>
|
|
|
|
<!-- Warning -->
|
|
<div class="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl p-4 mb-6 font-semibold text-sm">
|
|
Warning Message
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="bg-blue-50 border border-blue-200 text-blue-800 rounded-xl p-4 mb-6 font-semibold text-sm">
|
|
Info Message
|
|
</div>
|
|
```
|
|
|
|
#### Modals
|
|
```html
|
|
<div class="hidden fixed inset-0 z-50 overflow-y-auto" id="modalId">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 bg-black/50 transition-opacity"></div>
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
<div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
|
<!-- Modal Content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### Badges
|
|
```html
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-temple-red text-white">
|
|
Badge Text
|
|
</span>
|
|
```
|
|
|
|
## Status Summary
|
|
|
|
- **Total Templates**: ~150+
|
|
- **Completed**: ~25
|
|
- **Remaining**: ~125+
|
|
- **Completion**: ~17%
|
|
|
|
## Next Steps
|
|
|
|
1. Continue converting remaining templates in recruitment directory
|
|
2. Convert all templates in jobs directory
|
|
3. Convert all templates in account directory
|
|
4. Convert all templates in interviews directory
|
|
5. Convert all templates in other directories
|
|
6. Remove Bootstrap CDN links from base.html once all templates are converted
|
|
7. Test all templates for consistency and functionality
|
|
|
|
## Notes
|
|
|
|
- All converted templates use Lucide Icons instead of Font Awesome or Bootstrap icons
|
|
- Custom Tailwind config needed for `bg-temple-red` color (should be added to tailwind.config.js)
|
|
- Modal interactions now use JavaScript instead of Bootstrap's data attributes
|
|
- All forms use consistent styling and validation states
|
|
- Responsive design is maintained through Tailwind's responsive prefixes (sm:, md:, lg:, etc.) |