From 442d13921762af5992fb074a96f9756c5100d160 Mon Sep 17 00:00:00 2001 From: Tobias O Date: Wed, 29 Oct 2025 18:06:21 +1300 Subject: [PATCH] chore: remove obsolete doc --- MIGRATION_GUIDE.md | 240 --------------------------------------------- 1 file changed, 240 deletions(-) delete mode 100644 MIGRATION_GUIDE.md diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md deleted file mode 100644 index 9b4ac890..00000000 --- a/MIGRATION_GUIDE.md +++ /dev/null @@ -1,240 +0,0 @@ -# Tailwind/DaisyUI Migration Guide - -## Overview - -This project is using the **Strangler Fig Pattern** to incrementally migrate from Bootstrap 3.3.7 to Tailwind CSS v4 + DaisyUI v5. - -## Layout Architecture - -### Paper-over-Background Design - -The modern framework uses a "paper hovering over background" design: - -- **Background**: `bg-base-300` (slightly darker gray) -- **Content Area**: `bg-base-100` (white/light) with shadow and rounded corners on medium+ screens -- **Responsive**: Full width on mobile, centered with visible background on larger screens - -### Two Layout Modes - -**1. Standard Paper Layout** (default) -```django -{% block content %} - - -{% endblock content %} -``` - -**2. Full-Width Layout** (for landing pages, special layouts) -```django -{% block main_content %} - - -{% endblock main_content %} -``` - -## Architecture - -### Two Base Templates - -1. **`framework.html`** - Legacy Bootstrap template (25 templates use this) -2. **`framework_modern.html`** - Modern Tailwind/DaisyUI template (clean, no Bootstrap) - -### Migrated Templates - -✅ **index/index.html** - First template migrated to modern framework - -### Migration Status - -- **Total templates**: 110 -- **Templates extending framework**: 25 -- **Migrated to modern**: 1 (index.html) -- **Remaining**: 24 - -## How to Migrate a Template - -### Step 1: Change the extends statement - -```django -{# Old #} -{% extends "framework.html" %} - -{# New #} -{% extends "framework_modern.html" %} -``` - -### Step 2: Remove Bootstrap wrappers - -```django -{# Old #} -
- -
- -{# New #} - -``` - -### Step 3: Convert Bootstrap classes to Tailwind/DaisyUI - -Common conversions: - -**Bootstrap → Tailwind/DaisyUI** - -| Bootstrap | Tailwind/DaisyUI | -|-----------|------------------| -| `btn btn-primary` | `btn btn-primary` (DaisyUI keeps similar naming) | -| `btn btn-default` | `btn` | -| `container` | `container mx-auto` | -| `row` | `flex flex-wrap` or `grid` | -| `col-md-6` | `w-full md:w-1/2` | -| `panel panel-default` | `card bg-base-100 shadow-xl` | -| `alert alert-info` | `alert alert-info` | -| `navbar navbar-default` | `navbar bg-neutral` | -| `modal fade` | `modal` (see DaisyUI modal docs) | - -### Step 4: Test functionality - -- Verify navigation works -- Test any JavaScript interactions -- Check responsive behavior -- Validate forms still submit correctly - -### Step 5: Commit and deploy - -Each template migration can be deployed independently since both frameworks coexist. - -## Design System - -### Color Tokens - -Use semantic color tokens from the enviPath theme: - -```css -/* Base backgrounds */ -bg-base-100 /* Main background (very light blue-ish) */ -bg-base-200 /* Secondary background */ -bg-base-300 /* Tertiary background */ - -/* Brand colors */ -bg-primary /* Primary blue */ -bg-secondary /* Secondary teal */ -bg-accent /* Accent color */ - -/* Semantic colors */ -bg-success /* Green */ -bg-warning /* Yellow/Orange */ -bg-error /* Red */ -bg-info /* Blue */ - -/* Neutrals */ -bg-neutral /* Dark gray (used in navbar) */ -``` - -### Components - -DaisyUI provides ready-to-use components: - -- **Navigation**: `navbar`, `menu`, `dropdown` -- **Content**: `card`, `collapse`, `badge` -- **Actions**: `btn`, `modal`, `drawer` -- **Forms**: `input`, `select`, `textarea`, `checkbox`, `radio` -- **Feedback**: `alert`, `toast`, `loading` - -See: https://daisyui.com/components/ - -## Priority Order for Migration - -Suggested order based on user visibility: - -1. ✅ **index/index.html** (Homepage) - DONE -2. **search.html** (Search page) -3. **objects/pathway.html** (Pathway detail) -4. **objects/compound.html** (Compound detail) -5. **objects/package.html** (Package overview) -6. **collections/objects_list.html** (Generic list view) -7. Other object detail pages -8. Admin pages -9. Error pages - -## Known Issues - -### Modals Need Conversion - -The modal templates (`modals/*.html`) still use Bootstrap markup. They need to be converted to DaisyUI modals: - -**Bootstrap Modal:** -```html - -``` - -**DaisyUI Modal:** -```html - -
-

Title

-

Content

-
-
- -
-
-
- -``` - -### JavaScript Compatibility - -- jQuery is still included for compatibility -- Bootstrap JavaScript is NOT loaded in modern framework -- Modal triggers will need updating from `data-toggle="modal"` to DaisyUI's approach - -## CSS Build Process - -After making changes to CSS files: - -```bash -# Development (watch mode) -pnpm run dev - -# Production build -pnpm run build -``` - -## Template Structure - -### Base Templates -- **`framework.html`** - Legacy Bootstrap base (for unmigrated pages) -- **`framework_modern.html`** - Modern Tailwind/DaisyUI base (for new pages) - -### Shared Includes -- **`includes/navbar.html`** - Modern DaisyUI navbar (used in framework_modern.html) -- **`includes/footer.html`** - Modern Tailwind footer (used in framework_modern.html) - -These includes make it easy to maintain consistent navigation and footer across all migrated pages. - -## Files Modified in Initial Migration - -1. `static/css/daisyui-theme.css` - Fixed `--color-base-100: blue` bug -2. `templates/framework_modern.html` - New modern base template -3. `templates/includes/navbar.html` - Extracted navbar component -4. `templates/includes/footer.html` - Extracted footer component -5. `templates/index/index.html` - Migrated to use framework_modern.html -6. `static/css/output.css` - Rebuilt with fixed theme - -## Resources - -- [Tailwind CSS v4 Docs](https://tailwindcss.com/) -- [DaisyUI v5 Docs](https://daisyui.com/) -- [DaisyUI Components](https://daisyui.com/components/) -- [DaisyUI Themes](https://daisyui.com/docs/themes/) -- [Strangler Fig Pattern](https://martinfowler.com/bliki/StranglerFigApplication.html) - -## Questions? - -Check the existing modern templates for examples: -- `templates/framework_modern.html` - Base template structure -- `templates/index/index.html` - First migrated page with hero section, cards, etc.