mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
- Extract LogoItem interface to separate file - Move all styles into :host block - Add Bootstrap utility classes to HTML template - Order object properties alphabetically - Clean up landing-page.scss duplicate styles - Remove LOGO_CAROUSEL_IMPLEMENTATION.md filepull/5671/head
URAYUSHJAIN
3 months ago
8 changed files with 218 additions and 394 deletions
@ -1,98 +0,0 @@ |
|||||
# Logo Carousel Component Implementation |
|
||||
|
|
||||
## Summary |
|
||||
|
|
||||
Successfully implemented the infinite logo carousel component as requested in issue #5660. |
|
||||
|
|
||||
## Files Created |
|
||||
|
|
||||
### 1. Component Files |
|
||||
|
|
||||
- `libs/ui/src/lib/logo-carousel/logo-carousel.component.ts` - Main component logic |
|
||||
- `libs/ui/src/lib/logo-carousel/logo-carousel.component.html` - Template |
|
||||
- `libs/ui/src/lib/logo-carousel/logo-carousel.component.scss` - Styles with CSS animation |
|
||||
- `libs/ui/src/lib/logo-carousel/index.ts` - Export file |
|
||||
- `libs/ui/src/lib/logo-carousel/logo-carousel.component.stories.ts` - Storybook story |
|
||||
|
|
||||
### 2. Modified Files |
|
||||
|
|
||||
- `apps/client/src/app/pages/landing/landing-page.component.ts` - Added import and component usage |
|
||||
- `apps/client/src/app/pages/landing/landing-page.html` - Replaced static logo grid with carousel |
|
||||
|
|
||||
## Implementation Details |
|
||||
|
|
||||
### Features Implemented |
|
||||
|
|
||||
✅ **Pure CSS Animation**: Uses `@keyframes` for infinite horizontal scrolling |
|
||||
✅ **Responsive Design**: Adapts to different screen sizes (mobile, tablet, desktop) |
|
||||
✅ **Accessibility**: |
|
||||
|
|
||||
- Proper ARIA labels |
|
||||
- Pause animation on hover |
|
||||
- Screen reader friendly |
|
||||
✅ **Dark Theme Support**: Automatic theme switching |
|
||||
✅ **Performance**: |
|
||||
- CSS-only animation (no JavaScript) |
|
||||
- Uses `transform: translateX()` for GPU acceleration |
|
||||
✅ **Seamless Loop**: Duplicates logos for continuous scrolling |
|
||||
✅ **Interactive**: Hover effects with scaling and opacity changes |
|
||||
|
|
||||
### Technical Approach |
|
||||
|
|
||||
- **Animation Technique**: Duplicates the logo set and uses CSS `translateX(-50%)` to create seamless infinite scroll |
|
||||
- **Browser Compatibility**: Added `-webkit-` prefixes for mask properties |
|
||||
- **Styling**: Copied and adapted existing logo styles from landing page |
|
||||
- **Theming**: Uses CSS custom properties for theme-aware gradients |
|
||||
|
|
||||
### Animation Details |
|
||||
|
|
||||
- **Duration**: 40 seconds for full cycle |
|
||||
- **Direction**: Left to right horizontal scroll |
|
||||
- **Easing**: Linear for consistent speed |
|
||||
- **Interaction**: Pauses on hover for accessibility |
|
||||
|
|
||||
### CSS Features |
|
||||
|
|
||||
- Gradient fade masks on left/right edges for smooth visual effect |
|
||||
- Responsive logo sizing (3rem height on desktop, scales down on mobile) |
|
||||
- Hover effects with 1.05x scale and opacity fade |
|
||||
- Proper mask image handling for SVG logos |
|
||||
|
|
||||
## Integration |
|
||||
|
|
||||
The component is integrated into the landing page replacing the previous static 4-column logo grid. The "As seen in" text remains above the carousel. |
|
||||
|
|
||||
## Browser Support |
|
||||
|
|
||||
- Modern browsers with CSS mask support |
|
||||
- Fallback styles for older browsers |
|
||||
- Responsive design for all device sizes |
|
||||
|
|
||||
## Usage |
|
||||
|
|
||||
```html |
|
||||
<gf-logo-carousel></gf-logo-carousel> |
|
||||
``` |
|
||||
|
|
||||
The component is self-contained and requires no additional configuration. |
|
||||
|
|
||||
## Testing Recommendations |
|
||||
|
|
||||
1. Test on different screen sizes |
|
||||
2. Verify smooth animation performance |
|
||||
3. Check accessibility with screen readers |
|
||||
4. Test dark/light theme switching |
|
||||
5. Verify all logo links work correctly |
|
||||
|
|
||||
## Next Steps |
|
||||
|
|
||||
1. Install dependencies: `npm install` |
|
||||
2. Build application: `npm run build:production` |
|
||||
3. Test in browser: `npm run start:client` |
|
||||
4. View in Storybook: `npm run start:storybook` |
|
||||
|
|
||||
The implementation follows the exact requirements from issue #5660: |
|
||||
|
|
||||
- ✅ Standalone Angular component at `@ghostfolio/ui/logo-carousel` |
|
||||
- ✅ Pure CSS infinite scrolling animation |
|
||||
- ✅ Integrated into landing page replacing static logos |
|
||||
@ -0,0 +1,7 @@ |
|||||
|
export interface LogoItem { |
||||
|
className: string; |
||||
|
isMask?: boolean; |
||||
|
name: string; |
||||
|
title: string; |
||||
|
url: string; |
||||
|
} |
||||
Loading…
Reference in new issue