2026-06-12 01:58:46 +02:00
|
|
|
/* retoor <retoor@molodetz.nl> */
|
|
|
|
|
|
2026-05-12 15:07:34 +02:00
|
|
|
.attachment-gallery {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
margin: 0.75rem 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item {
|
|
|
|
|
position: relative;
|
2026-06-19 11:00:22 +02:00
|
|
|
max-width: 240px;
|
2026-05-12 15:07:34 +02:00
|
|
|
border-radius: var(--radius);
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: var(--bg-card-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item:hover {
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item img {
|
2026-06-19 11:00:22 +02:00
|
|
|
display: block;
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
max-width: 240px;
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
Show a post's image on its card, and show it full size
_attachment_display.html iterates a context variable named
`attachments`, so every caller binds it before the include.
_post_card.html was the one caller that did not: it guarded on
item.attachments but included the partial with nothing bound, so the
gallery looped over whatever `attachments` happened to be in the
surrounding page context and rendered empty. Every post with an image
looked image-less on the feed and on profiles, and on a project page -
where project_detail.html sets `attachments` at template scope for the
project's own files - a devlog card would have rendered the project's
files as its own.
With the image actually reaching the card, render a lone one properly:
a gallery holding exactly one item gets a `single` class and takes the
full content column (max-height 480px, object-fit contain, no hover
scale), matching the original DevPlace. That branch serves the stored
original rather than thumbnail_url, because a thumbnail is 200px on its
longest side and stretching it to the column width is visibly blurry.
Animated GIFs needed no change and now have a test proving it: they
never had a thumbnail to flatten, so they already took the original-file
path and simply render larger.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-17 23:12:39 +02:00
|
|
|
.attachment-gallery.single .attachment-gallery-item:has(.gallery-thumb) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery.single .attachment-gallery-item:has(.gallery-thumb):hover {
|
|
|
|
|
transform: none;
|
|
|
|
|
border-color: var(--border-light);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery.single .gallery-thumb {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 480px;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-19 11:00:22 +02:00
|
|
|
.attachment-gallery-item:has(.non-image) {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 120px;
|
2026-05-12 15:07:34 +02:00
|
|
|
}
|
|
|
|
|
|
feat: add project file system with CRUD, upload, inline editing, and video attachment support
- Add new `/projects/{slug}/files` endpoint group for per-project filesystem operations including directory and file CRUD, upload, and inline editing with public read and owner write access
- Extend attachment system to support video formats (webm, ogv, mov, m4v) with proper file icons and MIME types
- Implement configurable allowed file types via `allowed_file_types` site setting, replacing hardcoded `ALLOWED_UPLOAD_TYPES` with dynamic `allowed_extensions()` and `is_extension_allowed()` functions
- Add `delete_all_project_files()` call in `delete_content_item()` to clean up project files when a project is deleted
- Create database indexes on `project_files` table for `(project_uid, path)` and `(project_uid, parent_path)` to optimize file lookups
- Introduce `docs_prose.py` module with `render_prose()` function that renders Markdown content inside `data-render` divs using mistune, enabling dynamic prose rendering in documentation pages
- Enhance docs search with Markdown-aware text stripping (`_demarkdown()`) and improved HTML/script/style sanitization for better search indexing
- Update documentation API samples to reflect new attachment response fields (`is_image`, `is_video`, `mime_type`) and note video format support
- Update README to document the new project files endpoint and clarify AI gateway attribution for guest Devii sessions
2026-06-08 22:51:09 +02:00
|
|
|
.attachment-gallery-item:has(.gallery-video) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 480px;
|
|
|
|
|
height: auto;
|
|
|
|
|
aspect-ratio: 16 / 9;
|
|
|
|
|
cursor: default;
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item:has(.gallery-video):hover {
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item .gallery-video {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
|
feat: add audio file support and expand allowed upload types with new MIME mappings
Extend ALLOWED_UPLOAD_TYPES dict with audio formats (wav, flac, ogg, aac, wma, m4a), video formats (avi, mkv, flv, wmv, 3gp), document formats (doc, docx, xls, xlsx, ppt, pptx, odt, rtf), code formats (ts, java, cpp, c, h, rb, go, rs, sql, php, swift, kt), config formats (cfg, ini, log), archive formats (tar, gz, rar, 7z), and additional web formats (html, json, xml, yaml, yml, toml, sh, bat, svg). Add corresponding MIME_TO_EXT reverse mappings. Implement audio element rendering in ContentRenderer.js with audioExtRe regex and createAudioElement method. Add gallery-audio CSS class for audio player styling in attachments.css and media.css. Update _attachment_display.html and _media_gallery.html templates to render audio controls for is_audio attachments.
2026-06-15 17:08:10 +02:00
|
|
|
.gallery-audio {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-12 15:07:34 +02:00
|
|
|
.attachment-gallery-item .non-image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item .non-image .icon {
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
margin-bottom: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item .non-image .name {
|
|
|
|
|
font-size: 0.6875rem;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item .non-image .size {
|
|
|
|
|
font-size: 0.625rem;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item .non-image:hover {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
|
.attachment-gallery-item {
|
2026-06-19 11:00:22 +02:00
|
|
|
max-width: 160px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item img {
|
|
|
|
|
max-width: 160px;
|
|
|
|
|
max-height: 140px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-gallery-item:has(.non-image) {
|
2026-05-12 15:07:34 +02:00
|
|
|
width: 80px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
}
|
2026-06-05 18:18:11 +02:00
|
|
|
}
|