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").
43 lines
1.7 KiB
HTML
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 }}
|