Enhance RecipeModal to support video previews

- Updated RecipeModal.js to dynamically handle video and image previews based on the file type.
- Modified recipe-modal.css to ensure proper styling for both images and videos.
- Adjusted recipe_modal.html to accommodate the new media handling structure.
This commit is contained in:
Will Miao
2025-03-26 16:39:53 +08:00
parent 86958e1420
commit 0dc396e148
3 changed files with 57 additions and 7 deletions

View File

@@ -129,7 +129,14 @@
justify-content: center;
}
.recipe-preview-container img {
.recipe-preview-container img,
.recipe-preview-container video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.recipe-preview-media {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@@ -340,9 +347,19 @@
border-radius: var(--border-radius-xs);
overflow: hidden;
background: var(--bg-color);
display: flex;
align-items: center;
justify-content: center;
}
.recipe-lora-thumbnail img {
.recipe-lora-thumbnail img,
.recipe-lora-thumbnail video {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail-video {
width: 100%;
height: 100%;
object-fit: cover;