feat: make nested cookbooks responsive and redesign compact toolbar UI
Nested Cookbooks Fix: - Added dynamic gridStyle to .cookbooks-grid in CookbookDetail.tsx - Removed hardcoded 5-column grid from CSS, now respects column selector - Nested cookbooks now respond to column count changes (3, 5, 7, 9) Toolbar UI Redesign (CookbookDetail.css & Cookbooks.css): - Reduced toolbar padding from 1.5rem to 0.75rem 1rem - Changed alignment from flex-end to center for cleaner layout - Made buttons more compact: - Reduced padding to 0.35rem 0.6rem (was 0.5rem 0.75rem) - Reduced font size to 0.8rem (was 0.9rem) - Reduced min-width to 2rem (was 2.5rem) - Grouped buttons with subtle border styling instead of individual borders - Reduced gaps between controls from 2rem/1.5rem to 1.5rem/1rem - Made labels smaller and lighter weight (0.8rem, 500 weight) - Updated page navigation with lighter borders and subtle hover states - Changed colors to more subtle grays (#d0d0d0, #555) instead of bold green - Reduced box-shadow for subtler appearance - Added 1px border for better definition Result: Consistent, compact, user-friendly controls across all recipe and cookbook list pages. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul R Kartchner
@@ -362,7 +362,7 @@ function CookbookDetail() {
|
||||
{cookbook.cookbooks && cookbook.cookbooks.length > 0 && (
|
||||
<section className="included-cookbooks-section">
|
||||
<h2>Included Cookbooks ({cookbook.cookbooks.length})</h2>
|
||||
<div className="cookbooks-grid">
|
||||
<div className="cookbooks-grid" style={gridStyle}>
|
||||
{cookbook.cookbooks.map((childCookbook) => (
|
||||
<div
|
||||
key={childCookbook.id}
|
||||
|
||||
@@ -266,89 +266,98 @@
|
||||
.cookbook-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.display-controls,
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.column-buttons,
|
||||
.items-per-page {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.column-buttons button,
|
||||
.items-per-page button {
|
||||
min-width: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 2px solid #e0e0e0;
|
||||
min-width: 2rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border: none;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.column-buttons button:not(:last-child),
|
||||
.items-per-page button:not(:last-child) {
|
||||
border-right: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.column-buttons button:hover,
|
||||
.items-per-page button:hover {
|
||||
border-color: #2e7d32;
|
||||
background-color: #f1f8e9;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.column-buttons button.active,
|
||||
.items-per-page button.active {
|
||||
background-color: #2e7d32;
|
||||
color: white;
|
||||
border-color: #2e7d32;
|
||||
}
|
||||
|
||||
.page-navigation {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-navigation button {
|
||||
padding: 0.5rem 1.25rem;
|
||||
border: 2px solid #2e7d32;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid #d0d0d0;
|
||||
background: white;
|
||||
color: #2e7d32;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.page-navigation button:hover:not(:disabled) {
|
||||
background-color: #2e7d32;
|
||||
color: white;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #2e7d32;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.page-navigation button:disabled {
|
||||
@@ -357,10 +366,11 @@
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* Results Section */
|
||||
@@ -593,7 +603,6 @@
|
||||
|
||||
.included-cookbooks-section .cookbooks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,89 +41,98 @@
|
||||
.cookbooks-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.display-controls,
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.column-buttons,
|
||||
.items-per-page {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.column-buttons button,
|
||||
.items-per-page button {
|
||||
min-width: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 2px solid #e0e0e0;
|
||||
min-width: 2rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border: none;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.column-buttons button:not(:last-child),
|
||||
.items-per-page button:not(:last-child) {
|
||||
border-right: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.column-buttons button:hover,
|
||||
.items-per-page button:hover {
|
||||
border-color: #2e7d32;
|
||||
background-color: #f1f8e9;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.column-buttons button.active,
|
||||
.items-per-page button.active {
|
||||
background-color: #2e7d32;
|
||||
color: white;
|
||||
border-color: #2e7d32;
|
||||
}
|
||||
|
||||
.page-navigation {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-navigation button {
|
||||
padding: 0.5rem 1.25rem;
|
||||
border: 2px solid #2e7d32;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid #d0d0d0;
|
||||
background: white;
|
||||
color: #2e7d32;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.page-navigation button:hover:not(:disabled) {
|
||||
background-color: #2e7d32;
|
||||
color: white;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #2e7d32;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.page-navigation button:disabled {
|
||||
@@ -132,10 +141,11 @@
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.results-count {
|
||||
|
||||
Reference in New Issue
Block a user