mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix card height consistency in ArtFight2025 browse grid

Browse Source 
- Set fixed card heights using flexbox for consistent grid layout
- Added flex properties to ensure proper spacing of card elements
- Made card heights responsive on smaller screens
- Added special media queries for tablet-sized screens
- Improved overall grid layout with flex display properties
- Enhanced mobile responsiveness for cards

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrew Brown 2025-06-23 23:51:10 -07:00
parent 59938d2a97
commit b40323282c
1 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/views/browse/tag.html.erb
View File

@ -114,11 +114,11 @@
<div class="row js-content-cards-list">
<% content_group[:content].each do |content| %>
<div class="col s12 m6 l4 xl3 js-content-card-container">
<div class="hoverable card sticky-action z-depth-1" style="margin-bottom: 20px; border-radius: 8px; overflow: hidden;">
<div class="hoverable card sticky-action z-depth-1" style="margin-bottom: 20px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 450px;">
<!-- Color indicator bar at top of card -->
<div style="height: 4px; background-color: <%= content_group[:color] == 'grey' ? '#9e9e9e' : "var(--#{content_group[:color]})" %>;"></div>
<div class="card-image waves-effect waves-block waves-light">
<div class="card-image waves-effect waves-block waves-light" style="flex: 0 0 auto;">
<%
# Find image for this content
content_image = @random_image_pool_cache.fetch([content.class.name, content.id], [])
@ -146,7 +146,7 @@
</div>
<!-- Improved card actions -->
<div class="card-content" style="padding: 16px; border-bottom: 1px solid #f0f0f0;">
<div class="card-content" style="padding: 16px; border-bottom: 1px solid #f0f0f0; flex: 1 0 auto; display: flex; flex-direction: column;">
<!-- Creator info with avatar -->
<% user = @users_cache[content.user_id] %>
<% if user %>
@ -166,7 +166,7 @@
<!-- Tags as pills -->
<% if content.respond_to?(:page_tags) && content.page_tags.any? %>
<div class="tags-container" style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
<div class="tags-container" style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; flex: 1 0 auto;">
<% content.page_tags.each do |tag| %>
<% if tag.tag == @tag %>
<span class="tag-pill" style="padding: 4px 10px; background-color: <%= content_group[:color] == 'grey' ? '#9e9e9e' : "var(--#{content_group[:color]}-lighten-1)" %>; color: white; border-radius: 20px; font-size: 12px;">
@ -182,7 +182,7 @@
<% end %>
</div>
<div class="card-action" style="display: flex; justify-content: space-between; background-color: #fafafa; padding: 12px 16px;">
<div class="card-action" style="display: flex; justify-content: space-between; background-color: #fafafa; padding: 12px 16px; flex: 0 0 auto;">
<% if content.is_a?(Document) %>
<%= link_to content, class: "#{content_group[:color]}-text", style: "font-weight: 500; display: flex; align-items: center;", target: '_blank' do %>
<i class="material-icons left" style="font-size: 18px; margin-right: 6px;">visibility</i> View
@ -372,7 +372,28 @@
--orange-lighten-5: #fff3e0;
}
/* Equal height card grid */
.js-content-cards-list {
display: flex;
flex-wrap: wrap;
}
.js-content-card-container {
display: flex;
margin-bottom: 20px;
}
/* Responsive adjustments */
@media only screen and (max-width: 993px) {
.js-content-card-container {
height: auto;
}
.card.sticky-action {
height: auto !important;
}
}
@media only screen and (max-width: 600px) {
.category-filters {
overflow-x: auto;