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

Make endpoints column filter responsive

Browse Source
This commit is contained in:
Peter Stockings
2024-11-10 18:15:33 +11:00
parent 285175c29d
commit 8b248bad17
1 changed files with 60 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
templates/partials/endpoints_table.html
View File

@@ -1,58 +1,87 @@
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<!-- Column Toggle Checkboxes --> <!-- Column Toggle Checkboxes -->
<div class="mb-4 flex flex-wrap items-center space-x-4"> <div class="mb-4 flex flex-col sm:flex-row flex-wrap items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-6"
<label class="inline-flex items-center"> _="
<input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-endpoint" on load
hx-trigger="change" _=" let cols = [
on change if me.checked then { class: 'col-endpoint', checkbox: 'toggle-endpoint' },
{ class: 'col-url', checkbox: 'toggle-url' },
{ class: 'col-methods', checkbox: 'toggle-methods' },
{ class: 'col-view_func', checkbox: 'toggle-view_func' },
{ class: 'col-description', checkbox: 'toggle-description' }
]
for each col in cols
let state = localStorage[col.class]
if state is 'hidden'
add .hidden to .{col.class}
set checkbox {col.checkbox} to false
else
remove .hidden from .{col.class}
set checkbox {col.checkbox} to true
">
<label class="inline-flex items-center space-x-2" for="toggle-endpoint">
<input id="toggle-endpoint" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
on change
if me.checked then
remove .hidden from .col-endpoint remove .hidden from .col-endpoint
set localStorage['col-endpoint'] to 'visible'
else else
add .hidden to .col-endpoint add .hidden to .col-endpoint
"> set localStorage['col-endpoint'] to 'hidden'
<span class="ml-2 text-gray-700">Endpoint</span> ">
<span class="text-gray-700">Endpoint</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center space-x-2" for="toggle-url">
<input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-url" <input id="toggle-url" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
hx-trigger="change" _=" on change
on change if me.checked then if me.checked then
remove .hidden from .col-url remove .hidden from .col-url
set localStorage['col-url'] to 'visible'
else else
add .hidden to .col-url add .hidden to .col-url
"> set localStorage['col-url'] to 'hidden'
<span class="ml-2 text-gray-700">URL</span> ">
<span class="text-gray-700">URL</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center space-x-2" for="toggle-methods">
<input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-methods" <input id="toggle-methods" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
hx-trigger="change" _=" on change
on change if me.checked then if me.checked then
remove .hidden from .col-methods remove .hidden from .col-methods
set localStorage['col-methods'] to 'visible'
else else
add .hidden to .col-methods add .hidden to .col-methods
"> set localStorage['col-methods'] to 'hidden'
<span class="ml-2 text-gray-700">Methods</span> ">
<span class="text-gray-700">Methods</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center space-x-2" for="toggle-view_func">
<input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-view_func" <input id="toggle-view_func" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
hx-trigger="change" _=" on change
on change if me.checked then if me.checked then
remove .hidden from .col-view_func remove .hidden from .col-view_func
set localStorage['col-view_func'] to 'visible'
else else
add .hidden to .col-view_func add .hidden to .col-view_func
"> set localStorage['col-view_func'] to 'hidden'
<span class="ml-2 text-gray-700">View Function</span> ">
<span class="text-gray-700">View Function</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center space-x-2" for="toggle-description">
<input type="checkbox" checked class="form-checkbox h-5 w-5 text-blue-600" hx-target=".col-description" <input id="toggle-description" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600" _="
hx-trigger="change" _=" on change
on change if me.checked then if me.checked then
remove .hidden from .col-description remove .hidden from .col-description
set localStorage['col-description'] to 'visible'
else else
add .hidden to .col-description add .hidden to .col-description
"> set localStorage['col-description'] to 'hidden'
<span class="ml-2 text-gray-700">Description</span> ">
<span class="text-gray-700">Description</span>
</label> </label>
</div> </div>
<!-- Endpoints Table --> <!-- Endpoints Table -->
<table class="min-w-full bg-white rounded-lg shadow"> <table class="min-w-full bg-white rounded-lg shadow">
<thead class="bg-gray-200"> <thead class="bg-gray-200">