Skip to content

Add consistent page topper banners across resource views #1556

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

Open
maebeale wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add consistent page topper banners across resource views #1556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 13 additions & 8 deletions app/views/community_news/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<%= render "shared/public_welcome_banner" %>

<% content_for(:page_bg_class, "public") %>
<div class="w-full max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:community_news) %> border border-gray-200 rounded-xl shadow p-6">
<div class="w-full">
<div class="flex items-start justify-between mb-6">
<div class="pr-6">
<h2 class="text-2xl font-semibold mb-2">News</h2>
<p class="text-gray-600">Find recent newsletters and other community postings</p>
<div class="w-full max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:community_news) %> border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- News header banner -->
<div class="<%= DomainTheme.bg_class_for(:community_news, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:community_news, intensity: 300) %> px-8 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:community_news, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:community_news, intensity: 900) %> uppercase tracking-wide">News</span>
</div>

<div class="text-right">
<div class="flex flex-wrap gap-2">
<% if allowed_to?(:new?, CommunityNews) %>
<%= link_to "New community news",
new_community_news_path,
class: "admin-only bg-blue-100 btn btn-primary-outline" %>
<% end %>
</div>
</div>
</div>
<div class="<%= DomainTheme.bg_class_for(:community_news) %> p-4 sm:p-8 space-y-6">
<p class="text-gray-600">Find recent newsletters and other community postings</p>

<%= render "search_boxes" %>

Expand Down
21 changes: 16 additions & 5 deletions app/views/community_news/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
<% content_for(:page_bg_class, "admin-or-public-or-authpublished") %>
<% community_news_url = community_news_url(@community_news) %>
<% community_news_title = ERB::Util.url_encode(@community_news.title) %>
<div class="<%= DomainTheme.bg_class_for(:community_news) %> border border-gray-200 rounded-xl shadow p-6">
<!-- Top Right Utility Links -->
<div class="flex flex-wrap justify-end gap-2 mb-4">
<div class="border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- Community News header banner -->
<div class="<%= DomainTheme.bg_class_for(:community_news, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:community_news, intensity: 300) %> px-8 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:community_news, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:community_news, intensity: 900) %> uppercase tracking-wide">Community News</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "Community news", community_news_index_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "News", community_news_index_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% if allowed_to?(:edit?, @community_news) %>
<%= link_to "Edit", edit_community_news_path(@community_news),
class: "admin-only bg-blue-100 text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
Expand All @@ -15,7 +23,9 @@
</span>
<%= print_button(@community_news, printable_type: "CommunityNews", button_text: "Print page") %>
</div>

</div>
</div>
<div class="<%= DomainTheme.bg_class_for(:community_news) %> p-4 sm:p-8 space-y-6">
<!-- Header Row -->
<div class="w-full bg-white rounded-lg shadow-md p-6 space-y-6">
<div class="max-w-3xl mx-auto px-4 py-10 text-gray-800">
Expand Down Expand Up @@ -80,4 +90,5 @@
</div>
</div>
</div>
</div>
</div>
30 changes: 15 additions & 15 deletions app/views/events/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
<%= render "shared/public_welcome_banner" %>

<% content_for(:page_bg_class, "public") %>
<div class="max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:events) %> border border-gray-200 rounded-xl shadow p-6">
<!-- Header Row -->
<div class="w-full">
<div class="flex items-start justify-between mb-6">
<div class="pr-6">
<h1 class="text-2xl font-semibold mb-2">Events</h1>

<p class="text-gray-600 max-w-2xl">
Join us for our virtual events including art workshops, facilitator trainings and other opportunities to create, connect and be in community
</p>
<div class="max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:events) %> border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- Events header banner -->
<div class="<%= DomainTheme.bg_class_for(:events, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:events, intensity: 300) %> px-8 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:events, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:events, intensity: 900) %> uppercase tracking-wide">Events</span>
</div>
<div class="text-right text-end">
<div class="flex flex-wrap gap-2">
<% if allowed_to?(:new?, Event) %>
<div class="admin-only bg-blue-100">
<%= link_to "New event",
Expand All @@ -22,10 +21,11 @@
<% end %>
</div>
</div>
<!-- Divider -->
<div class="w-full mt-6">
<hr class="border-gray-300 mb-6">
</div>
</div>
<div class="<%= DomainTheme.bg_class_for(:events) %> p-4 sm:p-8 space-y-6">
<p class="text-gray-600 max-w-2xl">
Join us for our virtual events including art workshops, facilitator trainings and other opportunities to create, connect and be in community
</p>

