Sicherhaven/Eventify-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rebuild desktop UI to match Figma + website, hero slider improvements

Browse Source 
- Desktop sidebar (262px, blue gradient, white pill nav), topbar (search + bell + avatar), responsive shell rewritten
- Desktop homepage: immersive hero with Ken Burns animation, pill category chips, date badge cards matching mvnew.eventifyplus.com/home
- Desktop calendar: 60/40 two-column layout with white background
- Desktop profile: full-width banner + 3-column event grids
- Desktop learn more: hero image + about/venue columns + gallery strip
- Desktop settings/contribute: polished to match design system
- Mobile hero slider: RepaintBoundary, animated dots with 44px tap targets, 5s auto-scroll, 8s post-swipe delay, shimmer loading, dynamic event type badge, human-readable dates
- Guest access: requiresAuth false on read endpoints
- Location fix: show place names instead of lat/lng coordinates
- Version 1.6.1+17

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sicherhaven
2026-03-21 13:28:19 +05:30
parent 9dd78be03e
commit bc6fde1b90
21 changed files with 2938 additions and 1285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/hero_slider_changes.csv Normal file
View File

@@ -0,0 +1,15 @@
Component,Old Implementation,New Implementation (matching mvnew.eventifyplus.com/home)
Hero Height,120px blue gradient banner,400px immersive full-width hero with rounded corners (20px)
Background Image,None (solid blue gradient via AppDecoration),Featured event image with CachedNetworkImage and BoxFit.cover
Ken Burns Animation,None,AnimationController 12s loop scaling 1.0 to 1.08 with easeInOut curve
Image Rotation,None,Timer.periodic every 6s cycling through first 5 events with AnimatedSwitcher crossfade
Dark Overlay,None,LinearGradient top-to-bottom rgba(0/0/0/0.3) to rgba(0/0/0/0.6)
Title Text,Welcome Back + username (14px + 22px),Featured event title (36px weight 800) or fallback Discover Amazing Events Near You
Subtitle,None,Event date + venue with calendar and location icons (14px white70)
CTA Button,None,Learn More or Explore Events button (#2563EB bg white text rounded 12px with blue glow shadow)
Indicator Dots,None,Bottom-right pill dots (active=24px white elongated / inactive=8px white40) for up to 5 events
Fallback (no events),Blue gradient with username,Blue gradient (#0F45CF to #082369) with static heading and subtitle
Featured Modal,None,showDialog with dark overlay (black87) plus 700x500 modal with event image gradient title and Learn More CTA
Close Button,None,Circular black50 button with white X icon top-right of modal
Animation Mixin,None,SingleTickerProviderStateMixin added to _HomeContentState
Disposal,None,AnimationController.dispose and Timer.cancel in dispose()
1 Component Old Implementation New Implementation (matching mvnew.eventifyplus.com/home)
2 Hero Height 120px blue gradient banner 400px immersive full-width hero with rounded corners (20px)
3 Background Image None (solid blue gradient via AppDecoration) Featured event image with CachedNetworkImage and BoxFit.cover
4 Ken Burns Animation None AnimationController 12s loop scaling 1.0 to 1.08 with easeInOut curve
5 Image Rotation None Timer.periodic every 6s cycling through first 5 events with AnimatedSwitcher crossfade
6 Dark Overlay None LinearGradient top-to-bottom rgba(0/0/0/0.3) to rgba(0/0/0/0.6)
7 Title Text Welcome Back + username (14px + 22px) Featured event title (36px weight 800) or fallback Discover Amazing Events Near You
8 Subtitle None Event date + venue with calendar and location icons (14px white70)
9 CTA Button None Learn More or Explore Events button (#2563EB bg white text rounded 12px with blue glow shadow)
10 Indicator Dots None Bottom-right pill dots (active=24px white elongated / inactive=8px white40) for up to 5 events
11 Fallback (no events) Blue gradient with username Blue gradient (#0F45CF to #082369) with static heading and subtitle
12 Featured Modal None showDialog with dark overlay (black87) plus 700x500 modal with event image gradient title and Learn More CTA
13 Close Button None Circular black50 button with white X icon top-right of modal
14 Animation Mixin None SingleTickerProviderStateMixin added to _HomeContentState
15 Disposal None AnimationController.dispose and Timer.cancel in dispose()

27
docs/landscape_changes.csv Normal file
View File

@@ -0,0 +1,27 @@
Phase,File,Action,Priority,Description
1,lib/core/constants.dart,MODIFY,Critical,"Add desktop breakpoints: wideDesktopBreakpoint=1200, sidebarExpandedWidth=240, sidebarCollapsedWidth=72, topBarHeight=64"
1,lib/widgets/desktop_sidebar.dart,CREATE,Critical,"Collapsible sidebar with icon-only (820-1200px) and full (1200px+) modes, AnimatedContainer transitions"
1,lib/widgets/desktop_topbar.dart,CREATE,Critical,"Responsive top bar with LayoutBuilder: search field, notifications, avatar, location"
1,lib/widgets/responsive_shell.dart,CREATE,Critical,"Master responsive scaffold wrapping all desktop screens: sidebar + topbar + content"
1,lib/screens/responsive_layout.dart,MODIFY,High,"Add three-tier breakpoint support (mobile/tablet/desktop) and ScreenSize enum"
1,lib/main.dart,MODIFY,Critical,"Update StartupScreen to use ResponsiveShell for desktop routing"
2,lib/screens/home_desktop_screen.dart,REWRITE,Critical,"Split 1077-line monolith into thin orchestrator + focused content widget"
2,lib/screens/home_desktop_screen.dart,REWRITE,Critical,"Replace marquee with rich hero carousel (PageView.builder matching mobile)"
2,lib/screens/home_desktop_screen.dart,REWRITE,Critical,"Replace fixed 3-column grid with SliverGrid + SliverGridDelegateWithMaxCrossAxisExtent"
2,lib/screens/home_desktop_screen.dart,REWRITE,High,"Add MouseRegion + SystemMouseCursors.click on all tappable cards"
3,lib/screens/desktop_login_screen.dart,REWRITE,High,"Video background + glassmorphism card matching mobile login style"
3,lib/screens/desktop_login_screen.dart,REWRITE,High,"Continue as Guest button prominent"
4,lib/screens/calendar_screen.dart,MODIFY,Medium,"Remove LandscapeShell; use Row with Card-based calendar left + event list right inside ResponsiveShell"
4,lib/screens/calendar_screen.dart,MODIFY,Medium,"New _eventCardLandscape() with larger images (200px), full title, date, location"
4,lib/screens/profile_screen.dart,MODIFY,Medium,"Remove LandscapeShell; Row with profile card left + tabbed events right"
4,lib/screens/profile_screen.dart,MODIFY,Medium,"DefaultTabController with Ongoing/Upcoming/Past tabs + SliverList per tab"
4,lib/screens/contribute_screen.dart,MODIFY,Medium,"Remove LandscapeShell; Row with contributor info/nav left + tab content right"
4,lib/screens/contribute_screen.dart,MODIFY,Medium,"Vertical nav list for landscape tabs instead of horizontal TabBar"
4,lib/screens/settings_screen.dart,MODIFY,Medium,"Remove LandscapeShell; Row with settings nav left + content right"
4,lib/screens/settings_screen.dart,MODIFY,Medium,"Fix logout navigation to use unified approach"
4,lib/screens/search_screen.dart,MODIFY,Medium,"Add landscape layout: full-width search bar + Row(popular cities, results)"
4,lib/screens/learn_more_screen.dart,MODIFY,Low,"Replace hard-coded 820 with AppConstants; add RepaintBoundary; LayoutBuilder for height"
5,lib/widgets/landscape_shell.dart,DELETE,High,"Replaced by responsive_shell.dart"
5,lib/widgets/landscape_section_header.dart,DELETE or REWRITE,Low,"Generalize into SectionHeader or delete if unused"
5,lib/core/app_decoration.dart,MODIFY,Low,"Add desktop-specific decorations: cardShadow, sidebarDecoration, topBarShadow"
8,lib/features/events/services/events_service.dart,MODIFY,Critical,"Set requiresAuth: false on getEventTypes, getEventsByPincode, getEventDetails, getEventsByMonthYear"
1 Phase File Action Priority Description
2 1 lib/core/constants.dart MODIFY Critical Add desktop breakpoints: wideDesktopBreakpoint=1200, sidebarExpandedWidth=240, sidebarCollapsedWidth=72, topBarHeight=64
3 1 lib/widgets/desktop_sidebar.dart CREATE Critical Collapsible sidebar with icon-only (820-1200px) and full (1200px+) modes, AnimatedContainer transitions
4 1 lib/widgets/desktop_topbar.dart CREATE Critical Responsive top bar with LayoutBuilder: search field, notifications, avatar, location
5 1 lib/widgets/responsive_shell.dart CREATE Critical Master responsive scaffold wrapping all desktop screens: sidebar + topbar + content
6 1 lib/screens/responsive_layout.dart MODIFY High Add three-tier breakpoint support (mobile/tablet/desktop) and ScreenSize enum
7 1 lib/main.dart MODIFY Critical Update StartupScreen to use ResponsiveShell for desktop routing
8 2 lib/screens/home_desktop_screen.dart REWRITE Critical Split 1077-line monolith into thin orchestrator + focused content widget
9 2 lib/screens/home_desktop_screen.dart REWRITE Critical Replace marquee with rich hero carousel (PageView.builder matching mobile)
10 2 lib/screens/home_desktop_screen.dart REWRITE Critical Replace fixed 3-column grid with SliverGrid + SliverGridDelegateWithMaxCrossAxisExtent
11 2 lib/screens/home_desktop_screen.dart REWRITE High Add MouseRegion + SystemMouseCursors.click on all tappable cards
12 3 lib/screens/desktop_login_screen.dart REWRITE High Video background + glassmorphism card matching mobile login style
13 3 lib/screens/desktop_login_screen.dart REWRITE High Continue as Guest button prominent
14 4 lib/screens/calendar_screen.dart MODIFY Medium Remove LandscapeShell; use Row with Card-based calendar left + event list right inside ResponsiveShell
15 4 lib/screens/calendar_screen.dart MODIFY Medium New _eventCardLandscape() with larger images (200px), full title, date, location
16 4 lib/screens/profile_screen.dart MODIFY Medium Remove LandscapeShell; Row with profile card left + tabbed events right
17 4 lib/screens/profile_screen.dart MODIFY Medium DefaultTabController with Ongoing/Upcoming/Past tabs + SliverList per tab
18 4 lib/screens/contribute_screen.dart MODIFY Medium Remove LandscapeShell; Row with contributor info/nav left + tab content right
19 4 lib/screens/contribute_screen.dart MODIFY Medium Vertical nav list for landscape tabs instead of horizontal TabBar
20 4 lib/screens/settings_screen.dart MODIFY Medium Remove LandscapeShell; Row with settings nav left + content right
21 4 lib/screens/settings_screen.dart MODIFY Medium Fix logout navigation to use unified approach
22 4 lib/screens/search_screen.dart MODIFY Medium Add landscape layout: full-width search bar + Row(popular cities, results)
23 4 lib/screens/learn_more_screen.dart MODIFY Low Replace hard-coded 820 with AppConstants; add RepaintBoundary; LayoutBuilder for height
24 5 lib/widgets/landscape_shell.dart DELETE High Replaced by responsive_shell.dart
25 5 lib/widgets/landscape_section_header.dart DELETE or REWRITE Low Generalize into SectionHeader or delete if unused
26 5 lib/core/app_decoration.dart MODIFY Low Add desktop-specific decorations: cardShadow, sidebarDecoration, topBarShadow
27 8 lib/features/events/services/events_service.dart MODIFY Critical Set requiresAuth: false on getEventTypes, getEventsByPincode, getEventDetails, getEventsByMonthYear

17
docs/landscape_rebuild_changes.csv Normal file
View File

@@ -0,0 +1,17 @@
Phase,File,Change Type,Description
1,lib/core/constants.dart,MODIFY,Updated sidebarExpandedWidth to 262px and removed sidebarCollapsedWidth
1,lib/widgets/desktop_sidebar.dart,REWRITE,Figma match: 262px fixed width with blue gradient and white pill selection and EVENTIFY logo with sparkle icon
1,lib/widgets/desktop_topbar.dart,REWRITE,Figma match: search input field plus notification bell plus user avatar and removed location widget
1,lib/widgets/responsive_shell.dart,REWRITE,Simplified to always show 262px sidebar on desktop and removed collapsed mode
2,lib/screens/home_desktop_screen.dart,REWRITE,Website-matching hero (400px Ken Burns animation plus dark overlay plus CTA) replacing welcome banner
2,lib/screens/home_desktop_screen.dart,MODIFY,Pill-shaped category chips (border-radius 999px) with blue active state matching website
2,lib/screens/home_desktop_screen.dart,MODIFY,Event cards enhanced with date badge overlay on image and blue/green icons for date/venue
2,lib/screens/home_desktop_screen.dart,MODIFY,Background color changed to #FAFBFC (off-white) matching website
2,lib/screens/home_desktop_screen.dart,ADD,Featured event modal dialog with large image plus gradient plus Learn More CTA plus close button
3,lib/screens/calendar_screen.dart,MODIFY,Desktop layout: calendar grid 60% left plus events panel 40% right with white background
3,lib/screens/calendar_screen.dart,MODIFY,Event cards use blue and green dot indicators for date and venue
4,lib/screens/profile_screen.dart,MODIFY,Desktop layout: full-width profile banner plus 3-column event grids for Upcoming and Past
4,lib/screens/profile_screen.dart,MODIFY,Added _buildDesktopLayout and _buildDesktopEventSection and _buildDesktopEventGridCard
5,lib/screens/learn_more_screen.dart,MODIFY,Desktop layout: full-width 300px hero image plus About/Venue two-column plus gallery strip
5,lib/screens/learn_more_screen.dart,MODIFY,Added horizontal gallery with overflow count badge and Book Your Spot CTA
6,lib/features/events/services/events_service.dart,VERIFIED,Guest access confirmed working with requiresAuth false on 4 read endpoints
1 Phase File Change Type Description
2 1 lib/core/constants.dart MODIFY Updated sidebarExpandedWidth to 262px and removed sidebarCollapsedWidth
3 1 lib/widgets/desktop_sidebar.dart REWRITE Figma match: 262px fixed width with blue gradient and white pill selection and EVENTIFY logo with sparkle icon
4 1 lib/widgets/desktop_topbar.dart REWRITE Figma match: search input field plus notification bell plus user avatar and removed location widget
5 1 lib/widgets/responsive_shell.dart REWRITE Simplified to always show 262px sidebar on desktop and removed collapsed mode
6 2 lib/screens/home_desktop_screen.dart REWRITE Website-matching hero (400px Ken Burns animation plus dark overlay plus CTA) replacing welcome banner
7 2 lib/screens/home_desktop_screen.dart MODIFY Pill-shaped category chips (border-radius 999px) with blue active state matching website
8 2 lib/screens/home_desktop_screen.dart MODIFY Event cards enhanced with date badge overlay on image and blue/green icons for date/venue
9 2 lib/screens/home_desktop_screen.dart MODIFY Background color changed to #FAFBFC (off-white) matching website
10 2 lib/screens/home_desktop_screen.dart ADD Featured event modal dialog with large image plus gradient plus Learn More CTA plus close button
11 3 lib/screens/calendar_screen.dart MODIFY Desktop layout: calendar grid 60% left plus events panel 40% right with white background
12 3 lib/screens/calendar_screen.dart MODIFY Event cards use blue and green dot indicators for date and venue
13 4 lib/screens/profile_screen.dart MODIFY Desktop layout: full-width profile banner plus 3-column event grids for Upcoming and Past
14 4 lib/screens/profile_screen.dart MODIFY Added _buildDesktopLayout and _buildDesktopEventSection and _buildDesktopEventGridCard
15 5 lib/screens/learn_more_screen.dart MODIFY Desktop layout: full-width 300px hero image plus About/Venue two-column plus gallery strip
16 5 lib/screens/learn_more_screen.dart MODIFY Added horizontal gallery with overflow count badge and Book Your Spot CTA
17 6 lib/features/events/services/events_service.dart VERIFIED Guest access confirmed working with requiresAuth false on 4 read endpoints