diff options
Diffstat (limited to 'web/templates/index.html')
| -rw-r--r-- | web/templates/index.html | 78 |
1 files changed, 25 insertions, 53 deletions
diff --git a/web/templates/index.html b/web/templates/index.html index 5322ca6..7e9a38f 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -46,8 +46,7 @@ <!-- Tab Navigation --> <div class="mb-4 sm:mb-6 no-print"> - <nav class="flex space-x-1 bg-panel backdrop-blur-sm rounded-xl p-1 text-shadow-sm"> - <!-- Main Tabs --> + <nav class="flex flex-wrap gap-1 bg-panel backdrop-blur-sm rounded-xl p-1 text-shadow-sm"> <button class="tab-button {{if eq .ActiveTab "timeline"}}tab-button-active{{end}}" hx-get="/tabs/timeline" @@ -57,6 +56,14 @@ 🗓️ Timeline </button> <button + class="tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}" + hx-get="/tabs/tasks" + hx-target="#tab-content" + hx-push-url="?tab=tasks" + onclick="setActiveTab(this)"> + ✓ Tasks + </button> + <button class="tab-button {{if eq .ActiveTab "shopping"}}tab-button-active{{end}}" hx-get="/tabs/shopping" hx-target="#tab-content" @@ -64,44 +71,25 @@ onclick="setActiveTab(this)"> 🛒 Shopping </button> + <button + class="tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}" + hx-get="/tabs/meals" + hx-target="#tab-content" + hx-push-url="?tab=meals" + onclick="setActiveTab(this)"> + 🍽️ Meals + </button> + <button + class="tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}" + hx-get="/tabs/planning" + hx-target="#tab-content" + hx-push-url="?tab=planning" + onclick="setActiveTab(this)"> + 📋 Planning + </button> <a href="/conditions" class="tab-button"> 🌋 Conditions </a> - - <!-- Details Dropdown --> - <div class="relative" id="details-dropdown"> - <button - class="tab-button {{if or (eq .ActiveTab "tasks") (eq .ActiveTab "planning") (eq .ActiveTab "meals")}}tab-button-active{{end}}" - onclick="toggleDetailsDropdown(event)"> - 📁 Details ▾ - </button> - <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-black/90 backdrop-blur-md rounded-lg p-1 min-w-[140px] z-[100] border border-white/20 shadow-lg"> - <button - class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "tasks"}}bg-white/20 text-white{{end}}" - hx-get="/tabs/tasks" - hx-target="#tab-content" - hx-push-url="?tab=tasks" - onclick="setActiveTab(this); closeDetailsDropdown();"> - ✓ Tasks - </button> - <button - class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "planning"}}bg-white/20 text-white{{end}}" - hx-get="/tabs/planning" - hx-target="#tab-content" - hx-push-url="?tab=planning" - onclick="setActiveTab(this); closeDetailsDropdown();"> - 📋 Planning - </button> - <button - class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "meals"}}bg-white/20 text-white{{end}}" - hx-get="/tabs/meals" - hx-target="#tab-content" - hx-push-url="?tab=meals" - onclick="setActiveTab(this); closeDetailsDropdown();"> - 🍽️ Meals - </button> - </div> - </div> </nav> </div> @@ -297,22 +285,6 @@ function closeTaskModal() { document.getElementById('task-edit-modal').classList.add('hidden'); } - // Details dropdown functions - function toggleDetailsDropdown(e) { - e.stopPropagation(); - var menu = document.getElementById('details-menu'); - menu.classList.toggle('hidden'); - } - function closeDetailsDropdown() { - document.getElementById('details-menu').classList.add('hidden'); - } - // Close dropdown when clicking outside - document.addEventListener('click', function(e) { - var dropdown = document.getElementById('details-dropdown'); - if (dropdown && !dropdown.contains(e.target)) { - closeDetailsDropdown(); - } - }); </script> <!-- Task Edit Modal --> |