admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(website): improve mobile responsiveness (#554)

Browse Source
This commit is contained in:
ekko
2026-05-09 08:43:05 +08:00
committed by GitHub
parent 9045f2a987
commit 9507cbcc71
8 changed files with 196 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/layout/SiteHeader.vue
+51 -2
View File
@@ -86,8 +86,31 @@ function goHome() {
<a class="mobile-link" @click.prevent="navigateTo('docs.getting-started')">{{ t('nav.docs') }}</a>
<a class="mobile-link" href="https://github.com/EKKOLearnAI/hermes-web-ui" target="_blank" rel="noopener">{{ t('nav.github') }}</a>
<div class="mobile-actions">
<button class="icon-btn" @click="switchLocale">{{ locale === 'en' ? '中文' : 'English' }}</button>
<button class="icon-btn" @click="toggleTheme">{{ isDark ? 'Light Mode' : 'Dark Mode' }}</button>
<button class="mobile-action-btn" @click="switchLocale">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
<circle cx="12" cy="12" r="10" />
<line x1="2" y1="12" x2="22" y2="12" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
{{ locale === 'en' ? '中文' : 'English' }}
</button>
<button class="mobile-action-btn" @click="toggleTheme">
<svg v-if="isDark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
{{ isDark ? 'Light Mode' : 'Dark Mode' }}
</button>
</div>
</div>
</div>
@@ -245,6 +268,32 @@ function goHome() {
padding-top: 12px;
}
.mobile-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--border-color);
border-radius: $radius-sm;
background: transparent;
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all $transition-fast;
&:active {
background: var(--bg-secondary);
color: var(--text-primary);
}
}
.action-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
@media (max-width: $breakpoint-mobile) {
.header-nav {
display: none;