1196de6e88
Flask backend with Vue 3 frontend for shop floor machine management. Includes database schema export for MySQL shopdb_flask database. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
105 lines
3.4 KiB
Markdown
105 lines
3.4 KiB
Markdown
# Frontend Development Standards
|
|
|
|
## CSS Styling Standards
|
|
|
|
### Use CSS Variables for ALL Colors
|
|
|
|
**NEVER hardcode colors in component styles.** Always use CSS variables defined in `src/assets/style.css`.
|
|
|
|
Available variables:
|
|
```css
|
|
--primary /* Primary brand color */
|
|
--primary-dark /* Darker primary for hover states */
|
|
--secondary /* Secondary/muted color */
|
|
--success /* Success states (green) */
|
|
--warning /* Warning states (orange) */
|
|
--danger /* Error/danger states (red) */
|
|
--bg /* Page background */
|
|
--bg-card /* Card/panel background */
|
|
--text /* Primary text color */
|
|
--text-light /* Secondary/muted text */
|
|
--border /* Border color */
|
|
--link /* Link color (bright blue in dark mode) */
|
|
```
|
|
|
|
**Bad:**
|
|
```css
|
|
.my-card {
|
|
background: white;
|
|
color: #1a1a1a;
|
|
}
|
|
```
|
|
|
|
**Good:**
|
|
```css
|
|
.my-card {
|
|
background: var(--bg-card);
|
|
color: var(--text);
|
|
}
|
|
```
|
|
|
|
### Detail Pages - Use Global Styles
|
|
|
|
All detail pages (MachineDetail, PCDetail, PrinterDetail, ApplicationDetail) should use the **unified global styles** from `style.css`:
|
|
|
|
- `.detail-page` - Container wrapper
|
|
- `.hero-card` - Main hero section with image and info
|
|
- `.hero-image`, `.hero-content`, `.hero-title`, `.hero-meta`, `.hero-details`
|
|
- `.section-card` - Info sections
|
|
- `.section-title` - Section headers
|
|
- `.info-list`, `.info-row`, `.info-label`, `.info-value`
|
|
- `.content-grid`, `.content-column` - Two-column layout
|
|
- `.audit-footer` - Created/modified timestamps
|
|
|
|
**Only add scoped styles for page-specific elements** (e.g., supplies grid for printers, version list for applications).
|
|
|
|
### PrinterDetail.vue is the Master Template for Detail Pages
|
|
|
|
Use `PrinterDetail.vue` as the reference for new detail pages. Follow its structure and styling patterns.
|
|
|
|
### List Pages - Use Global Styles
|
|
|
|
All list pages should use the **unified global styles** from `style.css`:
|
|
|
|
- `.page-header` - Header with title and action button
|
|
- `.filters` - Search and filter controls
|
|
- `.card` - Main content container
|
|
- `.table-container` - Scrollable table wrapper
|
|
- `table`, `th`, `td` - Table styling
|
|
- `.pagination` - Page navigation
|
|
- `.badge`, `.badge-success`, etc. - Status badges
|
|
- `.actions` - Action button column
|
|
|
|
**PrintersList.vue is the Master Template for List Pages**
|
|
|
|
Use `PrintersList.vue` as the reference for new list pages. It has NO scoped styles - everything uses global CSS.
|
|
|
|
**Only add scoped styles for page-specific elements** (e.g., icon cells for applications, stats badge for knowledge base).
|
|
|
|
### Dark Mode Support
|
|
|
|
Dark mode is automatic via `@media (prefers-color-scheme: dark)`. Using CSS variables ensures colors adapt automatically - no extra work needed per page.
|
|
|
|
## Component Organization
|
|
|
|
- **Global styles**: `src/assets/style.css`
|
|
- **Page-specific styles**: Scoped `<style scoped>` block, only for unique elements
|
|
- **Font sizes**: Use `rem` units, base is 18px for readability on 1080p
|
|
|
|
## File Structure
|
|
|
|
```
|
|
src/
|
|
assets/
|
|
style.css # Global styles, CSS variables, detail page styles
|
|
views/
|
|
machines/
|
|
MachineDetail.vue # Uses global styles only
|
|
pcs/
|
|
PCDetail.vue # Global + PC-specific (app-list, etc.)
|
|
printers/
|
|
PrinterDetail.vue # Global + printer-specific (supplies-grid)
|
|
applications/
|
|
ApplicationDetail.vue # Global + app-specific (version-list, pc-list)
|
|
```
|