alumni_lookup

Sub-Phase 3.11: Dashboard Redesign

Champion Portal Development Sub-Phase 3.11

Status: ✅ COMPLETE
Completed: January 2025
Estimated Effort: 1-2 days Focus: Redesign dashboard to showcase Google News-style content sections

Prerequisites: Phase 3.10 complete (News/Events/Discussions index pages)

Related Documents:

../../DESIGN-GUIDELINES.md

3.10-content-index-pages.md

Completion Summary

What Was Implemented

Dashboard Changes:

✅ “From Your Communities” section redesigned with Google News layout:
- Discussions: 1 featured card + 3 compact cards (using _discussion_card_compact)
- News: 1 featured card + 3 compact cards (using _news_card_compact)
- Both support small_thumbnail: true option for right-column compact cards
✅ Events section redesigned with date badge rows (using _event_row partial)
✅ Communities card combined with leadership indicators (⭐ CL badge)
✅ Leadership Dashboard button shown when champion leads 1+ communities
✅ Events show community pills above title (show_community: true)
✅ Community card links always go to community show page (even for CLs)

Community Show Page Updates:

✅ Restructured to match dashboard pattern:
- Left column: Discussions section (Google News 1+3) + News section (Google News 1+3)
- Right column: Events card (using _event_row) + Members card
✅ Controller updated to provide 4 items (instead of 3) for Google News layout
✅ Uses same _discussion_card_compact and _news_card_compact partials as dashboard
✅ Consistent visual styling with gradient backgrounds and section headers
✅ Page width aligned with dashboard (max-w-7xl instead of max-w-5xl)
✅ CL links fixed to always go to community show page (not Leadership Dashboard)

Community Index Page (“Community Select”) Redesign:

✅ Replaced communities/index.html.erb with new “Community Select” design:
- “My Communities” section at top as simple grid (when user has communities)
- Warm welcome box explaining communities (when user has no communities)
- “You’re Invited” section for champions with pending community invitations
- “Explore All Communities” section with filter/sort options
- Removed “Joined” filter (redundant with My Communities section)
- Removed back link (simplified navigation)
✅ Controller updated to load @invited_community for invitation display
✅ Tests updated to match new page structure (h1/h2/h3 selectors)

Layout & Styling Fixes:

✅ Background opacity increased to 0.8 for campus image
✅ Footer made fully visible by adjusting gradient overlay
✅ Consistent max-width (max-w-7xl) across all community pages

Partial Enhancements:

✅ _discussion_card_compact.html.erb: Added small_thumbnail option
✅ _news_card_compact.html.erb: Added small_thumbnail option
✅ _event_row.html.erb: Added show_community option for community pills

Events Index Page Redesign:

✅ Redesigned from Google News-style layout to chronological flat list
✅ Created new _event_list_card.html.erb partial with:
- Date badge (left) with blue gradient, month abbrev + day
- Content section: Community pill, title (no truncation), location, time, description (no truncation)
- Thumbnail (right) at responsive sizes (w-20/w-28/w-36)
✅ Filter bar with:
- Time toggle (Upcoming/Past with counts)
- Community filter dropdown (My Communities + global)
- Location type filter (All/In Person/Virtual)
- Clear filters button
✅ Controller simplified with filter support, removed Google News variables
✅ Deleted deprecated index_past.html.erb (unified into main index with toggle)

Files Created/Modified

File	Change
`app/views/cp/dashboard/show.html.erb`	Major restructure with Google News layouts
`app/views/cp/communities/show.html.erb`	Restructured to match dashboard, width aligned to max-w-7xl
`app/views/cp/communities/index.html.erb`	Complete redesign as “Community Select” page
`app/views/cp/events/index.html.erb`	Complete rewrite with filter bar and chronological list
`app/views/cp/events/_event_list_card.html.erb`	NEW - Full-width horizontal event card for index
`app/views/cp/events/index_past.html.erb`	DELETED - Unified into main index with toggle
`app/controllers/cp/dashboard_controller.rb`	Updated loading methods
`app/controllers/cp/communities_controller.rb`	Updated limits, added `load_invited_community_context` to index
`app/controllers/cp/events_controller.rb`	Simplified index action with filter support
`app/views/cp/shared/_discussion_card_compact.html.erb`	Added `small_thumbnail` option
`app/views/cp/shared/_news_card_compact.html.erb`	Added `small_thumbnail` option
`app/views/cp/shared/_event_row.html.erb`	Added `show_community` option
`app/views/shared/_champion_footer.html.erb`	Fixed footer visibility with gradient overlay
`test/controllers/cp/communities_controller_test.rb`	Updated tests for new index page structure

1. Overview

