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

Minor styling update for functions overview & edit/new pages to make it more usable after landing page changes, also started to work on making pages refreshable through htmx hx-push-url

Browse Source
This commit is contained in:
Peter Stockings
2024-03-27 13:08:29 +11:00
parent ea366d9f8b
commit 48b013c1f4
7 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
<div class="flex items-center">
<h1 class="font-semibold text-lg md:text-2xl" data-id="52">
{{ title }}: <span class="font-mono">{{ name }}</span>
{{ title }}{% if show_name|default(true, false) %}: <span class="font-mono">{{ name }}</span>{% endif %}
</h1>
{% if show_refresh|default(true, false) %}
@@ -56,9 +56,14 @@
</div>
<button
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
Cancel
<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" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
<span>Cancel</span>
</button>
</div>

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

@@ -1,11 +1,7 @@
<div class="flex items-center" data-id="51">
<h1 class="font-semibold text-lg md:text-2xl" data-id="52">New HTTP function</h1>
<button
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
Cancel
</button>
</div>
{{ render_partial('dashboard/http_functions/header.html', title='New HTTP function', user_id=user_id, show_name=False,
show_refresh=False, show_logs=False,
show_client=False, show_link=False)
}}
{{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info,

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

@@ -1,9 +1,14 @@
<div class="flex items-center" data-id="51">
<h1 class="font-semibold text-lg md:text-2xl" data-id="52">HTTP functions</h1>
<h1 class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">HTTP functions</h1>
<button
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
class="bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
hx-get="{{ url_for('get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML">
Add Function
<span class="sr-only" data-id="4">Bold</span>
<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" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg>
<span class="ml-1">Add Function</span>
</button>
</div>
<div class="border shadow-sm rounded-lg" data-id="54">
@@ -11,11 +16,11 @@
<table class="w-full caption-bottom text-sm" data-id="55">
<thead class="[&amp;_tr]:border-b" data-id="56">
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="57">
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 max-w-[150px]"
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800"
data-id="59">Name</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 hidden md:table-cell"
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800 hidden md:table-cell"
data-id="60">URL</th>
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0"
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800"
data-id="61">Actions</th>
</tr>
</thead>
@@ -23,9 +28,9 @@
{% for function in http_functions %}
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="63">
<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium flex items-center">
<span class="text-lg">{{ function.name }}</span>
<span class="text-gray-800 text-base text-md">{{ function.name }}</span>
<span
class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full ml-1">
class="inline-flex items-center justify-center w-5 h-5 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full ml-1">
{{ function.invoked_count }}
</span>
{% if function.is_public %}
@@ -60,22 +65,21 @@
<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0" data-id="68">
<div class="flex gap-1">
<button
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
data-id="69" hx-get="{{ url_for('get_http_function_logs', name=function.name) }}"
hx-target="#container" hx-swap="innerHTML">
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
hx-get="{{ url_for('get_http_function_logs', name=function.name) }}"
hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
Logs
</button>
<button
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
data-id="69" hx-get="{{ url_for('get_http_function_edit_form', name=function.name) }}"
hx-target="#container" hx-swap="innerHTML">
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
hx-get="{{ url_for('get_http_function_edit_form', name=function.name) }}"
hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
Edit
</button>
<button
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
data-id="69"
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
hx-get="{{ url_for('client', user_id=function.user_id, function=function.name) }}"
hx-target="#container" hx-swap="innerHTML">
hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
Try
</button>
</div>