earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): replace language dropdown with globe icon and expandable menu

Browse Source
This commit is contained in:
Zichao Lin
2026-07-07 09:54:57 +08:00
parent 591ad3e178
commit 02269417a9
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/static/style.css
View File

@@ -30,9 +30,15 @@ a:hover { text-decoration: underline; }
.nav-logout { color: var(--danger) !important; }
.nav-lang-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: .15rem .45rem; font-size: .72rem; color: var(--text-muted); cursor: pointer; line-height: 1; }
.nav-lang-btn:hover { background: var(--bg); color: var(--primary); }
.nav-lang-select { background: none; border: 1px solid var(--border); border-radius: 4px; padding: .15rem .3rem; font-size: .72rem; color: var(--text-muted); cursor: pointer; line-height: 1; outline: none; }
.nav-lang-select:hover { background: var(--bg); color: var(--primary); }
.nav-lang-select option { background: var(--card-bg); color: var(--text); }
.lang-switcher { position: relative; }
.lang-globe { background: none; border: none; cursor: pointer; font-size: 1rem; padding: .1rem .2rem; line-height: 1; border-radius: 4px; }
.lang-globe:hover { background: var(--bg); }
.lang-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 100; min-width: 100px; padding: .25rem 0; }
.lang-dropdown.show { display: block; }
.lang-dropdown form { margin: 0; }
.lang-option { display: block; width: 100%; padding: .35rem .75rem; border: none; background: none; text-align: left; font-size: .8rem; color: var(--text); cursor: pointer; white-space: nowrap; }
.lang-option:hover { background: var(--bg); color: var(--primary); }
.lang-option.active { color: var(--primary); font-weight: 600; }
/* Container */
.container { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }

22
app/templates/base.html
View File

@@ -18,13 +18,17 @@
<a href="/admin/invites">{{ 'nav.invites'|t(user.language) }}</a>
{% endif %}
<a href="/api/docs">{{ 'nav.api_docs'|t(user.language) }}</a>
<form method="post" action="/settings/language" class="inline" style="display:inline-flex;align-items:center;gap:0">
<select name="language" class="nav-lang-select" onchange="this.form.submit()">
<div class="lang-switcher" id="langSwitcher">
<button type="button" class="lang-globe" onclick="document.getElementById('langDropdown').classList.toggle('show')">🌐</button>
<div class="lang-dropdown" id="langDropdown">
{% for code, name in available_languages.items() %}
<option value="{{ code }}" {% if user.language == code %}selected{% endif %}>{{ name }}</option>
{% endfor %}
</select>
<form method="post" action="/settings/language">
<input type="hidden" name="language" value="{{ code }}">
<button type="submit" class="lang-option {% if user.language == code %}active{% endif %}">{{ name }}</button>
</form>
{% endfor %}
</div>
</div>
<a href="/logout" class="nav-logout">{{ 'nav.logout'|t(user.language) }}</a>
{% endif %}
</div>
@@ -41,5 +45,13 @@ document.addEventListener('submit', function(e) {
el.value = el.value.trim();
});
}, true);
// Close language dropdown when clicking outside
document.addEventListener('click', function(e) {
var sw = document.getElementById('langSwitcher');
var dd = document.getElementById('langDropdown');
if (sw && dd && !sw.contains(e.target)) {
dd.classList.remove('show');
}
});
</script>
</html>