From 419518cbc079529a93c365a6079eaf0e56b158f4 Mon Sep 17 00:00:00 2001 From: G V VIGHNESH REDDY Date: Sun, 5 Apr 2026 17:57:34 +0530 Subject: [PATCH 01/45] style: redesign base CSS with design tokens and mobile-first layout --- README.md | 190 +++++++++++- .../statistics_app/workshop_public_stats.html | 269 ++++++++++------- workshop_app/templates/workshop_app/base.html | 254 +++++++++------- .../templates/workshop_app/login.html | 203 ++++++++++--- .../workshop_app/propose_workshop.html | 219 ++++++++------ .../templates/workshop_app/register.html | 165 ++++++++-- .../templates/workshop_app/view_profile.html | 283 +++++++++++------- .../workshop_status_coordinator.html | 208 ++++++++----- .../workshop_app/workshop_type_details.html | 79 +++-- .../workshop_app/workshop_type_list.html | 230 +++++++++----- 10 files changed, 1426 insertions(+), 674 deletions(-) diff --git a/README.md b/README.md index 7c70a62d..d1640ead 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,180 @@ -# **Workshop Booking** +# FOSSEE Workshop Booking — UI/UX Enhancement -> This website is for coordinators to book a workshop(s), they can book a workshop based on instructors posts or can propose a workshop date based on their convenience. +> **FOSSEE Fellowship Screening Task** · Python · UI/UX Enhancement +> Redesign of [`FOSSEE/workshop_booking`](https://github.com/FOSSEE/workshop_booking) with a focus on performance, modern UI, responsiveness, accessibility, and SEO. +--- -### Features -* Statistics - 1. Instructors Only - * Monthly Workshop Count - * Instructor/Coordinator Profile stats - * Upcoming Workshops - * View/Post comments on Coordinator's Profile - 2. Open to All - * Workshops taken over Map of India - * Pie chart based on Total Workshops taken to Type of Workshops. +## Live Demo / Screenshots -* Workshop Related Features - > Instructors can Accept, Reject or Delete workshops based on their preference, also they can postpone a workshop based on coordinators request. +### Before -__NOTE__: Check docs/Getting_Started.md for more info. +| Page | Before | +|------|--------| +| Workshop Types | Plain table, no search, no card layout | +| Login | Minimal card with no validation feedback | +| Statistics | Side-by-side layout breaks on mobile | +| Workshop Status | Raw tables for accepted/proposed workshops | + +### After + +| Page | Improvement | +|------|-------------| +| Workshop Types | Responsive card grid with live React-powered search filter | +| Login | Inline React form validation, password visibility toggle | +| Statistics | Collapsible mobile filter sidebar, improved chart colors | +| Workshop Status | React-powered tab interface separating Accepted & Proposed | + + +--- + +## Setup Instructions + +### Prerequisites + +- Python 3.8+ +- pip +- A MySQL or SQLite database + +### 1. Clone the repository + +```bash +git clone https://github.com//workshop_booking.git +cd workshop_booking +``` + +### 2. Create and activate a virtual environment + +```bash +python -m venv venv +source venv/bin/activate # Windows: venv\Scripts\activate +``` + +### 3. Install dependencies + +```bash +pip install -r requirements.txt +``` + +### 4. Configure local settings + +Copy and edit the local settings file: + +```bash +cp local_settings.py.example local_settings.py +# Edit local_settings.py — set your SECRET_KEY and DATABASE settings +``` + +### 5. Run migrations + +```bash +python manage.py migrate +``` + +### 6. Create a superuser (optional, for admin access) + +```bash +python manage.py createsuperuser +``` + +### 7. Collect static files + +```bash +python manage.py collectstatic +``` + +### 8. Run the development server + +```bash +python manage.py runserver +``` + +Visit `http://127.0.0.1:8000` in your browser. + +--- + +## Files Changed + +| File | Description | +|------|-------------| +| `workshop_app/static/workshop_app/css/base.css` | Complete redesign — CSS custom properties, mobile-first grid, modern card, button, form, badge and table styles | +| `workshop_app/templates/workshop_app/base.html` | Added React 18 CDN, Google Fonts (Plus Jakarta Sans), SEO meta tags, improved accessible navbar with login/register links for unauthenticated users | +| `workshop_app/templates/workshop_app/login.html` | React-powered form with client-side validation, password show/hide toggle, accessible error messages | +| `workshop_app/templates/workshop_app/register.html` | Replaced `form.as_table` with styled individual fields in a two-column grid; React password strength indicator | +| `workshop_app/templates/workshop_app/workshop_type_list.html` | Replaced plain table with React-rendered responsive card grid; live client-side search filter; improved pagination | +| `workshop_app/templates/workshop_app/workshop_type_details.html` | Clean definition-list card layout; back navigation; contextual CTA | +| `workshop_app/templates/workshop_app/propose_workshop.html` | Mobile-friendly single-column form; styled modal for T&C; improved error display | +| `workshop_app/templates/workshop_app/workshop_status_coordinator.html` | React tab interface for Accepted / Proposed workshops; welcome banner for empty state | +| `workshop_app/templates/workshop_app/view_profile.html` | Profile card with gradient header; styled field rows; two-column edit form grid | +| `statistics_app/templates/statistics_app/workshop_public_stats.html` | Responsive two-column layout; collapsible mobile filter sidebar; improved chart bar colors | + +--- + +## Reasoning + +### What design principles guided your improvements? + +**Visual hierarchy first.** Every page was audited for the most important action a user needs to take and that element was made visually dominant — e.g. the "Submit Proposal" button on the proposal page, or the workshop cards on the list page. Supporting information was styled to be quieter (smaller text, muted colour) so the eye flows naturally. + +**Mobile-first, not mobile-afterthought.** Styles were written at the smallest viewport first, then expanded with `@media` queries. Grid layouts (`auto-fill`, `minmax`) let content reflow naturally without explicit breakpoints for every possible screen size. + +**Consistency through design tokens.** A single set of CSS custom properties (`--primary`, `--radius`, `--shadow`, etc.) is declared once in `base.css` and reused everywhere. This guarantees visual consistency and makes future theme changes a one-line edit. + +**Accessibility (WCAG 2.1 AA target).** Every interactive element has a visible focus ring (3 px outline). Form errors are linked to their inputs via `aria-describedby` and `aria-invalid`. Icon-only buttons carry `aria-label`. Tables have `aria-label` attributes. Colour contrast was checked for all text/background pairings. + +**Progressive enhancement.** React components are mounted on top of server-rendered Django output. The login form includes a `