peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Add light/dark theme with toggle in navbar (dark theme styling incomplete - dont care for now)

Browse Source
This commit is contained in:
Peter Stockings
2025-11-23 22:00:41 +11:00
parent fc494a9355
commit 89a17f68ab
15 changed files with 463 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
templates/dashboard/http_functions/overview.html
View File

@@ -1,82 +1,25 @@
{% extends 'dashboard.html' %}
const isExpanding = btn.textContent.trim() === 'Expand All';
{% block page %}
details.forEach(detail => {
if (isExpanding) {
detail.setAttribute('open', '');
} else {
detail.removeAttribute('open');
}
});
<div class="px-4 sm:px-6 lg:px-8 py-8">
<div class="flex items-center mb-6" data-id="51">
<h1 class="text-2xl font-bold text-gray-900">HTTP Functions</h1>
<button
class="inline-flex items-center px-4 py-2 ml-auto bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200"
hx-get="{{ url_for('http.new') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg>
Add Function
</button>
</div>
btn.textContent = isExpanding ? 'Collapse All' : 'Expand All';
}
<div class="mb-6 flex gap-4">
<input type="text" name="q" placeholder="Search functions..."
class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
value="{{ search_query }}" hx-get="{{ url_for('http.overview') }}" hx-trigger="keyup changed delay:500ms"
hx-target="#function-list" hx-headers='{"HX-Target": "function-list"}' hx-push-url="true">
<button onclick="toggleAllDetails()" id="toggle-btn"
class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium transition-colors duration-200 whitespace-nowrap">
Expand All
</button>
</div>
<div id="function-list">
{% block function_list %}
{% from 'dashboard/http_functions/_function_list.html' import render_functions %}
{{ render_functions(http_functions) }}
{% if http_functions|length == 0 %}
<div class="py-12">
<div class="text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
<h3 class="mt-2 text-lg font-medium text-gray-900">No functions found</h3>
<p class="mt-1 text-sm text-gray-500">Get started by creating a new function.</p>
</div>
</div>
{% endif %}
{% endblock %}
</div>
</div>
<script>
function toggleAllDetails() {
const details = document.querySelectorAll('#function-list details');
const btn = document.getElementById('toggle-btn');
const isExpanding = btn.textContent.trim() === 'Expand All';
details.forEach(detail => {
if (isExpanding) {
detail.setAttribute('open', '');
} else {
detail.removeAttribute('open');
}
});
btn.textContent = isExpanding ? 'Collapse All' : 'Expand All';
}
// Reset button state when HTMX updates the list
document.body.addEventListener('htmx:afterSwap', function (evt) {
if (evt.detail.target.id === 'function-list') {
const btn = document.getElementById('toggle-btn');
if (btn) {
btn.textContent = 'Expand All';
}
}
});
// Reset button state when HTMX updates the list
document.body.addEventListener('htmx:afterSwap', function (evt) {
if (evt.detail.target.id === 'function-list') {
const btn = document.getElementById('toggle-btn');
if (btn) {
btn.textContent = 'Expand All';
}
}
});
</script>
{% endblock %}