Clean up template - Remove dev docs, enhance .gitignore, remove IDE files
This commit is contained in:
Zahirul Iman
parent
06c580ce97
commit
0a44bdde25
70
.gitignore
vendored
70
.gitignore
vendored
@ -8,14 +8,48 @@ dist
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Package manager files
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
logs/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage/
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/settings.json
|
||||
.vscode/launch.json
|
||||
.vscode/extensions.json
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS generated files
|
||||
Thumbs.db
|
||||
ehthumbs.db
|
||||
Desktop.ini
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
@ -23,3 +57,39 @@ node_modules
|
||||
|
||||
# Uploads directory
|
||||
public/uploads/
|
||||
|
||||
# Development and testing files
|
||||
test-*.md
|
||||
fixes-*.md
|
||||
debug-*.md
|
||||
*-debug.*
|
||||
*-test.*
|
||||
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
.tmp/
|
||||
.temp/
|
||||
|
||||
# Database files
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
*.db
|
||||
|
||||
# IDE and editor files
|
||||
.project
|
||||
.classpath
|
||||
.settings/
|
||||
*.sublime-*
|
||||
.brackets.json
|
||||
*.code-workspace
|
||||
|
||||
# Backup files
|
||||
*.bak
|
||||
*.backup
|
||||
*~
|
||||
.#*
|
||||
|
||||
# Documentation drafts (keep main docs)
|
||||
draft-*.md
|
||||
notes-*.md
|
||||
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,3 +0,0 @@
|
||||
{
|
||||
"vue3snippets.enable-compile-vue-file-on-did-save-code": true
|
||||
}
|
||||
@ -1,161 +0,0 @@
|
||||
# Site Settings Feature
|
||||
|
||||
## Overview
|
||||
The Site Settings feature allows administrators to customize the appearance and branding of the application through a user-friendly interface. All settings are globally applied across the entire application including SEO, meta tags, and visual elements.
|
||||
|
||||
## Features
|
||||
|
||||
### 1. Basic Information
|
||||
- **Site Name**: Customize the application name displayed globally in:
|
||||
- Header and sidebar
|
||||
- Browser title and meta tags
|
||||
- SEO and Open Graph tags
|
||||
- Loading screen
|
||||
- All pages and components
|
||||
- **Site Description**: Set a description used for:
|
||||
- SEO meta descriptions
|
||||
- Open Graph descriptions
|
||||
- Twitter Card descriptions
|
||||
- **Theme Selection**: Choose from available themes:
|
||||
- Standard themes (from themeList.js)
|
||||
- Accessibility themes (from themeList2.js)
|
||||
- Custom themes added to theme.css
|
||||
|
||||
### 2. Branding
|
||||
- **Site Logo**: Upload a custom logo displayed in:
|
||||
- Header (horizontal layout)
|
||||
- Sidebar (vertical layout)
|
||||
- Loading screen
|
||||
- Login page
|
||||
- Any component using site settings
|
||||
- **Favicon**: Upload a custom favicon displayed in:
|
||||
- Browser tabs
|
||||
- Bookmarks
|
||||
- Mobile home screen icons
|
||||
|
||||
### 3. Advanced Settings
|
||||
- **Custom CSS**: Add custom CSS injected into document head
|
||||
- **Custom Theme File**: Upload CSS files saved to `/assets/style/css/`
|
||||
- **Add Custom Theme to theme.css**: Directly add themes to the main theme.css file
|
||||
|
||||
## How to Access
|
||||
|
||||
1. Navigate to **Pentadbiran** → **Konfigurasi** → **Site Settings**
|
||||
2. Use the tabbed interface:
|
||||
- **Basic Info**: Site name, description, and theme selection
|
||||
- **Branding**: Logo and favicon uploads
|
||||
- **Advanced**: Custom CSS and theme management
|
||||
3. Use the **Live Preview** panel to see changes in real-time
|
||||
4. Click **Save Changes** to apply your settings
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### Database Schema
|
||||
The settings are stored in the `site_settings` table with the following fields:
|
||||
- `siteName`, `siteDescription`
|
||||
- `siteLogo`, `siteFavicon`
|
||||
- `selectedTheme` - Selected theme name
|
||||
- `customCSS`, `customThemeFile`
|
||||
- Legacy fields maintained for backward compatibility
|
||||
|
||||
### API Endpoints
|
||||
- `GET /api/devtool/config/site-settings` - Retrieve current settings
|
||||
- `POST /api/devtool/config/site-settings` - Update settings
|
||||
- `POST /api/devtool/config/upload-file` - Upload files (logos, themes)
|
||||
- `POST /api/devtool/config/add-custom-theme` - Add custom theme to theme.css
|
||||
|
||||
### File Upload Locations
|
||||
- **Logo and Favicon files**: Saved to `public/uploads/site-settings/`
|
||||
- **Theme CSS files**: Saved to `assets/style/css/` directory
|
||||
- **Custom themes**: Added directly to `assets/style/css/base/theme.css`
|
||||
|
||||
### Composable
|
||||
The `useSiteSettings()` composable provides:
|
||||
- `siteSettings` - Reactive settings object
|
||||
- `loadSiteSettings()` - Load settings from API
|
||||
- `updateSiteSettings()` - Update settings
|
||||
- `setTheme()` - Set theme using existing theme system
|
||||
- `getCurrentTheme()` - Get current theme
|
||||
- `applyThemeSettings()` - Apply theme changes to DOM
|
||||
- `updateGlobalMeta()` - Update global meta tags and SEO
|
||||
- `addCustomThemeToFile()` - Add custom theme to theme.css
|
||||
|
||||
### Global Integration
|
||||
The site settings are globally integrated across:
|
||||
|
||||
#### Header Component
|
||||
- Uses site settings for logo and name display
|
||||
- Theme selection dropdown uses same system as site settings
|
||||
- Synced with site settings theme selection
|
||||
|
||||
#### Loading Component
|
||||
- Uses site logo if available, fallback to default
|
||||
- Displays site name in loading screen
|
||||
|
||||
#### App.vue
|
||||
- Global meta tags updated from site settings
|
||||
- Title, description, and favicon managed globally
|
||||
- Theme initialization from site settings
|
||||
|
||||
#### SEO and Meta Tags
|
||||
- Document title updated globally
|
||||
- Meta descriptions for SEO
|
||||
- Open Graph tags for social sharing
|
||||
- Twitter Card tags
|
||||
- Favicon and apple-touch-icon
|
||||
|
||||
### Theme System Integration
|
||||
- Integrates with existing theme system (themeList.js, themeList2.js)
|
||||
- Theme selection in header dropdown synced with site settings
|
||||
- Custom themes can be added directly to theme.css
|
||||
- Backward compatibility with existing theme structure
|
||||
|
||||
### Custom Theme Structure
|
||||
Custom themes added to theme.css should follow this structure:
|
||||
```css
|
||||
html[data-theme="your-theme-name"] {
|
||||
--color-primary: 255, 0, 0;
|
||||
--color-secondary: 0, 255, 0;
|
||||
--color-success: 0, 255, 0;
|
||||
--color-info: 0, 0, 255;
|
||||
--color-warning: 255, 255, 0;
|
||||
--color-danger: 255, 0, 0;
|
||||
/* Add your theme variables here */
|
||||
}
|
||||
```
|
||||
|
||||
## Default Values
|
||||
If no settings are configured, the system uses these defaults:
|
||||
- Site Name: "corradAF"
|
||||
- Site Description: "corradAF Base Project"
|
||||
- Selected Theme: "biasa"
|
||||
- Logo: Default corradAF logo
|
||||
- Favicon: Default favicon
|
||||
|
||||
## Migration Notes
|
||||
- Legacy color fields (primaryColor, secondaryColor, etc.) are maintained for backward compatibility
|
||||
- `themeMode` field is mapped to `selectedTheme` for compatibility
|
||||
- Existing installations will automatically use default values
|
||||
- Theme selection integrates with existing theme dropdown in header
|
||||
|
||||
## Notes
|
||||
- Changes are applied immediately in the preview
|
||||
- Theme changes affect the entire application
|
||||
- Custom CSS is injected into the document head
|
||||
- Theme files are saved to `/assets/style/css/` for proper integration
|
||||
- File uploads are validated for type and size
|
||||
- Settings persist across browser sessions
|
||||
- Site name and description updates are reflected globally and immediately
|
||||
- All meta tags and SEO elements are automatically updated
|
||||
- Logo changes are reflected in all components that use site settings
|
||||
|
||||
### Important Notes
|
||||
- Changes are applied immediately in the preview
|
||||
- Theme changes affect the entire application
|
||||
- Custom CSS is injected into the document head
|
||||
- Theme files are saved to `/assets/style/css/` for proper integration
|
||||
- File uploads are validated for type and size
|
||||
- Settings persist across browser sessions
|
||||
- Site name and description updates are reflected globally and immediately
|
||||
- All meta tags and SEO elements are automatically updated
|
||||
- Logo changes are reflected in all components that use site settings
|
||||
122
fixes-summary.md
122
fixes-summary.md
@ -1,122 +0,0 @@
|
||||
# Fixes Implemented ✅
|
||||
|
||||
## 1. Header Title Not Showing Issue 🔧
|
||||
|
||||
**Problem**: Site name not appearing in header even when toggle is enabled
|
||||
|
||||
**Root Cause**: Header component only showed site name in horizontal layout (`v-else` condition), but most of the time the layout is vertical
|
||||
|
||||
**Fixes Applied**:
|
||||
- ✅ Added site name display to both vertical AND horizontal header layouts
|
||||
- ✅ Enhanced site settings loading in Header component's `onMounted` hook
|
||||
- ✅ Added immediate watchers to sync toggle changes with global site settings
|
||||
- ✅ Added debug info panel to troubleshoot site settings state
|
||||
|
||||
**Files Modified**:
|
||||
- `components/layouts/Header.vue` - Added site name to vertical layout
|
||||
- `pages/devtool/config/site-settings/index.vue` - Enhanced watchers and debugging
|
||||
|
||||
## 2. Button Styling Standardization 🎨
|
||||
|
||||
**Problem**: Inconsistent button styling across tabs
|
||||
|
||||
**Standardization Applied**:
|
||||
- ✅ All upload buttons: `variant="outline" size="sm"`
|
||||
- ✅ Save Changes button: `variant="primary" size="sm"`
|
||||
- ✅ Reset button: `variant="outline" size="sm"`
|
||||
- ✅ Apply Font button: `variant="outline" size="sm"` (changed from primary)
|
||||
|
||||
**Consistent Button Pattern**:
|
||||
```vue
|
||||
<rs-button variant="outline" size="sm">
|
||||
<Icon name="ic:outline-[icon]" class="mr-1" />
|
||||
Action Text
|
||||
</rs-button>
|
||||
```
|
||||
|
||||
**Files Modified**:
|
||||
- `pages/devtool/config/site-settings/index.vue` - Standardized Apply Font button
|
||||
|
||||
## 3. Site Settings Description Padding 📝
|
||||
|
||||
**Problem**: "Configure your platform's branding, appearance, SEO, and functionality" text had improper padding for two lines
|
||||
|
||||
**Fix Applied**:
|
||||
- ✅ Added `leading-relaxed` class for better line height
|
||||
- ✅ Improved text readability and spacing
|
||||
|
||||
**Before**:
|
||||
```vue
|
||||
<p>Configure your platform's branding, appearance, SEO, and functionality.</p>
|
||||
```
|
||||
|
||||
**After**:
|
||||
```vue
|
||||
<p class="leading-relaxed">Configure your platform's branding, appearance, SEO, and functionality.</p>
|
||||
```
|
||||
|
||||
**Files Modified**:
|
||||
- `pages/devtool/config/site-settings/index.vue` - Enhanced info card description
|
||||
|
||||
## Additional Improvements 🚀
|
||||
|
||||
### Enhanced Toggle Functionality
|
||||
- ✅ Real-time toggle updates without requiring save
|
||||
- ✅ Immediate sync between settings page and global state
|
||||
- ✅ Both header and sidemenu respect the toggle setting
|
||||
|
||||
### Debug Information
|
||||
- ✅ Added debug panel in live preview showing:
|
||||
- Current site name
|
||||
- Toggle state (Yes/No)
|
||||
- Font size in pixels
|
||||
- ✅ Helps troubleshoot configuration issues
|
||||
|
||||
### Header Logic Improvements
|
||||
- ✅ Site name now shows in both vertical and horizontal layouts
|
||||
- ✅ Proper font size scaling in sidemenu (65% of header size)
|
||||
- ✅ Automatic site settings loading on component mount
|
||||
|
||||
## Testing Verification ✅
|
||||
|
||||
**Header Display Test**:
|
||||
1. ✅ Site name appears in vertical layout (default)
|
||||
2. ✅ Site name appears in horizontal layout
|
||||
3. ✅ Toggle OFF hides name in both layouts
|
||||
4. ✅ Toggle ON shows name in both layouts
|
||||
5. ✅ Font size applies correctly
|
||||
6. ✅ Changes are immediate
|
||||
|
||||
**Button Consistency Test**:
|
||||
1. ✅ All upload buttons use outline variant
|
||||
2. ✅ Save button uses primary variant
|
||||
3. ✅ Reset button uses outline variant
|
||||
4. ✅ All buttons have consistent size (sm)
|
||||
5. ✅ Icons are properly positioned with mr-1
|
||||
|
||||
**Description Styling Test**:
|
||||
1. ✅ Text has proper line height for readability
|
||||
2. ✅ Padding appears natural for two-line content
|
||||
3. ✅ Dark mode compatibility maintained
|
||||
|
||||
## Files Changed Summary 📁
|
||||
|
||||
1. **components/layouts/Header.vue**
|
||||
- Added site name to vertical layout
|
||||
- Enhanced site settings loading
|
||||
- Improved responsive layout handling
|
||||
|
||||
2. **pages/devtool/config/site-settings/index.vue**
|
||||
- Standardized button variants and sizes
|
||||
- Added debug information panel
|
||||
- Enhanced toggle watching and real-time updates
|
||||
- Improved description line height
|
||||
- Fixed immediate change application
|
||||
|
||||
## Next Steps 🎯
|
||||
|
||||
1. Test the site settings page at `/devtool/config/site-settings`
|
||||
2. Verify header displays site name when toggle is enabled
|
||||
3. Check that all buttons follow consistent styling
|
||||
4. Confirm description text has proper spacing
|
||||
5. Use debug panel to troubleshoot any remaining issues
|
||||
@ -212,7 +212,7 @@ function getColorClasses(color) {
|
||||
<Icon name="mdi:arrow-right" size="16" class="ml-1 group-hover:ml-2 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
</rs-card>
|
||||
</rs-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,121 +0,0 @@
|
||||
# Site Settings Features Test Guide
|
||||
|
||||
## Features Implemented ✅
|
||||
|
||||
### 1. Font Size Stepper for Site Name
|
||||
**Location**: Site Settings > Appearance Tab > Site Name Styling
|
||||
|
||||
**Test Steps**:
|
||||
1. Navigate to `/devtool/config/site-settings`
|
||||
2. Click on the "Appearance" tab
|
||||
3. Locate the "Site Name Font Size" section
|
||||
4. Use the stepper buttons (+/-) to change the font size (12px - 36px)
|
||||
5. Observe the live preview showing the size change
|
||||
6. Check the current size indicator showing the exact pixel value
|
||||
|
||||
**Expected Results**:
|
||||
- Font size changes in real-time in the preview
|
||||
- Size indicator updates with current pixel value
|
||||
- Header and sidemenu site name reflect the new size after saving
|
||||
|
||||
### 2. Google Fonts Suggestions Dropdown
|
||||
**Location**: Site Settings > Appearance Tab > Font Configuration
|
||||
|
||||
**Test Steps**:
|
||||
1. In the same "Appearance" tab, scroll to "Font Configuration"
|
||||
2. Open the "Popular Google Fonts" dropdown
|
||||
3. Select a font (e.g., "Inter", "Poppins", "Roboto")
|
||||
4. Verify the font is applied immediately
|
||||
5. Check that a success toast notification appears
|
||||
6. Verify the "Current Font" section updates
|
||||
|
||||
**Expected Results**:
|
||||
- Dropdown contains 15 popular Google Fonts
|
||||
- Font applies immediately when selected
|
||||
- Success notification shows: "[Font Name] font applied successfully"
|
||||
- Current font section shows the new font name and Google Fonts URL
|
||||
- Dropdown resets after selection
|
||||
|
||||
### 3. Show Site Name in Header Toggle
|
||||
**Location**: Site Settings > Basic Tab
|
||||
|
||||
**Test Steps**:
|
||||
1. Go to the "Basic" tab
|
||||
2. Locate the "Show site name in header" toggle
|
||||
3. Toggle it OFF
|
||||
4. Navigate to any other page
|
||||
5. Check the header - site name should be hidden
|
||||
6. Return to settings and toggle it ON
|
||||
7. Check the header - site name should be visible again
|
||||
|
||||
**Expected Results**:
|
||||
- When OFF: Site name is hidden in both header and sidemenu
|
||||
- When ON: Site name is visible in both header and sidemenu
|
||||
- Changes apply immediately without needing to save
|
||||
|
||||
### 4. Consistent UI Components
|
||||
**Verification Points**:
|
||||
- Uses `rs-button` components with proper variants (primary, outline)
|
||||
- Uses `rs-card` components for layout
|
||||
- Consistent spacing and typography
|
||||
- Uses `FontSizeStepper` component with proper props
|
||||
- Proper dark mode support
|
||||
- Icons from Iconify (`ic:` prefix)
|
||||
|
||||
**Design Patterns Used**:
|
||||
- Border rounded containers with proper padding
|
||||
- Gray borders with dark mode variants
|
||||
- Consistent form input styling
|
||||
- Proper spacing with Tailwind classes
|
||||
- Live preview sidebar with real-time updates
|
||||
|
||||
## Database Fields Added ✅
|
||||
|
||||
- `siteNameFontSize` (Int, default: 18) - Already existed in Prisma schema
|
||||
- Field is properly handled in API endpoints
|
||||
- Synced with global site settings composable
|
||||
|
||||
## API Integration ✅
|
||||
|
||||
- All settings are saved to `/api/devtool/config/site-settings`
|
||||
- Font size is included in the POST request body
|
||||
- Settings load correctly on page refresh
|
||||
- Changes persist across browser sessions
|
||||
|
||||
## Components Updated ✅
|
||||
|
||||
1. **pages/devtool/config/site-settings/index.vue**
|
||||
- Added font size stepper
|
||||
- Added Google Fonts dropdown
|
||||
- Enhanced live preview
|
||||
- Added visual feedback
|
||||
|
||||
2. **components/layouts/Header.vue**
|
||||
- Applied dynamic font sizing
|
||||
- Respects show/hide toggle
|
||||
|
||||
3. **components/layouts/sidemenu/index.vue**
|
||||
- Applied scaled font sizing
|
||||
- Respects show/hide toggle
|
||||
|
||||
4. **composables/useSiteSettings.js**
|
||||
- Added siteNameFontSize field
|
||||
- Maintains global state consistency
|
||||
|
||||
## Testing Checklist ✅
|
||||
|
||||
- [ ] Font size stepper works (12px - 36px range)
|
||||
- [ ] Font size preview updates in real-time
|
||||
- [ ] Font size applies to header site name
|
||||
- [ ] Font size applies to sidemenu site name (scaled)
|
||||
- [ ] Google Fonts dropdown has 15 options
|
||||
- [ ] Google Font selection applies immediately
|
||||
- [ ] Font source URL updates when Google Font selected
|
||||
- [ ] Show/hide toggle works for header
|
||||
- [ ] Show/hide toggle works for sidemenu
|
||||
- [ ] Live preview sidebar reflects all changes
|
||||
- [ ] Settings save and persist correctly
|
||||
- [ ] Dark mode compatibility
|
||||
- [ ] Mobile responsiveness
|
||||
- [ ] Toast notifications appear for font changes
|
||||
- [ ] All UI components follow design system
|
||||
Loading…
x
Reference in New Issue
Block a user