Phase 3.11 redesigns the Champion Portal dashboard to leverage the new Google News-style content layouts from Phase 3.10. The dashboard becomes a unified hub showing featured content from discussions, news, and events.

Key Changes:

Left Column: “From Your Communities” becomes two sections (Discussions, Latest News) using the featured layouts from index pages
Right Column: Combine “Your Communities” with leadership indicator; improve “Upcoming Events” with date badges
Quick Actions: Larger icon buttons for better visual hierarchy

2. Interview Decisions

Question	Decision
Discussions layout	1 featured + 3 compact cards (same as discussions/index top section)
No communities fallback	Pull from national board (Phase 3.6)
News layout	1 featured + 3 compact cards (same as news/index top section)
News source	Pull from everything (champion’s communities + global posts)
Quick Actions styling	Larger icon buttons
Events count	Show 3 OR all within next 2 weeks (whichever is more)
Events styling	Date badge on left (blue gradient), no thumbnail, no description
Communities + Leadership	Combined card with CL indicator; Leadership Dashboard button if CL for 1+ communities
Communities “View All”	Links to existing `cp_communities_path`
“From Belmont Community”	Replaced by “Latest News” with real posts
“Community Snapshot” vs “My District”	Same concept (keeping existing)

Community Select Page (Index) Decisions

Question	Decision
My Communities section	Simple grid layout (option A)
Filter dropdown	Remove “Joined” filter since My Communities shows joined ones (option B)
Back link	Remove it (option A)
No communities state	Show warm, inviting informational box about communities (option B)

3. Layout Specification

Left Column (2/3 width)

┌─────────────────────────────────────────────────────────────────┐
│ 1. NEXT STEPS (if needed) - keep as is                          │
├─────────────────────────────────────────────────────────────────┤
│ 2. SUGGESTED COMMUNITIES (if needed) - keep as is               │
├─────────────────────────────────────────────────────────────────┤
│ 3. FROM YOUR COMMUNITIES                                        │
│   ┌───────────────────────────────────────────────────────────┐ │
│   │ 💬 Discussions                              View all →    │ │
│   │ ┌─────────────────┬─────────────────────────────────────┐ │ │
│   │ │ FEATURED CARD   │ Compact Card 1                      │ │ │
│   │ │ (large, image   │─────────────────────────────────────│ │ │
│   │ │  on top)        │ Compact Card 2                      │ │ │
│   │ │                 │─────────────────────────────────────│ │ │
│   │ │                 │ Compact Card 3                      │ │ │
│   │ └─────────────────┴─────────────────────────────────────┘ │ │
│   └───────────────────────────────────────────────────────────┘ │
│   ┌───────────────────────────────────────────────────────────┐ │
│   │ 📰 Latest News                              View all →    │ │
│   │ ┌─────────────────┬─────────────────────────────────────┐ │ │
│   │ │ FEATURED CARD   │ Compact Card 1                      │ │ │
│   │ │ (large, image   │─────────────────────────────────────│ │ │
│   │ │  on top)        │ Compact Card 2                      │ │ │
│   │ │                 │─────────────────────────────────────│ │ │
│   │ │                 │ Compact Card 3                      │ │ │
│   │ └─────────────────┴─────────────────────────────────────┘ │ │
│   └───────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ 4. QUICK ACTIONS - larger icon buttons                          │
└─────────────────────────────────────────────────────────────────┘

Right Column (1/3 width)

┌─────────────────────────────────────────┐
│ 1. MY DISTRICT CARD - keep as is        │
├─────────────────────────────────────────┤
│ 2. UPCOMING EVENTS              View all│
│   ┌───────────────────────────────────┐ │
│   │ [DATE]  Event Title              │ │
│   │ [BADGE] Venue Name               │ │
│   │ [mm/dd] Community pill(s)        │ │
│   └───────────────────────────────────┘ │
│   (repeat for each event)               │
├─────────────────────────────────────────┤
│ 3. YOUR COMMUNITIES     Manage → View all│
│   ┌───────────────────────────────────┐ │
│   │ ⭐ Nashville, TN (CL indicator)  │ │
│   │ ○ Belmont MOB                    │ │
│   │ ○ College of Music               │ │
│   └───────────────────────────────────┘ │
│   [Leadership Dashboard] (if CL)        │
├─────────────────────────────────────────┤
│ 4. MESSAGES - keep as is                │
├─────────────────────────────────────────┤
│ 5. YOUR PROFILE - keep as is            │
└─────────────────────────────────────────┘

4. Detailed Specifications

4.1 Discussions Section (Left Column)

Data Source:

Champion’s communities’ board posts
If no communities: pull from national board (Alumni Champions community)
Order by hotness score (same as discussions/index)

Layout:

