Skip to content

Isolate Story Share Portal with dedicated purple-themed layout #903

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 6 commits into from
Feb 10, 2026
Merged

Isolate Story Share Portal with dedicated purple-themed layout #903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
adefd3a
Initial plan
Copilot Feb 10, 2026
3b52c44
Redesign share_portal page with Tailwind CSS to match design
Copilot Feb 10, 2026
65c507b
Add full-width layout support for share_portal page
Copilot Feb 10, 2026
09576f0
Address code review feedback: add accessibility labels and use dynami…
Copilot Feb 10, 2026
5805534
Create separate layout for story share portal with purple navigation
Copilot Feb 10, 2026
2ee3506
Address code review feedback: remove redundant nav wrapper and duplic…
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
2 changes: 2 additions & 0 deletions app/controllers/stories_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@
@stories = filtered.paginate(page: params[:page], per_page: per_page).decorate

@count_display = if filtered.count == base_scope.count
base_scope.count

Check failure on line 35 in app/controllers/stories_controller.rb

View workflow job for this annotation

GitHub Actions / rubocop 

Layout/IndentationWidth: Use 2 (not 19) spaces for indentation.
else

Check failure on line 36 in app/controllers/stories_controller.rb

View workflow job for this annotation

GitHub Actions / rubocop 

Layout/ElseAlignment: Align `else` with `@count_display`.
"#{filtered.count}/#{base_scope.count}"
end

Check failure on line 38 in app/controllers/stories_controller.rb

View workflow job for this annotation

GitHub Actions / rubocop 

Layout/EndAlignment: `end` at 38, 21 is not aligned with `@count_display = if` at 34, 4.
@featured_story = Story.first
sector_names = [
"Domestic Violence",
Expand All @@ -48,6 +48,8 @@
.select { |story| story.sectors.any? { |s| s.name == focus } }
end
@popular_stories = @stories.sort_by { |s| s.bookmarks.size }.reverse.first(6)

Check failure on line 51 in app/controllers/stories_controller.rb

View workflow job for this annotation

GitHub Actions / rubocop 

Layout/TrailingWhitespace: Trailing whitespace detected.
render layout: "share_portal"
end

def show
Expand Down
2 changes: 1 addition & 1 deletion app/frontend/stylesheets/application.tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
bg-indigo-100
bg-orange-100
bg-pink-100
bg-purple-100 bg-purple-200 bg-purple-500
bg-purple-100 bg-purple-200 bg-purple-500 bg-purple-700 bg-purple-800
bg-red-800
bg-yellow-200

Expand Down
36 changes: 36 additions & 0 deletions app/views/layouts/share_portal.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>

<html>
<head>
<title>Story Share - AWBW</title>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "activestorage" %>
<%= csrf_meta_tags %>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" type="image/png" href="<%= asset_path("favicon.png") %>">

<%= vite_stylesheet_tag "application.css" %>
<%= vite_client_tag %>
<%= vite_javascript_tag "application" %>
</head>

<body class="stories share_portal flex flex-col min-h-screen bg-white">
<div class="flex-grow" id="main">
<div class="sticky top-0 left-0 w-full z-50 print:hidden">
<!-- Story Share Portal Navbar -->
<%= render "shared/share_portal_navbar" %>
</div>

<div class="not-signed-in-user min-h-screen flex flex-col">
<%= render "shared/flash_messages" %>
<%= yield %>
</div>
</div>

<div class="site-footer print:hidden"><%= render "shared/footer" %></div>
<%= render "shared/footer_nav" %>
</body>
</html>
80 changes: 80 additions & 0 deletions app/views/shared/_share_portal_navbar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<nav class="relative bg-purple-800 print:hidden">
<div class="px-2 sm:px-6 lg:px-8">
<!-- Top Navigation Row -->
<div class="relative flex items-center justify-between py-3 border-b border-purple-700">
<div class="flex items-center space-x-8">
<div class="flex shrink-0 items-center">
<%= link_to share_portal_stories_path, class: "relative group" do %>
<%= image_tag("logo.png", class: "h-8 sm:h-10 w-auto block") %>
<%= image_tag("logo-color.png", class: "h-8 sm:h-10 absolute inset-0 w-auto opacity-0 transition-opacity duration-400 ease-out group-hover:opacity-100") %>
<% end %>
</div>

<div class="hidden md:flex space-x-6">
<%= link_to "Home", share_portal_stories_path, class: "text-white hover:text-purple-200 text-sm font-medium transition-colors" %>
<%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "text-white hover:text-purple-200 text-sm font-medium transition-colors" %>
<%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "text-white hover:text-purple-200 text-sm font-medium transition-colors" %>
<%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "text-white hover:text-purple-200 text-sm font-medium transition-colors" %>
<%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "text-white hover:text-purple-200 text-sm font-medium transition-colors" %>
</div>
</div>

<!-- Search Box -->
<div class="hidden md:block">
<form action="<%= share_portal_stories_path %>" method="get" class="relative">
<input
type="search"
name="q"
placeholder="Search keywords to find more stories..."
class="w-80 px-4 py-2 rounded-md text-gray-900 text-sm focus:outline-none focus:ring-2 focus:ring-purple-300"
value="<%= params[:q] %>"
/>
<button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700">
<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>
</form>
</div>

<!-- Mobile menu button -->
<div class="md:hidden">
<button
type="button"
class="relative inline-flex items-center justify-center rounded-md p-2 text-purple-200 hover:bg-purple-700 hover:text-white focus:outline-2 focus:ring-2 focus:ring-white"
data-action="click->toggle#toggle"
data-toggle-target="menu"
>
<span class="sr-only">Open main menu</span>
<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>

<!-- Mobile menu, hidden by default -->
<div class="md:hidden hidden" data-toggle-target="menu">
<div class="space-y-1 pb-3 pt-2">
<%= link_to "Home", share_portal_stories_path, class: "block px-3 py-2 text-white hover:bg-purple-700 hover:text-purple-100 text-base font-medium rounded-md" %>
<%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "block px-3 py-2 text-white hover:bg-purple-700 hover:text-purple-100 text-base font-medium rounded-md" %>
<%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "block px-3 py-2 text-white hover:bg-purple-700 hover:text-purple-100 text-base font-medium rounded-md" %>
<%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "block px-3 py-2 text-white hover:bg-purple-700 hover:text-purple-100 text-base font-medium rounded-md" %>
<%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "block px-3 py-2 text-white hover:bg-purple-700 hover:text-purple-100 text-base font-medium rounded-md" %>

<!-- Mobile Search -->
<div class="px-3 py-2">
<form action="<%= share_portal_stories_path %>" method="get">
<input
type="search"
name="q"
placeholder="Search stories..."
class="w-full px-4 py-2 rounded-md text-gray-900 text-sm"
value="<%= params[:q] %>"
/>
</form>
</div>
</div>
</div>
</div>
</nav>
Loading
Loading