diff --git a/locales/de.json b/locales/de.json index 6b2d4558..600ab144 100644 --- a/locales/de.json +++ b/locales/de.json @@ -449,6 +449,12 @@ "compact": "7 (1080p), 8 (2K), 10 (4K)" }, "displayDensityWarning": "Warnung: Höhere Dichten können bei Systemen mit begrenzten Ressourcen zu Performance-Problemen führen.", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "Ordner-Seitenleiste anzeigen", "showFolderSidebarHelp": "Blenden Sie die Ordner-Navigationsleiste auf den Modellseiten ein oder aus. Wenn deaktiviert, bleiben Seitenleiste und Hoverbereich verborgen.", "cardInfoDisplay": "Karten-Info-Anzeige", diff --git a/locales/en.json b/locales/en.json index 77b28d7c..6cbc89f6 100644 --- a/locales/en.json +++ b/locales/en.json @@ -449,6 +449,12 @@ "compact": "7 (1080p), 8 (2K), 10 (4K)" }, "displayDensityWarning": "Warning: Higher densities may cause performance issues on systems with limited resources.", + "recipesLayout": "Recipes Layout", + "recipesLayoutHelp": "Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "Grid", + "masonry": "Masonry" + }, "showFolderSidebar": "Show Folder Sidebar", "showFolderSidebarHelp": "Toggle the folder navigation sidebar on model pages. When disabled, the sidebar and hover area stay hidden.", "cardInfoDisplay": "Card Info Display", diff --git a/locales/es.json b/locales/es.json index cf20cc8d..aba3c27c 100644 --- a/locales/es.json +++ b/locales/es.json @@ -449,6 +449,12 @@ "compact": "7 (1080p), 8 (2K), 10 (4K)" }, "displayDensityWarning": "Advertencia: Densidades más altas pueden causar problemas de rendimiento en sistemas con recursos limitados.", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "Mostrar barra lateral de carpetas", "showFolderSidebarHelp": "Activa o desactiva la barra lateral de navegación de carpetas en las páginas de modelos. Cuando está desactivada, la barra lateral y el área de desplazamiento permanecen ocultas.", "cardInfoDisplay": "Visualización de información de tarjeta", diff --git a/locales/fr.json b/locales/fr.json index face7ff2..5dae45ce 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -449,6 +449,12 @@ "compact": "7 (1080p), 8 (2K), 10 (4K)" }, "displayDensityWarning": "Attention : Des densités plus élevées peuvent causer des problèmes de performance sur les systèmes avec des ressources limitées.", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "Afficher la barre latérale des dossiers", "showFolderSidebarHelp": "Activez ou désactivez la barre latérale de navigation des dossiers sur les pages de modèles. Lorsqu'elle est désactivée, la barre latérale et la zone de survol restent masquées.", "cardInfoDisplay": "Affichage des informations de carte", diff --git a/locales/he.json b/locales/he.json index d8db58b4..a5ea5e14 100644 --- a/locales/he.json +++ b/locales/he.json @@ -449,6 +449,12 @@ "compact": "7 (1080p), 8 (2K), 10 (4K)" }, "displayDensityWarning": "אזהרה: צפיפויות גבוהות יותר עלולות לגרום לבעיות ביצועים במערכות עם משאבים מוגבלים.", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "הצג סרגל צד תיקיות", "showFolderSidebarHelp": "הפעל או כבה את סרגל הצד לניווט תיקיות בדפי המודל. כאשר הוא כבוי, סרגל הצד ואזור הריחוף נשארים מוסתרים.", "cardInfoDisplay": "תצוגת מידע בכרטיס", diff --git a/locales/ja.json b/locales/ja.json index 95a7aa4b..178a7e3f 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -449,6 +449,12 @@ "compact": "7（1080p）、8（2K）、10（4K）" }, "displayDensityWarning": "警告：高密度設定は、リソースが限られたシステムでパフォーマンスの問題を引き起こす可能性があります。", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "フォルダサイドバーを表示", "showFolderSidebarHelp": "モデルページのフォルダナビゲーションサイドバーを表示/非表示にします。無効にするとサイドバーとホバーエリアは表示されません。", "cardInfoDisplay": "カード情報表示", diff --git a/locales/ko.json b/locales/ko.json index a4d7e573..908fa8b8 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -449,6 +449,12 @@ "compact": "7개 (1080p), 8개 (2K), 10개 (4K)" }, "displayDensityWarning": "경고: 높은 밀도는 리소스가 제한된 시스템에서 성능 문제를 일으킬 수 있습니다.", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "폴더 사이드바 표시", "showFolderSidebarHelp": "모델 페이지에서 폴더 탐색 사이드바를 켜거나 끕니다. 비활성화하면 사이드바와 호버 영역이 표시되지 않습니다.", "cardInfoDisplay": "카드 정보 표시", diff --git a/locales/ru.json b/locales/ru.json index 3d0d732f..42870516 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -449,6 +449,12 @@ "compact": "7 (1080p), 8 (2K), 10 (4K)" }, "displayDensityWarning": "Предупреждение: Высокая плотность может вызвать проблемы с производительностью на системах с ограниченными ресурсами.", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "Показывать боковую панель папок", "showFolderSidebarHelp": "Включает или выключает боковую панель навигации по папкам на страницах моделей. При отключении панель и область наведения скрыты.", "cardInfoDisplay": "Отображение информации карточки", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 775ce7cf..51c1228e 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -449,6 +449,12 @@ "compact": "7（1080p），8（2K），10（4K）" }, "displayDensityWarning": "警告：高密度可能导致资源有限的系统性能下降。", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "显示文件夹侧边栏", "showFolderSidebarHelp": "在模型页面启用或禁用文件夹导航侧边栏。关闭后，侧边栏和悬停区域将保持隐藏。", "cardInfoDisplay": "卡片信息显示", diff --git a/locales/zh-TW.json b/locales/zh-TW.json index ccc2f1cc..b47e4782 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -449,6 +449,12 @@ "compact": "7（1080p）、8（2K）、10（4K）" }, "displayDensityWarning": "警告：較高密度可能導致資源有限的系統效能下降。", + "recipesLayout": "[TODO: Translate] Recipes Layout", + "recipesLayoutHelp": "[TODO: Translate] Choose how recipe cards are arranged: a uniform grid or a masonry (Pinterest-style) layout that preserves each image's aspect ratio.", + "recipesLayoutOptions": { + "grid": "[TODO: Translate] Grid", + "masonry": "[TODO: Translate] Masonry" + }, "showFolderSidebar": "顯示資料夾側邊欄", "showFolderSidebarHelp": "在模型頁面啟用或停用資料夾導覽側邊欄。停用後，側邊欄與滑鼠懸停區域將保持隱藏。", "cardInfoDisplay": "卡片資訊顯示", diff --git a/py/services/settings_manager.py b/py/services/settings_manager.py index d4a8b005..b0323ebc 100644 --- a/py/services/settings_manager.py +++ b/py/services/settings_manager.py @@ -92,6 +92,7 @@ DEFAULT_SETTINGS: Dict[str, Any] = { "mature_blur_level": "R", "autoplay_on_hover": False, "display_density": "default", + "recipes_layout": "grid", "card_info_display": "always", "include_trigger_words": False, "compact_mode": False, diff --git a/static/css/components/card.css b/static/css/components/card.css index e9268abc..6d62d7ed 100644 --- a/static/css/components/card.css +++ b/static/css/components/card.css @@ -31,6 +31,10 @@ overflow: hidden; } +.card-grid.masonry-layout .model-card { + aspect-ratio: auto; +} + .model-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); diff --git a/static/js/state/index.js b/static/js/state/index.js index 61b54097..4749f497 100644 --- a/static/js/state/index.js +++ b/static/js/state/index.js @@ -38,6 +38,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({ card_blur_amount: 8, autoplay_on_hover: false, display_density: 'default', + recipes_layout: 'grid', card_info_display: 'always', model_name_display: 'model_name', lora_syntax_format: 'legacy', diff --git a/templates/components/modals/settings_modal.html b/templates/components/modals/settings_modal.html index f48147ed..df46df75 100644 --- a/templates/components/modals/settings_modal.html +++ b/templates/components/modals/settings_modal.html @@ -625,7 +625,24 @@ {{ t('settings.layoutSettings.displayDensityWarning') }} - + +
+
+
+ +
+
+ +
+
+
+
diff --git a/tests/frontend/state/index.test.js b/tests/frontend/state/index.test.js index ba586d84..77bbf6c3 100644 --- a/tests/frontend/state/index.test.js +++ b/tests/frontend/state/index.test.js @@ -17,7 +17,8 @@ describe('state module', () => { civitai_host: 'civitai.com', language: 'en', blur_mature_content: true, - mature_blur_level: 'R' + mature_blur_level: 'R', + recipes_layout: 'grid' }); expect(defaultSettings.download_path_templates).toEqual(DEFAULT_PATH_TEMPLATES);