chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

style: 优化移动端ui逻辑与交互一致性

Browse Source 
- 移动端布局：站点卡片统一两列；卡片改为横排左对齐，标题/描述省略防溢出
- 移动端留白：缩短分类卡片与页面边缘的左右间距，扩大可用宽度
- 搜索交互：搜索框常驻置顶；搜索按钮未删除仅隐藏；移除“搜索面板”切换/遮罩逻辑，按钮点击仅聚焦输入框
- 顶部栏：搜索框与菜单按钮同排；菜单按钮磁贴与搜索框风格/高度更契合；加入 safe-area 适配并修复横向溢出
- 侧边栏：移动端限制宽度并隐藏横向溢出，避免撑出右侧
- 磁贴统一：右下角主题/分类按钮在移动端与桌面端统一为同款磨砂卡片风格（含 safe-area 偏移）
This commit is contained in:
rbetree
2026-01-05 22:39:23 +08:00
parent ccd18f5ac5
commit 3e78332b54
2 changed files with 109 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
assets/style.css
View File

@@ -136,9 +136,12 @@ html.preload * {
right: var(--spacing-xl); right: var(--spacing-xl);
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-lg);
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2)); background: rgba(var(--card-bg-rgb), 0.65);
color: var(--text-bright); border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -147,12 +150,11 @@ html.preload * {
transition-timing-function: var(--transition-bounce); transition-timing-function: var(--transition-bounce);
z-index: 100; z-index: 100;
box-shadow: 0 4px 16px var(--shadow-color); box-shadow: 0 4px 16px var(--shadow-color);
border: 1px solid var(--border-color);
} }
.theme-toggle:hover { .theme-toggle:hover {
transform: translateY(-2px); transform: translateY(-2px);
background: linear-gradient(145deg, var(--secondary-bg), var(--site-card-bg-gradient-1)); background: rgba(var(--card-bg-rgb), 0.75);
box-shadow: 0 6px 20px var(--shadow-color); box-shadow: 0 6px 20px var(--shadow-color);
color: var(--accent-color); color: var(--accent-color);
} }
@@ -254,12 +256,15 @@ body.loaded .layout {
display: none; display: none;
position: fixed; position: fixed;
top: var(--spacing-md); top: var(--spacing-md);
top: calc(env(safe-area-inset-top) + var(--spacing-md));
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
padding: 0 var(--spacing-md); padding: 0 var(--spacing-md);
padding-left: calc(env(safe-area-inset-left) + var(--spacing-md));
padding-right: calc(env(safe-area-inset-right) + var(--spacing-md));
justify-content: space-between; justify-content: space-between;
z-index: 900; z-index: 910;
pointer-events: none; pointer-events: none;
} }
@@ -790,9 +795,12 @@ body .content.expanded {
right: var(--spacing-xl); right: var(--spacing-xl);
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-lg);
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2)); background: rgba(var(--card-bg-rgb), 0.65);
color: var(--text-bright); border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -801,12 +809,11 @@ body .content.expanded {
transition-timing-function: var(--transition-bounce); transition-timing-function: var(--transition-bounce);
z-index: 100; z-index: 100;
box-shadow: 0 4px 16px var(--shadow-color); box-shadow: 0 4px 16px var(--shadow-color);
border: 1px solid var(--border-color);
} }
.category-toggle:hover { .category-toggle:hover {
transform: translateY(-2px); transform: translateY(-2px);
background: linear-gradient(145deg, var(--secondary-bg), var(--site-card-bg-gradient-1)); background: rgba(var(--card-bg-rgb), 0.75);
box-shadow: 0 6px 20px var(--shadow-color); box-shadow: 0 6px 20px var(--shadow-color);
color: var(--accent-color); color: var(--accent-color);
} }
@@ -1577,7 +1584,7 @@ body .content.expanded {
.category-level-3 .sites-grid, .category-level-3 .sites-grid,
.group-level-4 .sites-grid, .group-level-4 .sites-grid,
.category-level-4 .sites-grid { .category-level-4 .sites-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-sm); gap: var(--spacing-sm);
} }
} }
@@ -2295,17 +2302,68 @@ body .content.expanded {
display: flex; display: flex;
} }
:root {
/* 与移动端搜索框高度更贴合（搜索框更高一些，菜单按钮同步放大） */
--mobile-top-button-size: 2.9rem;
}
.menu-toggle {
width: var(--mobile-top-button-size);
height: var(--mobile-top-button-size);
background: rgba(var(--card-bg-rgb), 0.65);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 16px var(--shadow-color);
}
/* 移动端：右下角磁贴与侧边栏按钮磁贴统一风格 */
.theme-toggle,
.category-toggle {
width: var(--mobile-top-button-size);
height: var(--mobile-top-button-size);
background: rgba(var(--card-bg-rgb), 0.65);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 16px var(--shadow-color);
transition: all var(--transition-normal);
transition-timing-function: var(--transition-bounce);
}
.theme-toggle:hover,
.category-toggle:hover {
transform: translateY(-2px);
background: rgba(var(--card-bg-rgb), 0.75);
box-shadow: 0 6px 20px var(--shadow-color);
color: var(--accent-color);
}
.theme-toggle:active,
.category-toggle:active {
transform: translateY(0);
box-shadow: 0 2px 8px var(--shadow-color);
}
.content { .content {
margin-left: 0; margin-left: 0;
width: 100vw; width: 100vw;
max-width: 100vw; max-width: 100vw;
padding-top: 5rem; padding-top: calc(var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
padding-top: calc(env(safe-area-inset-top) + var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
/* 缩短分类卡片与页面边缘的左右留白，扩大分类卡片可用宽度 */
padding-left: calc(var(--spacing-sm) + var(--spacing-xs));
padding-right: calc(var(--spacing-sm) + var(--spacing-xs));
} }
.sidebar { .sidebar {
transform: translateX(-100%); transform: translateX(-100%);
box-shadow: none; box-shadow: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 100vw;
overflow-x: hidden;
} }
.sidebar .logo { .sidebar .logo {
@@ -2362,32 +2420,27 @@ body .content.expanded {
margin-right: 1rem; margin-right: 1rem;
} }
/* 移动端：搜索框常驻显示（与侧边栏按钮同一行，无需“悬浮磁贴”） */
.search-container { .search-container {
position: fixed; position: fixed;
top: 0; top: var(--spacing-md);
left: 0; top: calc(env(safe-area-inset-top) + var(--spacing-md));
width: 100%; /* 给左侧菜单按钮留出空间 */
padding: 1rem; left: calc(var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
transform: translateY(-100%); right: var(--spacing-md);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); left: calc(env(safe-area-inset-left) + var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
z-index: 95; right: calc(env(safe-area-inset-right) + var(--spacing-md));
box-shadow: 0 2px 10px var(--shadow-color); width: auto;
} padding: 0;
margin-bottom: 0;
.search-container.active { box-shadow: none;
transform: translateY(0); z-index: 900;
z-index: 1000;
/* 增加搜索容器激活时的z-index，确保显示在按钮之上 */
} }
.search-box { .search-box {
max-width: 100%; max-width: 100%;
} }
.search-container.active .search-box {
margin-bottom: 0;
}
.search-box input { .search-box input {
padding: 0.8rem 3rem 0.8rem 1rem; padding: 0.8rem 3rem 0.8rem 1rem;
font-size: 0.95rem; font-size: 0.95rem;
@@ -2442,7 +2495,14 @@ body .content.expanded {
/* 移动端分类切换按钮 */ /* 移动端分类切换按钮 */
.category-toggle { .category-toggle {
bottom: 4rem; bottom: 4rem;
bottom: calc(env(safe-area-inset-bottom) + 4rem);
right: 1rem; right: 1rem;
right: calc(env(safe-area-inset-right) + 1rem);
}
/* 移动端：隐藏搜索按钮（未删除，仅隐藏；搜索框常驻） */
.search-toggle {
display: none;
} }
/* 分类样式优化 */ /* 分类样式优化 */
@@ -2454,14 +2514,15 @@ body .content.expanded {
.sites-grid { .sites-grid {
gap: var(--spacing-sm); gap: var(--spacing-sm);
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.site-card { .site-card {
flex-direction: column; /* 移动端保持与客户端一致：横排卡片（图标在左，文本左对齐） */
flex-direction: row;
align-items: center; align-items: center;
text-align: center; text-align: left;
padding: var(--spacing-md) var(--spacing-sm); padding: 0.75rem 0.65rem;
gap: 0.6rem; gap: 0.6rem;
} }
@@ -2489,13 +2550,12 @@ body .content.expanded {
} }
.site-card-content { .site-card-content {
width: 100%; text-align: left;
text-align: center;
} }
.site-card h3 { .site-card h3 {
font-size: 1rem; font-size: 1rem;
margin-bottom: 0.4rem; margin-bottom: 0.25rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -2504,7 +2564,7 @@ body .content.expanded {
.site-card p { .site-card p {
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.3; line-height: 1.4;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -2513,7 +2573,9 @@ body .content.expanded {
/* 在移动端的主题切换按钮 */ /* 在移动端的主题切换按钮 */
.theme-toggle { .theme-toggle {
bottom: 1rem; bottom: 1rem;
bottom: calc(env(safe-area-inset-bottom) + 1rem);
right: 1rem; right: 1rem;
right: calc(env(safe-area-inset-right) + 1rem);
} }
.sidebar .submenu { .sidebar .submenu {
@@ -2544,7 +2606,10 @@ body .content.expanded {
} }
.search-container { .search-container {
padding: 0 1rem; left: calc(var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
right: var(--spacing-md);
left: calc(env(safe-area-inset-left) + var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
right: calc(env(safe-area-inset-right) + var(--spacing-md));
} }
.page { .page {
@@ -2555,7 +2620,7 @@ body .content.expanded {
.sites-grid { .sites-grid {
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.site-card { .site-card {
@@ -2613,7 +2678,7 @@ body .content.expanded {
.sites-grid { .sites-grid {
gap: 0.4rem; gap: 0.4rem;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.site-card { .site-card {

28
src/script.js
View File

@@ -1104,7 +1104,6 @@ document.addEventListener('DOMContentLoaded', () => {
let currentPageId = homePageId; let currentPageId = homePageId;
let isInitialLoad = true; let isInitialLoad = true;
let isSidebarOpen = false; let isSidebarOpen = false;
let isSearchOpen = false;
let isLightTheme = false; // 主题状态 let isLightTheme = false; // 主题状态
let isSidebarCollapsed = false; // 侧边栏折叠状态 let isSidebarCollapsed = false; // 侧边栏折叠状态
let pages; // 页面元素的全局引用 let pages; // 页面元素的全局引用
@@ -1342,22 +1341,11 @@ document.addEventListener('DOMContentLoaded', () => {
isSidebarOpen = !isSidebarOpen; isSidebarOpen = !isSidebarOpen;
sidebar.classList.toggle('active', isSidebarOpen); sidebar.classList.toggle('active', isSidebarOpen);
overlay.classList.toggle('active', isSidebarOpen); overlay.classList.toggle('active', isSidebarOpen);
if (isSearchOpen) {
toggleSearch();
}
} }
// 移动端搜索切换 // 移动端：搜索框常驻显示（CSS 控制），无需“搜索面板”开关；点击仅聚焦输入框
function toggleSearch() { function toggleSearch() {
isSearchOpen = !isSearchOpen; searchInput && searchInput.focus();
searchContainer.classList.toggle('active', isSearchOpen);
overlay.classList.toggle('active', isSearchOpen);
if (isSearchOpen) {
searchInput.focus();
if (isSidebarOpen) {
toggleSidebar();
}
}
} }
// 关闭所有移动端面板 // 关闭所有移动端面板
@@ -1365,9 +1353,6 @@ document.addEventListener('DOMContentLoaded', () => {
if (isSidebarOpen) { if (isSidebarOpen) {
toggleSidebar(); toggleSidebar();
} }
if (isSearchOpen) {
toggleSearch();
}
} }
// 移动端事件监听 // 移动端事件监听
@@ -1390,10 +1375,6 @@ document.addEventListener('DOMContentLoaded', () => {
e.preventDefault(); e.preventDefault();
if (isMobile() && !isSearchOpen) {
toggleSearch();
}
searchInput && searchInput.focus(); searchInput && searchInput.focus();
}); });
@@ -1409,7 +1390,6 @@ document.addEventListener('DOMContentLoaded', () => {
searchContainer.classList.remove('active'); searchContainer.classList.remove('active');
overlay.classList.remove('active'); overlay.classList.remove('active');
isSidebarOpen = false; isSidebarOpen = false;
isSearchOpen = false;
} else { } else {
// 在移动设备下，重置侧边栏折叠状态 // 在移动设备下，重置侧边栏折叠状态
sidebar.classList.remove('collapsed'); sidebar.classList.remove('collapsed');
@@ -1886,10 +1866,6 @@ document.addEventListener('DOMContentLoaded', () => {
resetSearch(); resetSearch();
} else if (e.key === 'Enter') { } else if (e.key === 'Enter') {
executeSearch(searchInput.value); executeSearch(searchInput.value);
// 在移动设备上，执行搜索后自动关闭搜索面板
if (isMobile() && isSearchOpen) {
closeAllPanels();
}
} }
}); });