<% if @events.any? %>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
Expand Down
39 changes: 23 additions & 16 deletions app/views/events/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,29 @@
<button onclick="window.close()" class="btn btn-secondary-outline btn-sm">Close preview</button>
</div>
<% else %>
<!-- Top Right Actions -->
<div class="flex flex-wrap items-center gap-2 mb-4">
<%= link_to "← Back to Events", events_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<div class="ml-auto flex flex-wrap gap-2">
<%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "Events", events_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% if allowed_to?(:manage?, @event) && @event.object.event_forms.registration.exists? %>
<%= link_to "Register (as visitor)", new_event_public_registration_path(@event), class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1 admin-only bg-blue-100" %>
<% end %>
<% if allowed_to?(:edit?, @event) %>
<%= link_to "Edit", edit_event_path(@event), class: "admin-only bg-blue-100 text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% end %>
<% if allowed_to?(:manage?, @event) %>
<%= link_to "Manage registrants", manage_event_path(@event), class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1 admin-only bg-blue-100" %>
<% end %>
<span class="inline-block text-sm"><%= render "bookmarks/editable_bookmark_button", resource: @event.object %></span>
<!-- Event header banner -->
<div class="<%= DomainTheme.bg_class_for(:events, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:events, intensity: 300) %> px-8 py-3 mb-4 rounded-xl">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:events, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:events, intensity: 900) %> uppercase tracking-wide">Event</span>
</div>
<div class="flex flex-wrap gap-2">
<%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "Events", events_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
Comment on lines +18 to +20
<% if allowed_to?(:manage?, @event) && @event.object.event_forms.registration.exists? %>
<%= link_to "Register (as visitor)", new_event_public_registration_path(@event), class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1 admin-only bg-blue-100" %>
<% end %>
<% if allowed_to?(:edit?, @event) %>
<%= link_to "Edit", edit_event_path(@event), class: "admin-only bg-blue-100 text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% end %>
<% if allowed_to?(:manage?, @event) %>
<%= link_to "Manage registrants", manage_event_path(@event), class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1 admin-only bg-blue-100" %>
<% end %>
<span class="inline-block text-sm"><%= render "bookmarks/editable_bookmark_button", resource: @event.object %></span>
</div>
</div>
</div>
<% end %>
Expand Down
26 changes: 15 additions & 11 deletions app/views/faqs/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
<% content_for(:page_bg_class, "public") %>
<%= render "shared/public_welcome_banner" %>

<div class="w-full max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:faqs) %> border border-gray-200 rounded-xl shadow p-6">
<!-- Header Row -->
<div class="w-full">
<div class="flex items-start justify-between mb-4">
<div class="pr-6">
<h2 class="text-2xl font-semibold">FAQs</h2>
<p class="text-gray-600 mt-2">Find answers to common questions here. If you don't see what you need, please reach out to us at <%= mail_to ENV.fetch("REPLY_TO_EMAIL", "programs@awbw.org"), class: "text-blue-600 hover:text-blue-800" %>.</p>
<div class="w-full max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:faqs) %> border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- FAQs header banner -->
<div class="<%= DomainTheme.bg_class_for(:faqs, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:faqs, intensity: 300) %> px-8 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:faqs, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:faqs, intensity: 900) %> uppercase tracking-wide">FAQs</span>
</div>

<div class="text-right text-end">
<div class="flex flex-wrap gap-2">
<% if allowed_to?(:new?, Faq) %>
<%= link_to "New FAQ",
new_faq_path,
class: "admin-only bg-blue-100 btn btn-primary-outline" %>
<% end %>
</div>
</div>
</div>
<div class="<%= DomainTheme.bg_class_for(:faqs) %> p-4 sm:p-8 space-y-6">
<p class="text-gray-600">Find answers to common questions here. If you don't see what you need, please reach out to us at <%= mail_to ENV.fetch("REPLY_TO_EMAIL", "programs@awbw.org"), class: "text-blue-600 hover:text-blue-800" %>.</p>

<!-- Filter form -->
<div class="mt-4"><%= render "search_boxes" %></div>
<%= render "search_boxes" %>

