home/links
2
0
Fork 0
mirror of https://github.com/wahyd4/links.git synced 2026-08-09 05:06:16 +10:00
Code Issues Packages Projects Releases Wiki Activity

UI change

Browse Source
This commit is contained in:
junv
2024-09-09 14:22:57 +10:00
parent 69b7a136b8
commit e7f4f58444
6 changed files with 108 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
new_theme/static/css/dist/styles.css
Vendored
+4
View File
@@ -1279,6 +1279,10 @@ video {
--tw-ring-opacity: 0.5;
}
.group:hover .group-hover\:block {
display: block;
}
@media (min-width: 640px) {
.sm\:inline {
display: inline;
new_theme/static/css/styles.css
+25
View File
@@ -0,0 +1,25 @@
/* 添加到文件末尾 */
.group:hover .group-hover\:block {
display: block;
}
/* 添加新的样式 */
#more-menu-dropdown {
display: none;
}
#more-menu-dropdown.show {
display: block;
}
.hidden {
display: none;
}
#language-options.hidden {
display: none;
}
#language-options {
display: block;
}
new_theme/static/js/navbar.js
+61
View File
@@ -0,0 +1,61 @@
console.log('navbar.js is being executed');
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded event fired in navbar.js');
const moreMenuButton = document.getElementById('more-menu-button');
const moreMenuDropdown = document.getElementById('more-menu-dropdown');
const languageSelectorButton = document.getElementById('language-selector-button');
const languageOptions = document.getElementById('language-options');
console.log('moreMenuButton:', moreMenuButton);
console.log('moreMenuDropdown:', moreMenuDropdown);
console.log('languageSelectorButton:', languageSelectorButton);
console.log('languageOptions:', languageOptions);
function toggleDropdown(button, dropdown) {
button.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
dropdown.classList.toggle('hidden');
});
}
if (moreMenuButton && moreMenuDropdown) {
toggleDropdown(moreMenuButton, moreMenuDropdown);
} else {
console.error('More menu button or dropdown not found');
}
if (languageSelectorButton && languageOptions) {
toggleDropdown(languageSelectorButton, languageOptions);
} else {
console.error('Language selector button or options not found');
}
// 点击页面其他地方时关闭下拉菜单
document.addEventListener('click', function(e) {
if (moreMenuDropdown && !moreMenuButton.contains(e.target) && !moreMenuDropdown.contains(e.target)) {
moreMenuDropdown.classList.add('hidden');
}
if (languageOptions && !languageSelectorButton.contains(e.target) && !languageOptions.contains(e.target)) {
languageOptions.classList.add('hidden');
}
});
// 处理语言选择
const languageForm = document.getElementById('language-form');
console.log('languageForm:', languageForm);
if (languageForm) {
const languageButtons = languageForm.querySelectorAll('button[name="language"]');
console.log('languageButtons:', languageButtons);
languageButtons.forEach(button => {
button.addEventListener('click', function() {
console.log('Language changed');
languageForm.submit();
});
});
} else {
console.error('Language form not found');
}
});
templates/base.html
+17 -24
View File
@@ -55,27 +55,37 @@
<div class="container mx-auto flex justify-between items-center">
<a href="{% url 'link_list' %}" class="text-xl font-bold">{% trans "GoLinks" %}</a>
<div class="flex items-center space-x-4">
<a href="{% url 'search' %}" class="text-white hover:text-gray-200">{% trans "Advanced Search" %}</a>
<a href="{% url 'tools' %}" class="text-white hover:text-gray-200">{% trans "Tools" %}</a>
<div class="search-container">
<input type="text" id="search-input" class="bg-transparent text-white rounded px-2 py-1" placeholder="">
<div id="search-results" class="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded mt-1 hidden"></div>
</div>
<div class="language-selector relative">
<button class="flex items-center text-white hover:text-gray-200">
<!-- "Menus" 下拉菜单 -->
<div class="relative group">
<button id="more-menu-button" class="flex items-center text-white hover:text-gray-200">
<i class="fas fa-bars mr-2"></i>
{% trans "Menus" %}
</button>
<div id="more-menu-dropdown" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20 hidden">
<a href="{% url 'search' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{% trans "Advanced Search" %}</a>
<a href="{% url 'tools' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{% trans "Tools" %}</a>
</div>
</div>
<!-- 语言选择器 -->
<div class="relative">
<button id="language-selector-button" class="flex items-center text-white hover:text-gray-200">
<i class="fas fa-globe mr-2"></i>
{% get_current_language as LANGUAGE_CODE %}
{% get_language_info for LANGUAGE_CODE as current_language %}
{{ current_language.code|upper }}
</button>
<div class="language-options absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20 hidden">
<div id="language-options" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20 hidden">
<form action="{% url 'set_language' %}" method="post" id="language-form">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.path }}">
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<button type="submit" name="language" value="{{ language.code }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left {% if language.code == LANGUAGE_CODE %}font-bold{% endif %}">
<button type="submit" name="language" value="{{ language.code }}" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if language.code == LANGUAGE_CODE %}font-bold{% endif %}">
{{ language.name_local }} ({{ language.code|upper }})
</button>
{% endfor %}
@@ -102,6 +112,7 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{% static 'js/navbar.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchContainer = document.querySelector('.search-container');
@@ -217,24 +228,6 @@
});
});
// Add this new script for language selector functionality
document.addEventListener('DOMContentLoaded', function() {
const languageSelector = document.querySelector('.language-selector');
const languageOptions = document.querySelector('.language-options');
languageSelector.addEventListener('click', function(e) {
e.stopPropagation();
languageOptions.classList.toggle('hidden');
});
document.addEventListener('click', function() {
languageOptions.classList.add('hidden');
});
languageOptions.addEventListener('click', function(e) {
e.stopPropagation();
});
});
</script>
{% block extra_js %}{% endblock %}
</body>
url_manager/__pycache__/settings.cpython-312.pyc
BIN
View File
Binary file not shown.
url_manager/settings.py
+1 -1
View File
@@ -68,7 +68,7 @@ DATABASES = {
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS = [
BASE_DIR / "static",
os.path.join(BASE_DIR, 'new_theme/static'),
]
# 默认自动字段类型