cloud-hosting-platform/site-builder
6
0 Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site-builder): asset search/filter, stock photo tab and background focal point

Browse Source 
Search + type chips in the Assets panel and picker library; Stock photos
entry in the picker (feature-detected, hidden when stock_disabled/absent);
bgPosition focal point for Hero and Background Section.

Refs #55
This commit is contained in:
shadowdao committed 2026-10-07 11:52:32 -07:00
1 parent 8860349c9b
commit c0e0003460
17 files changed
+928 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

craft/src/styles/editor.css
+31
View File
@@ -2557,3 +2557,34 @@ body {
}
.palette-dot:first-child { margin-left: 0; }
/* ---------- #55 media search, stock photos, focal point ---------- */
.asset-filter { display: flex; flex-direction: column; gap: 6px; }
.asset-filter-input { width: 100%; font-size: 11px; box-sizing: border-box; }
.asset-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.asset-filter-chip {
padding: 2px 8px; font-size: 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted);
}
.asset-filter-chip:hover { border-color: var(--color-text-muted); }
.asset-filter-chip.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.asset-picker-tabs { display: flex; gap: 2px; margin-top: 8px; border-bottom: 1px solid var(--color-border); }
.asset-picker-tab {
flex: 1; padding: 5px 4px; font-size: 11px; cursor: pointer; background: transparent;
border: none; border-bottom: 2px solid transparent; color: var(--color-text-muted);
}
.asset-picker-tab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.stock-tab { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.stock-grid { column-count: 2; column-gap: 4px; max-height: 240px; overflow-y: auto; }
.stock-thumb {
display: block; width: 100%; margin: 0 0 4px; padding: 0; break-inside: avoid; cursor: pointer;
border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: var(--color-bg-base);
}
.stock-thumb.selected { border-color: var(--color-accent); }
.stock-thumb img { display: block; width: 100%; height: auto; }
.stock-credit, .stock-footer { font-size: 10px; color: var(--color-text-dim); }
.stock-credit a, .stock-footer a { color: inherit; text-decoration: underline; }
.stock-status { font-size: 11px; color: var(--color-text-dim); text-align: center; padding: 10px 0; }
.stock-status.error { color: var(--color-danger); }