Reuse _discussion_card_compact.html.erb partial with featured: true/false
1 featured card (left, large with image on top)
3 compact cards (right column, stacked vertically)
“View all →” links to cp_discussions_path

Empty State:

Show “No discussions yet” message
Link to browse communities

4.2 Latest News Section (Left Column)

Data Source:

All published news posts visible to champion (communities + global)
Order by published_at (newest first)

Layout:

Reuse _news_card_compact.html.erb partial with featured: true/false
1 featured card (left, large with image on top)
3 compact cards (right column, stacked vertically)
“View all →” links to cp_news_index_path

Empty State:

Show “No news posts yet” message

4.3 Upcoming Events Section (Right Column)

Data Source:

All published events visible to champion
Filter: starts within next 2 weeks OR first 3 (whichever is more)
Order by start_datetime

Layout:

Simplified event row:

┌────────────────────────────────────────┐
│ ┌─────┐  Event Title                   │
│ │ MON │  Location / Virtual            │
│ │  15 │  Community pill(s)             │
│ └─────┘                                │
└────────────────────────────────────────┘

Date badge: Blue gradient box with month abbrev + day number (like compact event cards)
NO thumbnail image
NO description
Show community pill(s) if multiple communities

Empty State:

“No upcoming events” message

4.4 Your Communities Section (Right Column - Combined)

Combines:

Current “Your Communities” card
Current “My Leadership” card

Layout:

┌─────────────────────────────────────────┐
│ Your Communities              Manage →  │
│                               View all →│
├─────────────────────────────────────────┤
│ ⭐ Nashville, TN              →  1   1  │
│ ○  Belmont MOB               →         │
│ ○  College of Music          →  2      │
├─────────────────────────────────────────┤
│ [Leadership Dashboard]  (if CL for 1+) │
└─────────────────────────────────────────┘

Show CL indicator (⭐ or “CL” badge) next to communities they lead
Keep activity badges (news count, event count)
Keep “Manage →” link
Add “View all →” link to cp_communities_path
Show “Leadership Dashboard” button only if champion is CL for 1+ communities
Remove separate “My Leadership” card

4.5 Quick Actions (Bottom)

Redesign: Larger icon buttons (cards instead of pills)

┌─────────────────────────────────────────────────────────────────┐
│ QUICK ACTIONS                                                   │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐│
│ │   ✏️    │ │   🔍    │ │   👥    │ │   ❓    │ │   ⚙️   ││
│ │  Edit   │ │  Find   │ │ Invite  │ │  Help   │ │Settings ││
│ │ Profile │ │ Alumni  │ │ Friends │ │         │ │         ││
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └─────────┘│
└─────────────────────────────────────────────────────────────────┘

5. Controller Changes

Update DashboardController#show to load:

# Discussions (for featured section)
@featured_discussions = load_featured_discussions(4) # 1 featured + 3 compact

# News (for featured section)  
@featured_news = load_featured_news(4) # 1 featured + 3 compact

# Events (2 weeks or min 3)
@dashboard_events = load_dashboard_events

# Communities with CL status
@my_communities_with_cl_status = load_communities_with_cl_status

6. Deliverables

7. Files Modified

File	Changes
`app/controllers/cp/dashboard_controller.rb`	Added featured discussions/news loading, 2-week events logic
`app/views/cp/dashboard/show.html.erb`	Major restructure with Google News layouts for left column, event rows for right
`app/views/cp/shared/_event_row.html.erb`	Simplified event row with date badge, `show_community` option
`app/views/cp/shared/_discussion_card_compact.html.erb`	Added `small_thumbnail` option
`app/views/cp/shared/_news_card_compact.html.erb`	Added `small_thumbnail` option
`app/views/cp/communities/show.html.erb`	Restructured to match dashboard pattern, width aligned
`app/views/cp/communities/index.html.erb`	Complete redesign as “Community Select” page
`app/controllers/cp/communities_controller.rb`	Updated limits, added `load_invited_community_context` to index
`app/views/shared/_champion_footer.html.erb`	Fixed footer visibility with gradient overlay
`test/controllers/cp/communities_controller_test.rb`	Updated tests for new index page structure

alumni_lookup

Sub-Phase 3.11: Dashboard Redesign

Completion Summary

What Was Implemented

Files Created/Modified

1. Overview

2. Interview Decisions

Community Select Page (Index) Decisions

3. Layout Specification

Left Column (2/3 width)

Right Column (1/3 width)

4. Detailed Specifications

4.1 Discussions Section (Left Column)

4.2 Latest News Section (Left Column)

4.3 Upcoming Events Section (Right Column)

4.4 Your Communities Section (Right Column - Combined)

4.5 Quick Actions (Bottom)

5. Controller Changes

6. Deliverables

7. Files Modified

8. Definition of Done