Refactor recipe card styles and update HTML structure

- Migrated CSS styles from recipe-card.css to card.css for better organization.
- Updated recipe card class names in HTML to align with new styling conventions.
- Enhanced card layout with additional flex properties for improved responsiveness.
- Adjusted infinite scroll debounce timing for better performance.
This commit is contained in:
Will Miao
2025-03-20 21:42:17 +08:00
parent 5cfae7198d
commit 34078d8a60
5 changed files with 60 additions and 5 deletions

View File

@@ -4,7 +4,7 @@
{% block page_id %}recipes{% endblock %}
{% block page_css %}
<link rel="stylesheet" href="/loras_static/css/components/recipe-card.css">
<link rel="stylesheet" href="/loras_static/css/components/card.css">
<link rel="stylesheet" href="/loras_static/css/components/recipe-modal.css">
<link rel="stylesheet" href="/loras_static/css/components/import-modal.css">
{% endblock %}
@@ -33,10 +33,10 @@
</div>
<!-- Recipe grid -->
<div class="card-grid recipe-grid" id="recipeGrid">
<div class="card-grid" id="recipeGrid">
{% if recipes and recipes|length > 0 %}
{% for recipe in recipes %}
<div class="recipe-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
<div class="lora-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
<div class="recipe-indicator" title="Recipe">R</div>
<div class="card-preview">
<img src="{{ recipe.file_url }}" alt="{{ recipe.title }}">