watchyourlan/internal/web/templates/history.html
Adam Davidson 564ac35aa3 Adjusted HTML files to make them responsive (issue #51)
HTML adjusted to make them responsive and better sized when viewed on a mobile device. There should be no change when viewing these on tablets large screens.

Changes include:
- Making containers 100% wide on screens below the Bootstrap "lg" breakpoint. This removes the left and right outer margins, making the most of available space on small screens.
- Making the navigation menu collapse on small screens, to be replaced by a "hamburger" icon that then expands to show the menu when clicked.
- Making all tables responsive so that they can be horizontally scrolled on small screens.
- Table items now centrally align vertically on the table rows (using the "align-middle" class").
2024-01-03 17:22:28 +00:00

43 lines
1.7 KiB
HTML

{{ define "history"}}
<!--Auto refresh (seconds)-->
<meta http-equiv="refresh" content="{{ .Config.Timeout }}">
<body>
<div class="container-lg mt-3 table-responsive">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>IP</th>
<th>Mac</th>
<th>Hardware</th>
<th>Time</th>
<th>Known</th>
<th>State</th>
</tr>
{{ range .Hist }}
<tr>
<td class="align-middle">{{ .Name }}</td>
<td class="align-middle"><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td class="align-middle"><a href="/host?id={{ .Host }}">{{ .Mac }}</a></td>
<td class="align-middle">{{ .Hw }}</td>
<td class="align-middle">{{ .Date }}</td>
<td class="align-middle">
{{ if eq .Known 1 }}
Yes
{{ else }}
No
{{ end }}
</td>
<td class="align-middle">
{{ if eq .State 1 }}
<i class="bi bi-circle-fill text-success"></i>
{{ else }}
<i class="bi bi-circle-fill text-danger"></i>
{{ end }}
</td>
</tr>
{{ end }}
</table>
</div>
{{ template "footer" }}
{{ end }}