Skip to content

fix: make store use gallery view isntead of list view #459

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
natsuki615 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

fix: make store use gallery view isntead of list view #459

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
00ad865
fix: make store use gallery view isntead of list view
natsuki615 Jun 11, 2026
27c4560
fix: style with prettier
natsuki615 Jun 11, 2026
8fa35ea
fix: style with rubocop
natsuki615 Jun 11, 2026
63f78e7
Merge branch 'sc0v:master' into store-gallery-view
natsuki615 Jun 22, 2026
6fbf75e
fix: improve readability for store cart
natsuki615 Jun 22, 2026
96abf47
Merge remote store-gallery-view (master sync) into local
natsuki615 Jun 22, 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
31 changes: 31 additions & 0 deletions app/assets/stylesheets/binder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,3 +272,34 @@ li.tab {
opacity: 0;
pointer-events: none;
}

/* store card quantity controls, keep −, count, and + on one line. */
.content .sidebar .cart-qty {
display: inline-flex;
align-items: center;
gap: 0.2em;
margin: 0;
padding: 0;
}

/* store: strip the button background for readibility,
using input[type=submit] to overwrite the orig button framework's styling */
input[type="submit"].cart-qty-btn {
flex: none;
background: none;
border: 0;
margin: 0;
padding: 0.6em;
font-size: 1.3em;
font-weight: 700;
line-height: 1;
color: #6d6e71;
cursor: pointer;
vertical-align: middle;
}

input[type="submit"].cart-qty-btn:hover,
input[type="submit"].cart-qty-btn:focus {
background: none;
color: #c41230;
}
2 changes: 0 additions & 2 deletions app/views/store/items/_cart.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Actions</th>
Expand All @@ -20,7 +19,6 @@
<%# Summary row %>
<tr>
<td><strong>Total</strong></td>
<td></td> <%# Blank cell for Price column %>
<td><%= items.sum(&:quantity_purchased) %></td>
<td
><%= number_to_currency(
Expand Down
23 changes: 12 additions & 11 deletions app/views/store/items/_cart_item.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<tr>
<td><%= cart_item.store_item.name %></td>
<td><%= number_to_currency cart_item.price_at_purchase %></td>
<td>
<%# TODO: Inline styles & maybe change to best_in_place %>
<%= form_with model: cart_item, html: { style: 'display: inline;' } do |f| %>
<%= f.hidden_field :quantity_purchased, value: cart_item.quantity_purchased - 1 %>
<%= f.submit '-', class: 'btn btn-default btn-xs' %>
<% end %>
<%= cart_item.quantity_purchased %>
<%= form_with model: cart_item, html: { style: 'display: inline;' } do |f| %>
<%= f.hidden_field :quantity_purchased, value: cart_item.quantity_purchased + 1 %>
<%= f.submit '+', class: 'btn btn-default btn-xs' %>
<% end %>
<%# TODO: maybe change to best_in_place %>
<div class="cart-qty">
<%= form_with model: cart_item do |f| %>
<%= f.hidden_field :quantity_purchased, value: cart_item.quantity_purchased - 1 %>
<%= f.submit '−', class: 'cart-qty-btn', 'aria-label': 'Decrease quantity' %>
<% end %>
<span class="cart-qty__count"><%= cart_item.quantity_purchased %></span>
<%= form_with model: cart_item do |f| %>
<%= f.hidden_field :quantity_purchased, value: cart_item.quantity_purchased + 1 %>
<%= f.submit '+', class: 'cart-qty-btn', 'aria-label': 'Increase quantity' %>
<% end %>
</div>
</td>
<td
><%= number_to_currency(cart_item.quantity_purchased * cart_item.price_at_purchase) %></td
Expand Down
43 changes: 29 additions & 14 deletions app/views/store/items/_item.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
<tr>
<td><%= link_to item.name, item %></td>
<td><%= number_to_currency item.price %></td>
<td>
<%# if can?(:create, Charge) %>
<%= link_to t('.add_to_cart', default: t('helpers.links.add_to_cart')),
add_to_cart_store_item_path(item),
class: 'btn btn-primary btn-xs',
data: {
turbo_method: :post
} %>
<%# end %>
</td>
</tr>
<style>
.item-card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.5rem;
text-align: center;
display: flex;
flex-direction: column;
}
.item-card .btn {
margin-top: auto;
}
.text {
margin: 0.25rem 0;
}
</style>

<div class="item-card">
<%= image_tag "store_images/#{item.name}.png",
style: 'height: 80px; object-fit: contain;' %>
<div class="text"><%= link_to item.name, item %></div>
<div class="text"><%= number_to_currency item.price %></div>
<%= link_to t('.add_to_cart', default: t('helpers.links.add_to_cart')),
add_to_cart_store_item_path(item),
class: 'btn small',
data: {
turbo_method: :post
} %>
</div>
17 changes: 7 additions & 10 deletions app/views/store/items/_items.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
<% page ||= 'default' %>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody> <%= render partial: 'item', collection: items %> </tbody>
</table>
<div
style="display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;"
>
<%= render partial: 'item', collection: items %>
</div>
Loading