Add consistent page topper banners across resource views#1556
Open
maebeale wants to merge 1 commit into
Open
Conversation
Give index and show pages a unified header banner ("page topper") so
users get a consistent visual anchor and clearer hierarchy across the
app. Replace ad-hoc header rows and FontAwesome icons with domain-themed
banners and inline SVG icons, which removes the FontAwesome dependency
from these views and keeps icon styling under Tailwind control.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes “page topper” header banners across many resource index/show/new/edit views, using DomainTheme helpers for consistent background/border/text styling and introducing inline SVG icons in several places to align icon styling with Tailwind.
Changes:
- Replaces per-view header rows with a consistent DomainTheme-styled banner layout across workshops, ideas/logs, stories/resources/FAQs/tutorials, events, people/organizations, and community news.
- Updates some navigation/menu icons to inline SVGs and restructures various view wrappers to support the new banner layout.
- Normalizes form label typography by removing redundant
text-smlabel classes in workshop log / variation idea forms.
Reviewed changes
Copilot reviewed 41 out of 41 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| app/views/workshops/show.html.erb | Adds a DomainTheme banner header and restructures wrapper layout. |
| app/views/workshops/index.html.erb | Adds a banner header + moves intro copy into a consistent content container. |
| app/views/workshop_variations/show.html.erb | Adds a banner header and wraps content with themed container spacing. |
| app/views/workshop_variations/index.html.erb | Adds a banner header and rewraps index content in themed container. |
| app/views/workshop_variation_ideas/show.html.erb | Adds a banner header and restructures content wrapper. |
| app/views/workshop_variation_ideas/new.html.erb | Adds a banner header and reflows intro copy + form placement. |
| app/views/workshop_variation_ideas/index.html.erb | Adds a banner header and restructures table wrapper/spacing. |
| app/views/workshop_variation_ideas/edit.html.erb | Adds a banner header and simplifies edit layout around the form. |
| app/views/workshop_variation_ideas/_form.html.erb | Normalizes label CSS classes (drops redundant text-sm). |
| app/views/workshop_logs/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/workshop_logs/new.html.erb | Adds a banner header and reflows alert/description/form layout. |
| app/views/workshop_logs/index.html.erb | Adds a banner header and renders _index without its internal header. |
| app/views/workshop_logs/edit.html.erb | Adds a banner header and simplifies edit layout around the form. |
| app/views/workshop_logs/_index.html.erb | Adds hide_header local to optionally suppress the partial’s header block. |
| app/views/workshop_logs/_form.html.erb | Normalizes label CSS classes (drops redundant text-sm). |
| app/views/workshop_ideas/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/workshop_ideas/new.html.erb | Adds a banner header and reflows intro copy + form wrapper. |
| app/views/workshop_ideas/index.html.erb | Adds a banner header and restructures table wrapper/spacing. |
| app/views/workshop_ideas/edit.html.erb | Adds a banner header and simplifies edit layout around the form. |
| app/views/tutorials/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/tutorials/index.html.erb | Adds a banner header and moves description into themed content container. |
| app/views/story_ideas/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/story_ideas/new.html.erb | Adds a banner header and reflows guidance copy + form placement. |
| app/views/story_ideas/index.html.erb | Adds a banner header and restructures table + empty/pagination layout. |
| app/views/story_ideas/edit.html.erb | Adds a banner header and simplifies edit layout around the form. |
| app/views/stories/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/stories/index.html.erb | Adds a banner header and moves description into themed content container. |
| app/views/shared/_navbar_new_button.html.erb | Converts some “New” dropdown icons from FontAwesome to inline SVG. |
| app/views/shared/_navbar_menu_mobile.html.erb | Converts some mobile “New” menu icons from FontAwesome to inline SVG. |
| app/views/resources/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/resources/index.html.erb | Adds a banner header and moves description into themed content container. |
| app/views/people/show.html.erb | Moves header actions into the new banner header structure. |
| app/views/people/index.html.erb | Adds a banner header and wraps index content in themed container. |
| app/views/organizations/show.html.erb | Moves header actions into the new banner header structure. |
| app/views/organizations/index.html.erb | Adds a banner header and wraps index content in themed container. |
| app/views/faqs/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/faqs/index.html.erb | Adds a banner header and moves intro copy into themed content container. |
| app/views/events/show.html.erb | Replaces top-right actions row with a banner header on non-preview pages. |
| app/views/events/index.html.erb | Adds a banner header and moves description into themed content container. |
| app/views/community_news/show.html.erb | Adds a banner header and wraps show content in themed container. |
| app/views/community_news/index.html.erb | Adds a banner header and moves description into themed content container. |
Comment on lines
+18
to
+20
| <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" %> |
| <td class="px-4 py-2 text-sm text-gray-800"><%= workshop_idea.created_by.name %></td> | ||
| <td class="px-4 py-2 text-sm text-gray-800 text-center"> | ||
| <% if workshop_idea.workshops.any? %> | ||
| <span class='fa fa-check-circle text-green-500'></span> |
| </div> | ||
| <!-- Actions --> | ||
| <td class="px-4 py-2 flex justify-center gap-2"> | ||
| <%= link_to 'Edit', edit_workshop_idea_path(workshop_idea), class: "btn btn-secondary-outline" %> |
| <td class="px-4 py-2 text-sm text-gray-800"><%= workshop_variation_idea.created_by.name %></td> | ||
| <td class="px-4 py-2 text-sm text-gray-800 text-center"> | ||
| <% if workshop_variation_idea.workshop_variations.any? %> | ||
| <span class='fa fa-check-circle text-green-500'></span> |
| </div> | ||
| <!-- Actions --> | ||
| <td class="px-4 py-2 flex justify-center gap-2"> | ||
| <%= link_to 'Edit', edit_workshop_variation_idea_path(workshop_variation_idea), class: "btn btn-secondary-outline" %> |
| <svg class="w-5 h-5 <%= DomainTheme.text_class_for(:workshop_ideas, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path> | ||
| </svg> | ||
| <span class="text-sm font-semibold <%= DomainTheme.text_class_for(:workshop_ideas, intensity: 900) %> uppercase tracking-wide">Edit Workshop Idea</span> |
| <svg class="w-5 h-5 <%= DomainTheme.text_class_for(:story_ideas, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> | ||
| </svg> | ||
| <span class="text-sm font-semibold <%= DomainTheme.text_class_for(:story_ideas, intensity: 900) %> uppercase tracking-wide">New Story Idea</span> |
| <svg class="w-5 h-5 <%= DomainTheme.text_class_for(:story_ideas, intensity: 700) %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> | ||
| </svg> | ||
| <span class="text-sm font-semibold <%= DomainTheme.text_class_for(:story_ideas, intensity: 900) %> uppercase tracking-wide">Edit Story Idea</span> |
| <%= link_to new_workshop_variation_idea_path, | ||
| class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full space-x-2" do %> | ||
| <i class="fas fa-layer-group"></i> | ||
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3"></path></svg> |
| class: "flex items-center px-4 py-2 text-sm text-white | ||
| hover:text-gray-700 hover:bg-gray-100 w-full space-x-2" do %> | ||
| <i class="fas fa-layer-group"></i> | ||
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3"></path></svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is the goal of this PR and why is this important?
How did you approach the change?
DomainThemebackground/border/text helpers at consistent intensities.<i class="fas ...">) icons for inline SVG icons in the navbar "New" menu and across views, removing the FontAwesome dependency from these templates and keeping icon styling under Tailwind control.text-smon field labels).UI Testing Checklist
Anything else to add?
🤖 Generated with Claude Code