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

Revert to standard Materialize grid for better card density

Browse Source 
- Switched from CSS Grid to standard Materialize column grid
- Fixed card width issues so cards properly fill available space
- Ensured cards maintain consistent heights within rows
- Added proper margins for better spacing between card rows
- Set consistent card image heights for better visual alignment
- Used flexbox approach that works better with Materialize CSS

🤖 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:58:31 -07:00
parent 60756dd557
commit 6facc8fcea
1 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,7 +113,7 @@
<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="col s12 m6 l4 xl3 js-content-card-container" style="margin-bottom: 20px;">
<div class="hoverable card sticky-action z-depth-1" style="margin-bottom: 20px; border-radius: 8px; overflow: hidden;">
<!-- Color indicator bar at top of card -->
<div style="height: 4px; background-color: <%= content_group[:color] == 'grey' ? '#9e9e9e' : "var(--#{content_group[:color]})" %>;"></div>
@ -377,37 +377,35 @@
display: block;
}
/* Card height consistency using CSS Grid */
@media only screen and (min-width: 601px) {
.js-content-cards-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 20px;
}
.js-content-card-container {
margin-bottom: 0;
}
.js-content-card-container .card {
height: 100%;
margin-bottom: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
.card .card-image {
grid-row: 1;
}
.card .card-content {
grid-row: 2;
}
.card .card-action {
grid-row: 3;
align-self: end;
}
/* Proper card sizing and grid density - reverting to standard Material grid with fixed heights */
.js-content-card-container .card {
height: 100%;
width: 100%;
margin-bottom: 0;
}
/* Make all cards in a row the same height */
.js-content-cards-list {
display: flex;
flex-wrap: wrap;
margin-left: -0.75rem;
margin-right: -0.75rem;
}
/* Make sure card containers take their full column width */
.js-content-card-container {
display: flex;
}
/* Ensure card images maintain aspect ratio */
.card .card-image .activator {
height: 200px;
width: 100%;
}
/* Ensure card content expands properly */
.card .card-content {
flex-grow: 1;
}
@media only screen and (max-width: 600px) {