<!-- Inner White Card -->
<div class="bg-white rounded-lg shadow-md p-6 mt-4">
<div class="bg-white rounded-lg shadow-md p-6">
<div
class="animate-fade"
data-controller="sortable"
Expand Down
17 changes: 15 additions & 2 deletions app/views/faqs/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
<% content_for(:page_bg_class, "admin-or-public-or-authpublished") %>
<div class="<%= DomainTheme.bg_class_for(:faqs) %> border border-gray-200 rounded-xl shadow p-6">
<div class="flex flex-wrap justify-end gap-2 mb-4">
<div class="border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- FAQ header banner -->
<div class="<%= DomainTheme.bg_class_for(:faqs, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:faqs, intensity: 300) %> px-8 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:faqs, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:faqs, intensity: 900) %> uppercase tracking-wide">FAQ</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "FAQs", faqs_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% if allowed_to?(:edit?, @faq) %>
<%= link_to "Edit", edit_faq_path(@faq), class: "admin-only bg-blue-100 text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% end %>
</div>
</div>
</div>
<div class="<%= DomainTheme.bg_class_for(:faqs) %> p-4 sm:p-8 space-y-6">
<h1 class="text-2xl font-semibold text-gray-900 mb-6">
<%= @faq.class.model_name.human %>
Details
Expand All @@ -16,4 +28,5 @@
<%= render @faq, hide_options: true %>
</div>
</div>
</div>
</div>
22 changes: 15 additions & 7 deletions app/views/organizations/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
<% content_for(:page_bg_class, "admin-or-auth") %>
<div class="max-w-7xl mx-auto <%= DomainTheme.bg_class_for(:organizations) %> border border-gray-200 rounded-xl shadow p-6">
<!-- Header -->
<div class="flex flex-col sm:flex-row justify-between items-center mb-6 gap-3">
<div id="organization_count">
<h1 class="text-2xl font-semibold text-gray-900">Organizations</h1>
</div>
<div class="max-w-7xl mx-auto border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- Organizations header banner -->
<div class="<%= DomainTheme.bg_class_for(:organizations, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:organizations, intensity: 300) %> px-8 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:organizations, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:organizations, intensity: 900) %> uppercase tracking-wide">Organizations</span>
</div>
<div class="flex flex-wrap gap-2">
<% if allowed_to?(:new?, Organization) %>
<%= link_to "New Organization",
new_organization_path,
class: "admin-only bg-blue-100 btn btn-primary-outline" %>
<% end %>
</div>

</div>
</div>
<div class="<%= DomainTheme.bg_class_for(:organizations) %> p-4 sm:p-8 space-y-6">
<!-- Optional filters -->
<%= render "search_boxes" %>

Expand Down Expand Up @@ -53,4 +60,5 @@
<div class="h-8 w-10 bg-gray-200 rounded"></div>
</div>
<% end %>
</div>
</div>
35 changes: 18 additions & 17 deletions app/views/organizations/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,27 @@
<div class="border border-gray-200 rounded-xl shadow overflow-hidden">
<!-- Organization header banner -->
<div class="<%= DomainTheme.bg_class_for(:organizations, intensity: 100) %> border-b <%= DomainTheme.border_class_for(:organizations, intensity: 300) %> px-8 py-3">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:organizations, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:organizations, intensity: 900) %> uppercase tracking-wide">Organization Profile</span>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 <%= DomainTheme.text_class_for(:organizations, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
<span class="text-sm font-semibold <%= DomainTheme.text_class_for(:organizations, intensity: 900) %> uppercase tracking-wide">Organization Profile</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "Organizations", organizations_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% if allowed_to?(:edit?, @organization) %>
<%= link_to "Edit", edit_organization_path(@organization),
class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% end %>
<span class="inline-block text-sm">
<%= render "bookmarks/editable_bookmark_button", resource: @organization %>
</span>
</div>
</div>
</div>
<div class="p-8">
<!-- Header actions -->
<div class="flex flex-wrap justify-end gap-2 mb-4">
<%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<%= link_to "Organizations", organizations_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% if allowed_to?(:edit?, @organization) %>
<%= link_to "Edit", edit_organization_path(@organization),
class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
<% end %>
<span class="inline-block text-sm">
<%= render "bookmarks/editable_bookmark_button", resource: @organization %>
</span>
</div>
<!-- Header: logo + name + badges -->
<div class="flex flex-col md:flex-row md:items-center gap-6 mb-8">
<div class="flex-shrink-0 flex justify-center md:justify-start">
Expand Down
Loading