Skip to content

Redesign Story Share Portal to match visual specifications #905

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
+271 −139
Merged

Redesign Story Share Portal to match visual specifications #905

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
9d81b0f
Initial plan
Copilot Feb 10, 2026
7c9de43
Update story share portal navigation and layout to match design
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
107 changes: 84 additions & 23 deletions app/views/shared/_share_portal_navbar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,87 @@
<nav class="relative bg-white border-b-4 border-purple-700 print:hidden">
<div class="px-2 sm:px-6 lg:px-8">
<!-- Row 1: Logo and Main Navigation -->
<div class="nav-row relative flex items-center justify-between py-3">
<div class="flex items-center space-x-8">
<div class="nav-row relative flex items-center justify-center py-3">
<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") %>
<% end %>
</div>
</div>

<div class="hidden lg:flex space-x-6">
<%= link_to "Who We Are", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "What We Do", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Ways to Help", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Our Next Chapter", "#", class: "text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<div class="hidden lg:flex space-x-6 items-center">
<div class="relative group">
<%= link_to "Who We Are", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<!-- Dropdown -->
<div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
<div class="py-1">
<%= link_to "Our Story", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Our Team", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Contact Us", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
</div>
</div>
</div>
<div class="relative group">
<%= link_to "What We Do", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<!-- Dropdown -->
<div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
<div class="py-1">
<%= link_to "Workshops", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Training", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Research", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
</div>
</div>
</div>
<div class="relative group">
<%= link_to "Ways to Help", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<!-- Dropdown -->
<div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
<div class="py-1">
<%= link_to "Donate", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Volunteer", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Partner", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
</div>
</div>
</div>
<div class="relative group">
<%= link_to "Our Next Chapter", "#", class: "font-telefon text-gray-700 hover:text-purple-700 text-sm font-medium transition-colors" %>
<!-- Dropdown -->
<div class="absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
<div class="py-1">
<%= link_to "Vision", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Goals", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
<%= link_to "Updates", "#", class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" %>
</div>
</div>
</div>
</div>

<div class="flex items-center space-x-4">
<div class="flex items-center space-x-4 absolute right-2 sm:right-6 lg:right-8">
<%= link_to "Donate", "#", class: "hidden md:inline-flex px-6 py-2 bg-gray-800 text-white text-sm font-medium hover:bg-gray-900 transition-colors" %>

<!-- Lock Icon -->
<button class="hidden md:inline-flex text-gray-700 hover:text-purple-700 transition-colors" aria-label="Login">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</button>

<!-- Search Icon -->
<button class="hidden md:inline-flex text-gray-700 hover:text-purple-700 transition-colors" aria-label="Search">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>

<!-- Exit Icon -->
<button class="hidden md:inline-flex text-gray-700 hover:text-purple-700 transition-colors" aria-label="Exit">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
</button>

<!-- Mobile menu button -->
<div class="lg:hidden">
<button
Expand All @@ -40,26 +101,26 @@

<!-- Row 2: Focus Area Navigation -->
<div class="nav-row border-t border-gray-200">
<div class="hidden lg:flex items-center justify-start py-3 space-x-6">
<%= link_to "Home", share_portal_stories_path, class: "text-gray-800 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "text-red-700 hover:text-red-800 text-sm font-medium transition-colors" %>
<%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "text-gray-600 hover:text-gray-800 text-sm font-medium transition-colors" %>
<%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "text-green-700 hover:text-green-800 text-sm font-medium transition-colors" %>
<%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "text-purple-700 hover:text-purple-800 text-sm font-medium transition-colors" %>
<%= link_to "Additional Focus Areas", "#", class: "text-orange-600 hover:text-orange-700 text-sm font-medium transition-colors" %>
<div class="hidden lg:flex items-center justify-center py-3 space-x-6">
<%= link_to "Home", share_portal_stories_path, class: "font-telefon text-gray-800 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "font-telefon text-red-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "font-telefon text-green-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "font-telefon text-purple-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
<%= link_to "Additional Focus Areas", "#", class: "font-telefon text-orange-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
</div>
</div>

<!-- Row 3: Participant Type Navigation -->
<div class="nav-row border-t border-gray-200">
<div class="hidden lg:flex items-center justify-start py-3 space-x-6">
<%= link_to "Children", share_portal_stories_path(focus: "children"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Families", share_portal_stories_path(focus: "families"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Community", share_portal_stories_path(focus: "community"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Self", share_portal_stories_path(focus: "self"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "text-gray-600 hover:text-purple-700 text-sm font-medium transition-colors" %>
<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" %>

<!-- Search Box -->
<div class="ml-auto">
Expand Down
Loading
Loading