Skip to content

Refine Story Share Portal layout and visual hierarchy #911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maebeale merged 2 commits into from
Feb 10, 2026
Merged

Refine Story Share Portal layout and visual hierarchy #911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7488cae
Initial plan
Copilot Feb 10, 2026
3c0768c
Update Story Share Portal layout per feedback
Copilot Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions app/views/shared/_share_portal_navbar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<div class="flex items-center space-x-8 absolute left-2 sm:left-6 lg:left-8">
<div class="flex shrink-0 items-center">
<%= link_to share_portal_stories_path, class: "relative group" do %>
<%= image_tag("logo.png", class: "h-12 sm:h-14 w-auto block") %>
<%= image_tag("logo-color.png", class: "h-12 sm:h-14 absolute inset-0 w-auto opacity-0 transition-opacity duration-400 ease-out group-hover:opacity-100") %>
<%= image_tag("logo-with-tagline-436x80.jpg", class: "h-16 sm:h-20 w-auto block") %>
<% end %>
</div>
</div>
Expand Down Expand Up @@ -111,19 +110,21 @@
</div>
</div>

<!-- Row 3: Participant Type Navigation -->
<!-- Row 3: Participant Type Navigation and Search - Centered Below Row 2 -->
<div class="nav-row border-t border-gray-200">
<div class="hidden lg:flex items-center justify-center py-3 space-x-6">
<%= link_to "Children", share_portal_stories_path(focus: "children"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Families", share_portal_stories_path(focus: "families"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Community", share_portal_stories_path(focus: "community"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Self", share_portal_stories_path(focus: "self"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<div class="hidden lg:flex flex-col items-center justify-center py-3 space-y-3">
<div class="flex items-center space-x-6">
<%= link_to "Children", share_portal_stories_path(focus: "children"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Families", share_portal_stories_path(focus: "families"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Community", share_portal_stories_path(focus: "community"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Self", share_portal_stories_path(focus: "self"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
</div>

<!-- Search Box -->
<div class="ml-auto">
<!-- Search Box - Centered Below -->
<div>
<form action="<%= share_portal_stories_path %>" method="get" class="relative">
<input
type="search"
Expand Down
28 changes: 15 additions & 13 deletions app/views/stories/share_portal.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<%= @featured_story.sectors.first&.name || "SELF-CARE & PERSONAL GROWTH" %>
</div>
<!-- Black overlay bar at bottom with title -->
<div class="absolute bottom-0 left-0 right-0 bg-black/70 p-8 text-white">
<div class="absolute bottom-0 left-0 right-0 bg-black/50 p-8 text-white">
<h2 class="font-telefon text-3xl mb-2">
<%= @featured_story.title %>
</h2>
Expand Down Expand Up @@ -310,19 +310,19 @@

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0">
<%
# Define color mapping for different categories
# Define color mapping for different categories with translucent overlays
category_colors = {
"Self-Care & Personal Growth" => "bg-blue-600",
"Schools & Universities" => "bg-purple-600",
"Grief & Loss" => "bg-purple-600",
"Community Engagement" => "bg-teal-600",
"Domestic Violence" => "bg-pink-600",
"Social Justice" => "bg-green-600",
"Facilitator Spotlights" => "bg-purple-600"
"Self-Care & Personal Growth" => "bg-blue-600/70",
"Schools & Universities" => "bg-purple-600/70",
"Grief & Loss" => "bg-purple-600/70",
"Community Engagement" => "bg-teal-600/70",
"Domestic Violence" => "bg-pink-600/70",
"Social Justice" => "bg-green-600/70",
"Facilitator Spotlights" => "bg-purple-600/70"
}

# Default color for categories not in the mapping
default_color = "bg-gray-600"
default_color = "bg-gray-600/70"
%>

<% @popular_stories.first(4).each do |story| %>
Expand All @@ -333,18 +333,20 @@
%>

<%= link_to story_path(story), class: "group block relative aspect-[3/4] overflow-hidden hover:opacity-90 transition-opacity" do %>
<!-- Background image -->
<div class="absolute inset-0 bg-gray-200">
<%= render "assets/display_image",
resource: story,
variant: :hero %>
</div>
<!-- Overlay gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/60"></div>

<!-- Colored translucent overlay -->
<div class="absolute inset-0 <%= bg_color %>"></div>

<!-- Centered content -->
<div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
<!-- Square sector box -->
<div class="<%= bg_color %> text-white text-xs font-bold uppercase px-4 py-3 mb-4 w-32 h-12 flex items-center justify-center">
<div class="bg-white/20 backdrop-blur-sm text-white text-xs font-bold uppercase px-4 py-3 mb-4 w-32 h-12 flex items-center justify-center border border-white/30">
<%= sector_name %>
</div>
<!-- Title below -->
Expand Down