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
1 month 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