From d43f13368164e9527eea47df12c9c8c275b582bf Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Thu, 6 Feb 2025 08:47:17 +0800 Subject: [PATCH] checkpoint --- static/css/style.css | 106 +++++++++++++++++++++++++---- static/js/main.js | 2 - static/js/utils/uiHelpers.js | 27 ++++---- templates/components/controls.html | 13 ++-- templates/loras.html | 6 -- 5 files changed, 113 insertions(+), 41 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index fbc13407..4eef12e1 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -886,7 +886,6 @@ body.modal-open { z-index: var(--z-overlay); } -.control-button, .theme-toggle { width: 36px; height: 36px; @@ -901,26 +900,16 @@ body.modal-open { transition: all 0.2s ease; } -.control-button:hover, .theme-toggle:hover { background: var(--lora-accent); color: white; transform: translateY(-2px); } -/* Add responsive adjustments */ -@media (max-width: 1024px) { - .search-container { - width: 200px; /* 减小搜索框宽度 */ - } -} - @media (max-width: 768px) { .actions { flex-wrap: wrap; gap: var(--space-1); - position: relative; - padding-right: 130px; /* 为corner-controls预留空间 */ } .search-container { @@ -929,10 +918,97 @@ body.modal-open { margin-left: 0; } + /* Remove the previous corner-controls mobile styles */ .corner-controls { - position: static; - top: 20px; /* 保持与桌面端一致的顶部间距 */ - right: 20px; /* 保持与桌面端一致的右侧间距 */ - transform: none; /* 移除之前的位移变换 */ + /* Keep the fixed positioning even on mobile */ + position: fixed; + top: 20px; + right: 20px; + } +} + +/* Folder Tags Container - New */ +.folder-tags-container { + position: relative; + width: 100%; +} + +.folder-tags { + transition: max-height 0.3s ease, opacity 0.2s ease; + max-height: 200px; /* 调整为合适的最大高度 */ + opacity: 1; + overflow: hidden; +} + +.folder-tags.collapsed { + max-height: 0; + opacity: 0; + margin: 0; +} + +/* Toggle Folders Button - New */ +.toggle-folders-btn { + position: absolute; + right: 0; + top: 0; + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--card-bg); + border: 1px solid var(--border-color); + color: var(--text-color); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + z-index: 2; +} + +.toggle-folders-btn:hover { + background: var(--lora-accent); + color: white; + transform: translateY(-2px); +} + +.toggle-folders-btn i { + transition: transform 0.3s ease; +} + +/* 折叠状态样式 */ +.folder-tags.collapsed + .toggle-folders-btn { + position: static; + margin-right: auto; /* 确保按钮在左侧 */ + transform: translateY(0); +} + +.folder-tags.collapsed + .toggle-folders-btn i { + transform: rotate(180deg); +} + +/* Update corner controls */ +.corner-controls { + position: fixed; + top: 20px; + right: 20px; + display: flex; + gap: 10px; + z-index: var(--z-overlay); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .folder-tags-container { + order: -1; /* 确保在移动端位于顶部 */ + } + + .toggle-folders-btn { + top: 50%; + transform: translateY(-50%); + } + + .folder-tags.collapsed + .toggle-folders-btn { + position: static; + transform: translateY(0); } } \ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index f009a7ab..652fab27 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -14,7 +14,6 @@ import { copyTriggerWord, openCivitai, toggleFolderTags, - openFeedback, initFolderTagsVisibility } from './utils/uiHelpers.js'; import { initializeInfiniteScroll } from './utils/infiniteScroll.js'; @@ -38,7 +37,6 @@ window.refreshLoras = refreshLoras; window.openCivitai = openCivitai; window.showToast = showToast window.toggleFolderTags = toggleFolderTags; -window.openFeedback = openFeedback; // Initialize everything when DOM is ready document.addEventListener('DOMContentLoaded', () => { diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js index 202c025b..37b031db 100644 --- a/static/js/utils/uiHelpers.js +++ b/static/js/utils/uiHelpers.js @@ -100,24 +100,23 @@ export function openCivitai(modelName) { export function toggleFolderTags() { const folderTags = document.querySelector('.folder-tags'); - if (!folderTags) return; + const btn = document.querySelector('.toggle-folders-btn'); + const isCollapsed = folderTags.classList.toggle('collapsed'); - const isHidden = folderTags.style.display === 'none'; - folderTags.style.display = isHidden ? 'flex' : 'none'; + // 更新按钮提示文本 + btn.title = isCollapsed ? 'Expand folder tags' : 'Collapse folder tags'; - // Save preference - localStorage.setItem('folderTagsVisible', isHidden ? 'true' : 'false'); -} - -export function openFeedback() { - window.open('https://github.com/willmiao/ComfyUI-Lora-Manager/issues/new', '_blank'); + // 保存状态到 localStorage + localStorage.setItem('folderTagsCollapsed', isCollapsed); } // Add this to your existing initialization code export function initFolderTagsVisibility() { - const folderTags = document.querySelector('.folder-tags'); - if (!folderTags) return; - - const isVisible = localStorage.getItem('folderTagsVisible') !== 'false'; - folderTags.style.display = isVisible ? 'flex' : 'none'; + const isCollapsed = localStorage.getItem('folderTagsCollapsed') === 'true'; + if (isCollapsed) { + const folderTags = document.querySelector('.folder-tags'); + const btn = document.querySelector('.toggle-folders-btn'); + folderTags.classList.add('collapsed'); + btn.title = 'Expand folder tags'; + } } \ No newline at end of file diff --git a/templates/components/controls.html b/templates/components/controls.html index df752515..bfeca41f 100644 --- a/templates/components/controls.html +++ b/templates/components/controls.html @@ -1,8 +1,13 @@
-
- {% for folder in folders %} -
{{ folder }}
- {% endfor %} +
+
+ {% for folder in folders %} +
{{ folder }}
+ {% endfor %} +
+
diff --git a/templates/loras.html b/templates/loras.html index 56b14c9f..9274f564 100644 --- a/templates/loras.html +++ b/templates/loras.html @@ -35,12 +35,6 @@
- -
Theme Theme