mike
/
chronoscope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scroll table on small screen sizes

This commit is contained in:
Mike Cifelli 2024-06-01 09:53:32 -04:00
parent 4f5b886e9e
commit 7e218dfb5d
Signed by: mike
GPG Key ID: 6B08C6BE47D08E4C
1 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
lib/chronoscope_web/live/index_live.html.heex
View File

@ -1,77 +1,79 @@
<table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left"> <div class="overflow-x-auto">
<thead> <table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
<tr> <thead>
<th scope="col" class="py-3 px-6 whitespace-nowrap"> <tr>
Host <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Host
<th scope="col" class="py-3 px-6 whitespace-nowrap"> </th>
Status <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Status
<th scope="col" class="py-3 px-6 whitespace-nowrap"> </th>
Algorithm <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Algorithm
<th scope="col" class="py-3 px-6 whitespace-nowrap"> </th>
Cookies <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Cookies
<th scope="col" class="py-3 px-6 whitespace-nowrap"> </th>
Cookie Length <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Cookie Length
<th scope="col" class="py-3 px-6 whitespace-nowrap"> </th>
Certificate Expiration <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Certificate Expiration
<th scope="col" class="py-3 px-6 whitespace-nowrap"> </th>
Last Check <th scope="col" class="py-3 px-6 whitespace-nowrap">
</th> Last Check
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700"> <tbody>
<% {status, response} = server.key_establishment_response %> <tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700">
<% {status, response} = server.key_establishment_response %>
<%= if (status == :ok) do %> <%= if (status == :ok) do %>
<td class="py-4 px-6 whitespace-nowrap"> <td class="py-4 px-6 whitespace-nowrap">
<%= server.server.host %>:<%= server.server.port %> <%= server.server.host %>:<%= server.server.port %>
</td> </td>
<td class="py-4 px-6 whitespace-nowrap"> <td class="py-4 px-6 whitespace-nowrap">
<%= status %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= Enum.at(response.aead_algorithms, 0) %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= length(response.cookies) %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= response.cookie_length %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= response.cert_expiration %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= server.last_key_establishment %>
</td>
<% else %>
<td class="py-4 px-6 whitespace-nowrap">
<%= server.server.host %>:<%= server.server.port %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<span class="group relative">
<%= status %> <%= status %>
<span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100"> </td>
<%= response %> <td class="py-4 px-6 whitespace-nowrap">
</span> <%= Enum.at(response.aead_algorithms, 0) %>
</span> </td>
</td> <td class="py-4 px-6 whitespace-nowrap">
<td class="py-4 px-6 whitespace-nowrap"> - </td> <%= length(response.cookies) %>
<td class="py-4 px-6 whitespace-nowrap"> - </td> </td>
<td class="py-4 px-6 whitespace-nowrap"> - </td> <td class="py-4 px-6 whitespace-nowrap">
<td class="py-4 px-6 whitespace-nowrap"> - </td> <%= response.cookie_length %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= response.cert_expiration %>
</td>
<td class="py-4 px-6 whitespace-nowrap">
<%= server.last_key_establishment %>
</td>
<td class="py-4 px-6 whitespace-nowrap"> <% else %>
<%= server.last_key_establishment %> <td class="py-4 px-6 whitespace-nowrap">
</td> <%= server.server.host %>:<%= server.server.port %>
<% end %> </td>
</tr> <td class="py-4 px-6 whitespace-nowrap">
</tbody> <span class="group relative">
</table> <%= status %>
<span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
<%= response %>
</span>
</span>
</td>
<td class="py-4 px-6 whitespace-nowrap"> - </td>
<td class="py-4 px-6 whitespace-nowrap"> - </td>
<td class="py-4 px-6 whitespace-nowrap"> - </td>
<td class="py-4 px-6 whitespace-nowrap"> - </td>
<td class="py-4 px-6 whitespace-nowrap">
<%= server.last_key_establishment %>
</td>
<% end %>
</tr>
</tbody>
</table>
</div>