Skip to content
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

🌸Components: Remove blank space from Cards without content #1709

Merged
merged 5 commits into from
Aug 2, 2023
Merged

🌸Components: Remove blank space from Cards without content #1709

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab9b3ea
Updates CardComponent layout
rosschapman Jul 27, 2023
f5d10bb
Added comment
rosschapman Jul 27, 2023
44d3a52
Fixes syntax
rosschapman Jul 27, 2023
166aa35
Adds comment
rosschapman Jul 27, 2023
6d63848
Fixes syntax
rosschapman Jul 27, 2023
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
22 changes: 14 additions & 8 deletions app/components/card_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<div <%== attributes(classes: card_classes) %>>
<%= content %>
<div class="<%== card_classes_wrapper %>">
<%#
NOTE: content? is not always working as described, and is returning a proc in some cases rather than a boolean
%>
<% if content.present? %>
<div <%== attributes(classes: card_classes_content) %>">
<%= content %>
</div>
<% end %>
<% if footer? %>
<div class="<%== card_classes_footer %>">
<%= footer %>
</div>
<% end %>
</div>

<% if footer? %>
<div class="bg-purple-50 p-4 sm:p-6 rounded-lg rounded-t-none shadow">
<%= footer %>
</div>
<% end %>
20 changes: 17 additions & 3 deletions app/components/card_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,28 @@ class CardComponent < ApplicationComponent

private

def card_classes
def card_classes_content
[
"p-4",
"sm:p-6"
].compact.join(" ")
end

def card_classes_wrapper
[
"shadow",
"rounded-lg",
"bg-white",
"bg-white"
].compact.join(" ")
end

def card_classes_footer
[
"bg-purple-50",
"p-4",
"sm:p-6",
("rounded-b-none" if footer?)
# content? is not always working as described, and is returning a proc in some cases rather than a boolean
("rounded-t-none" unless content.present?)
].compact.join(" ")
end
end
29 changes: 15 additions & 14 deletions app/furniture/marketplace/management_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,19 @@
<%= marketplace.room.name %>
</p>
</div>
<%= render onboarding_component %>
<%= render CardComponent.new(classes: "mt-3") do |card| %>
<%= content %>

<% card.with_footer do %>
<nav class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<%= render button({child: :stripe_account}, icon: :money) if policy(marketplace).edit? %>
<%= render button({child: :products}, icon: :tag) if policy(marketplace.products).index? %>
<%= render button({child: :delivery_areas}, icon: :map) if policy(marketplace.delivery_areas).index? %>
<%= render button({child: :tax_rates}, icon: :receipt_percent) if policy(marketplace.tax_rates).index? %>
<%= render button({child: :orders}, icon: :cart) if policy(marketplace.orders).index? %>
<%= render button({child: :notification_methods}, icon: :bell) if policy(marketplace.notification_methods).index? %>
</nav>
<div class="flex flex-col space-y-3">
<%= render onboarding_component %>
<%= render CardComponent.new do |card| %>
Comment on lines +9 to +11
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Author note: This flips layout handling of the CardComponent from the component itself to the container. Generally follows the (my) principle of Components should be unaware of their layout context.

<%= content %>
<% card.with_footer do %>
<nav class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<%= render button({child: :stripe_account}, icon: :money) if policy(marketplace).edit? %>
<%= render button({child: :products}, icon: :tag) if policy(marketplace.products).index? %>
<%= render button({child: :delivery_areas}, icon: :map) if policy(marketplace.delivery_areas).index? %>
<%= render button({child: :tax_rates}, icon: :receipt_percent) if policy(marketplace.tax_rates).index? %>
<%= render button({child: :orders}, icon: :cart) if policy(marketplace.orders).index? %>
<%= render button({child: :notification_methods}, icon: :bell) if policy(marketplace.notification_methods).index? %>
</nav>
<% end %>
<% end %>
<% end %>
</div>
3 changes: 0 additions & 3 deletions app/furniture/marketplace/tax_rate_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@

<%= render CardComponent.new(dom_id: dom_id(tax_rate), classes: "flex flex-col justify-between gap-y-2 w-full") do %>
<header class="flex font-bold">
<%= label %>
</header>

<div class="italic">
<%= rate %>
</div>

<div class="flex flex-row justify-between">
<%= render edit_button if edit_button? %>
<%= render destroy_button if destroy_button? %>
Expand Down