Optimize CSS architecture with SCSS modular system

## Major CSS/SCSS Improvements
-  Set up modular SCSS architecture with variables, mixins, and components
-  Created organized directory structure: src/scss/ with variables, mixins, pages/
-  Removed ~300+ lines of inline CSS from admin.html
-  Added comprehensive design system with consistent spacing, colors, typography
-  Created reusable mixins for buttons, cards, tables, forms, and layouts
-  Implemented responsive breakpoint mixins for mobile/tablet/desktop
-  Added utility classes for common layouts and spacing

## Build System
-  Added sass and concurrently as dev dependencies
-  Created npm scripts: build-css, watch-css, dev-with-css
-  Automated SCSS compilation to compressed CSS
-  Set up development workflow with CSS watching

## Admin Panel Enhancements
-  Added complete tab navigation system (Location Reports + Profanity Filter)
-  Integrated profanity management UI with forms and tables
-  Consistent styling across all components using SCSS mixins
-  Improved responsive design for mobile devices

## Benefits
- 🎯 Maintainable: All styles centralized in modular SCSS files
- 📱 Responsive: Better mobile experience with consistent breakpoints
- 🎨 Consistent: Design system ensures visual consistency
-  Efficient: Compressed CSS output, no inline styles
- 🔧 Developer-friendly: Easy to extend and modify styles

The application now has professional-grade CSS architecture that's easy to maintain and extend.
This commit is contained in:
Deco Vander 2025-07-04 11:30:34 -04:00
parent 3b4db2b8d1
commit f83e087541
9 changed files with 1414 additions and 931 deletions

View file

@ -5,7 +5,11 @@
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
"dev": "nodemon server.js",
"build-css": "sass src/scss/main.scss public/style.css --style=compressed",
"watch-css": "sass src/scss/main.scss public/style.css --watch",
"dev-with-css": "concurrently \"npm run watch-css\" \"npm run dev\"",
"build": "npm run build-css"
},
"dependencies": {
"cors": "^2.8.5",
@ -15,7 +19,9 @@
"sqlite3": "^5.1.6"
},
"devDependencies": {
"nodemon": "^3.0.1"
"concurrently": "^9.2.0",
"nodemon": "^3.0.1",
"sass": "^1.89.2"
},
"keywords": [
"ice",