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

Improve look of http/timer header component

Browse Source
This commit is contained in:
Peter Stockings
2025-11-21 11:43:28 +11:00
parent eff379cf94
commit fc494a9355
6 changed files with 87 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/dashboard/http_functions/editor.html
View File

@@ -14,7 +14,7 @@ logs_url=url_for('http.logs', function_id=function_id),
history_url=url_for('http.history', function_id=function_id)) }}
<div id="app" class="p-1">
<div id="app" class="">
<!-- The Editor component will be mounted here -->
</div>

170
templates/dashboard/http_functions/header.html
View File

@@ -1,105 +1,99 @@
<div class="bg-white dark:bg-gray-800 border-b">
<div class="">
<!-- Action Buttons Row -->
<div class="flex items-center justify-between pb-2">
<!-- Action Buttons (left side) -->
<div class="flex items-center space-x-4">
<h1 class="font-semibold text-lg md:text-2xl" data-id="52">
{{ title }}
</h1>
<!-- Tabs and Actions -->
<div class="border-b border-gray-200 dark:border-gray-800 flex justify-between items-end">
<nav class="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
{% if show_edit_form|default(false, true) %}
<button
class="group flex flex-col items-center {% if active_tab == 'edit' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
hx-get="{{ edit_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
<div
class="p-2 rounded-lg {% if active_tab == 'edit' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" data-slot="icon" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</div>
<span class="text-xs font-medium">Edit</span>
</button>
<a href="#" hx-get="{{ edit_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
{% if active_tab == 'edit' %}
border-blue-500 text-blue-600 dark:text-blue-400
{% else %}
border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
Editor
</a>
{% endif %}
{% if show_logs|default(false, true) %}
<button
class="group flex flex-col items-center {% if active_tab == 'logs' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
hx-get="{{ logs_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
<div
class="p-2 rounded-lg {% if active_tab == 'logs' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</div>
<span class="text-xs font-medium">Logs</span>
</button>
<a href="#" hx-get="{{ logs_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
{% if active_tab == 'logs' %}
border-blue-500 text-blue-600 dark:text-blue-400
{% else %}
border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
Logs
</a>
{% endif %}
{% if show_client|default(false, true) %}
<button
class="group flex flex-col items-center {% if active_tab == 'client' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
hx-get="{{ url_for('http.client', function_id=function_id) }}" hx-target="#container"
hx-swap="innerHTML" hx-push-url="true">
<div
class="p-2 rounded-lg {% if active_tab == 'client' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
</svg>
</div>
<span class="text-xs font-medium">Client</span>
</button>
<a href="#" hx-get="{{ url_for('http.client', function_id=function_id) }}" hx-target="#container"
hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
{% if active_tab == 'client' %}
border-blue-500 text-blue-600 dark:text-blue-400
{% else %}
border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
</svg>
Client
</a>
{% endif %}
{% if show_history|default(false, true) %}
<button
class="group flex flex-col items-center {% if active_tab == 'history' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
hx-get="{{ history_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
<div
class="p-2 rounded-lg {% if active_tab == 'history' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"
stroke-width="25" stroke="currentColor">
<path
d="M416,160a64,64,0,1,0-96.27,55.24c-2.29,29.08-20.08,37-75,48.42-17.76,3.68-35.93,7.45-52.71,13.93V151.39a64,64,0,1,0-64,0V360.61a64,64,0,1,0,64.42.24c2.39-18,16-24.33,65.26-34.52,27.43-5.67,55.78-11.54,79.78-26.95,29-18.58,44.53-46.78,46.36-83.89A64,64,0,0,0,416,160ZM160,64a32,32,0,1,1-32,32A32,32,0,0,1,160,64Zm0,384a32,32,0,1,1,32-32A32,32,0,0,1,160,448ZM352,192a32,32,0,1,1,32-32A32,32,0,0,1,352,192Z">
</path>
</svg>
</div>
<span class="text-xs font-medium">History</span>
</button>
<a href="#" hx-get="{{ history_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
{% if active_tab == 'history' %}
border-blue-500 text-blue-600 dark:text-blue-400
{% else %}
border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0 1 18 0Z" />
</svg>
History
</a>
{% endif %}
{% if show_new|default(false, true) %}
<button
class="group flex flex-col items-center {% if active_tab == 'new' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
hx-get="{{ new_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
<div
class="p-2 rounded-lg {% if active_tab == 'new' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="text-xs font-medium">New</span>
</button>
{% endif %}
</div>
<!-- Cancel Button (right side) -->
<button class="group flex flex-col items-center text-gray-500 hover:text-blue-600" hx-get="{{ cancel_url }}"
hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
<div class="p-2 rounded-lg group-hover:bg-blue-50">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
<a href="#" hx-get="{{ new_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2
{% if active_tab == 'new' %}
border-blue-500 text-blue-600 dark:text-blue-400
{% else %}
border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300
{% endif %}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="text-xs font-medium">Cancel</span>
</button>
</div>
New Function
</a>
{% endif %}
</nav>
<div class="pb-2">
<button hx-get="{{ cancel_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
class="inline-flex items-center justify-center px-3 py-1.5 border border-gray-300 dark:border-gray-700 shadow-sm text-xs font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1.5 text-gray-500 dark:text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Back
</button>
</div>
</div>
</div>

2
templates/dashboard/http_functions/new.html
View File

@@ -14,7 +14,7 @@ cancel_url=url_for('http.overview'),
title='New HTTP Function')
}}
<div id="app" class="p-1">
<div id="app" class="">
<!-- The Editor component will be mounted here -->
</div>

2
templates/dashboard/timer_functions/edit.html
View File

@@ -15,7 +15,7 @@ logs_url=url_for('timer.logs', function_id=function_id),
history_url=url_for('timer.history', function_id=function_id)) }}
<div id="app" class="p-1">
<div id="app" class="">
<!-- The Editor component will be mounted here -->
</div>

2
templates/dashboard/timer_functions/history.html
View File

@@ -2,7 +2,7 @@
{% block page %}
{{ render_partial('dashboard/timer_functions/header.html',
{{ render_partial('dashboard/http_functions/header.html',
user_id=user_id,
function_id=function_id,
active_tab='history',

2
templates/dashboard/timer_functions/new.html
View File

@@ -13,7 +13,7 @@ cancel_url=url_for('timer.overview'),
title='New Timer Function')
}}
<div id="app" class="p-1">
<div id="app" class="">
<!-- The Editor component will be mounted here -->
</div>