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

Update search UI

Browse Source
This commit is contained in:
junv
2024-09-08 19:32:37 +10:00
parent dac257587a
commit cd848fe6aa
3 changed files with 109 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
db.sqlite3
BIN
View File
Binary file not shown.
new_theme/static/css/dist/styles.css
Vendored
+62 -157
View File
@@ -848,16 +848,20 @@ select {
margin-right: auto;
}
.mb-3 {
margin-bottom: 0.75rem;
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
.ml-1 {
margin-left: 0.25rem;
}
.mr-2 {
@@ -868,22 +872,6 @@ select {
margin-top: 0.25rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
@@ -896,30 +884,14 @@ select {
margin-top: 2rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-4 {
margin-right: 1rem;
.mt-20 {
margin-top: 5rem;
}
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
@@ -944,10 +916,6 @@ select {
display: none;
}
.h-screen {
height: 100vh;
}
.h-4 {
height: 1rem;
}
@@ -956,14 +924,18 @@ select {
height: 16rem;
}
.w-full {
width: 100%;
.h-screen {
height: 100vh;
}
.w-4 {
width: 1rem;
}
.w-full {
width: 100%;
}
.w-64 {
width: 16rem;
}
@@ -988,10 +960,6 @@ select {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.select-all {
-webkit-user-select: all;
-moz-user-select: all;
@@ -1022,10 +990,6 @@ select {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
@@ -1093,46 +1057,36 @@ select {
border-top-width: 1px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1143,31 +1097,16 @@ select {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
.p-2 {
padding: 0.5rem;
}
.p-6 {
padding: 1.5rem;
}
.p-2 {
padding: 0.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
.p-4 {
padding: 1rem;
}
.px-4 {
@@ -1175,9 +1114,9 @@ select {
padding-right: 1rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-2 {
@@ -1195,11 +1134,6 @@ select {
padding-bottom: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.text-left {
text-align: left;
}
@@ -1222,6 +1156,11 @@ select {
line-height: 1;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
@@ -1237,11 +1176,6 @@ select {
line-height: 1rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
@@ -1279,21 +1213,26 @@ select {
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -1309,14 +1248,9 @@ select {
color: rgb(220 38 38 / var(--tw-text-opacity));
}
.text-gray-700 {
.text-white {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow-md {
@@ -1339,44 +1273,24 @@ select {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}
.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
.hover\:bg-yellow-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(161 98 7 / var(--tw-bg-opacity));
}
.hover\:bg-blue-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.hover\:bg-red-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.hover\:bg-gray-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.hover\:bg-gray-100:hover {
.hover\:bg-red-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.hover\:text-blue-800:hover {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.hover\:text-blue-900:hover {
@@ -1399,15 +1313,6 @@ select {
color: rgb(127 29 29 / var(--tw-text-opacity));
}
.hover\:text-blue-800:hover {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.focus\:border-blue-300:focus {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity));
templates/base.html
+47 -47
View File
@@ -9,7 +9,9 @@
<link href="{% static 'css/dist/styles.css' %}" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
/* ... other styles ... */
.bg-custom-blue {
background-color: #1a2f4e;
}
#search-results {
background-color: white;
border: 1px solid #e2e8f0;
@@ -23,65 +25,27 @@
cursor: pointer;
color: #4a5568;
}
#search-results div:hover {
background-color: #f7fafc;
}
.language-selector {
position: relative;
cursor: pointer;
}
.language-options {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
min-width: 150px; /* Increased width */
}
.language-selector:hover .language-options {
display: block;
}
.language-option {
padding: 0.5rem 1rem;
color: #4a5568;
}
.language-option:hover {
background-color: #f7fafc;
#search-results div:hover, #search-results div.active {
background-color: #e2e8f0;
}
</style>
</head>
<body class="bg-gray-100">
<nav class="bg-blue-600 text-white p-4 fixed w-full top-0 z-10">
<nav class="bg-custom-blue text-white p-4 fixed w-full top-0 z-10">
<div class="container mx-auto flex justify-between items-center">
<a href="{% url 'link_list' %}" class="text-xl font-bold">{% trans "URL Manager" %}</a>
<div class="flex items-center space-x-4"> <!-- Added space-x-4 for more spacing -->
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" id="search-input" class="bg-white text-gray-800 rounded px-4 py-2 w-64" placeholder="{% trans 'Search aliases...' %}"> <!-- Increased width and padding -->
<input type="text" id="search-input" class="bg-white text-gray-800 rounded px-4 py-2 w-64" placeholder="{% trans 'Search aliases...' %}">
<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">
<span class="flex items-center">
<i class="fas fa-globe mr-2"></i> <!-- Increased margin -->
<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 }}
</span>
<div class="language-options">
<form action="{% url 'set_language' %}" method="post">
{% 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="language-option w-full text-left">
{{ language.name_local }} ({{ language.code|upper }})
</button>
{% endfor %}
</form>
</div>
</div>
</div>
</div>
@@ -97,6 +61,8 @@
{% endif %}
{% block content %}
<h1 class="text-2xl font-bold mb-4">Welcome to URL Manager</h1>
<p>If you can see this message, the base template is working correctly.</p>
{% endblock %}
</div>
@@ -155,7 +121,7 @@
});
searchResults.style.display = 'block';
} else {
searchResults.innerHTML = '<div class="p-2">{% trans "No results found" %}</div>';
searchResults.innerHTML = '<div>{% trans "No results found" %}</div>';
searchResults.style.display = 'block';
}
})
@@ -165,7 +131,41 @@
});
}, 300));
// ... (rest of the script for keyboard navigation, if needed)
searchInput.addEventListener('keydown', function(e) {
let x = searchResults.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("active");
}
function removeActive(x) {
for (let i = 0; i < x.length; i++) {
x[i].classList.remove("active");
}
}
document.addEventListener("click", function (e) {
if (e.target !== searchInput && e.target !== searchResults) {
searchResults.style.display = "none";
}
});
});
</script>
</body>