danvics/watchyourlan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjusted HTML files to make them responsive (issue #51)

Browse source 
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").
This commit is contained in:
Adam Davidson 2024-01-03 17:22:28 +00:00
parent 184440d5a7
commit 564ac35aa3
10 changed files with 104 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
internal/web/templates/auth.html
View file

@ -1,9 +1,9 @@
{{ define "auth" }}
<body>
<div class="container mt-5">
<div class="container-lg mt-5">
<div class="row">
<div class="col">
<div class="col-lg-6">
<table class="table">
<form action="/auth_save/" method="post">
<tr>
@ -37,7 +37,7 @@
</form>
</table>
</div>
<div class="col">
<div class="col-lg-6">
<div class="alert alert-info" role="alert">
<p>● <b>WARNING!</b> Authentication is only safe when used over <b>https</b> and with a strong password.</p>
<p>● <b>Expire after</b> - when user session expires. Can be set with suffixes <b>m</b>(minute), <b>h</b>(hour), <b>d</b>(day) or <b>M</b>(month). Default: <b>7d</b>.</p>
@ -50,4 +50,4 @@
{{ template "footer" }}
{{ end }}
{{ end }}

8
internal/web/templates/config.html
View file

@ -1,9 +1,9 @@
{{ define "config" }}
<body>
<div class="container mt-5">
<div class="container-lg mt-5">
<div class="row">
<div class="col">
<div class="col-lg-6">
<table class="table">
<form action="/save_config/" method="post">
<tr>
@ -98,7 +98,7 @@
</tr>
</table>
</div>
<div class="col">
<div class="col-lg-6">
<p>Current version: {{ .Version }}</p>
<div class="alert alert-info" role="alert">
<p>● There can be one or more <b>Interfaces</b>, space separated</p>
@ -120,4 +120,4 @@
{{ template "footer" }}
{{ end }}
{{ end }}

3
internal/web/templates/footer.html
View file

@ -1,4 +1,5 @@
{{ define "footer"}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
{{ end }}
{{ end }}

29
internal/web/templates/header.html
View file

@ -3,6 +3,7 @@
<head>
<title>Watch Your LAN</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Favicon-->
<link href="data:image/x-icon;base64,{{ .Config.Icon }}" rel="icon" type="image/x-icon" />
{{ if eq .Config.NodePath "" }}
@ -17,8 +18,12 @@
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="container">
<ul class="navbar-nav">
<div class="container-lg">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="/">Home</a>
</li>
@ -43,18 +48,12 @@
</li>
{{ end }}
</ul>
<ul class="nav navbar-nav navbar-right">
<form action="/search_hosts/" method="post">
<li class="input-group nav-item">
<input name="search" type="text" class="form-control text-dark" placeholder="Search">
<button type="submit" class="btn btn-primary">Search</button>
</li>
</form>
&nbsp;&nbsp;&nbsp;
<li class="nav-item"><a class="nav-link active" target="_blank" href="https://github.com/aceberg/WatchYourLAN">
<h3><i class="bi bi-github"></i></h3>
</a></li>
</ul>
<form action="/search_hosts/" method="post" class="d-flex mb-0">
<input name="search" type="text" class="form-control text-dark me-2" placeholder="Search">
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<a class="ms-auto" target="_blank" href="https://github.com/aceberg/WatchYourLAN"><i class="bi bi-github" style="font-size: 2rem;"></i></a>
</div>
</nav>
{{ end }}
{{ end }}

18
internal/web/templates/history.html
View file

@ -2,7 +2,7 @@
<!--Auto refresh (seconds)-->
<meta http-equiv="refresh" content="{{ .Config.Timeout }}">
<body>
<div class="container mt-3">
<div class="container-lg mt-3 table-responsive">
<table class="table table-striped">
<tr>
<th>Name</th>
@ -15,19 +15,19 @@
</tr>
{{ range .Hist }}
<tr>
<td>{{ .Name }}</td>
<td><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td><a href="/host?id={{ .Host }}">{{ .Mac }}</a></td>
<td>{{ .Hw }}</td>
<td>{{ .Date }}</td>
<td>
<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>
<td class="align-middle">
{{ if eq .State 1 }}
<i class="bi bi-circle-fill text-success"></i>
{{ else }}
@ -40,4 +40,4 @@
</div>
{{ template "footer" }}
{{ end }}
{{ end }}

68
internal/web/templates/host.html
View file

@ -1,38 +1,38 @@
{{ define "host" }}
<body>
<div class="container mt-5">
<div class="container-lg mt-5">
<div class="row">
<div class="col">
<div class="col table-responsive">
<table class="table">
{{ range .Hosts }}
<tr>
<td>ID</td>
<td>{{ .ID }}</td>
<td class="align-middle">ID</td>
<td class="align-middle">{{ .ID }}</td>
</tr>
<tr>
<td>Name</td>
<td>{{ .Name }}</td>
<td class="align-middle">Name</td>
<td class="align-middle">{{ .Name }}</td>
</tr>
<tr>
<td>IP</td>
<td><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td class="align-middle">IP</td>
<td class="align-middle"><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
</tr>
<tr>
<td>Mac</td>
<td>{{ .Mac }}</td>
<td class="align-middle">Mac</td>
<td class="align-middle">{{ .Mac }}</td>
</tr>
<tr>
<td>Hw</td>
<td>{{ .Hw }}</td>
<td class="align-middle">Hw</td>
<td class="align-middle">{{ .Hw }}</td>
</tr>
<tr>
<td>Date</td>
<td>{{ .Date }}</td>
<td class="align-middle">Date</td>
<td class="align-middle">{{ .Date }}</td>
</tr>
<tr>
<td>Known</td>
<td>
<td class="align-middle">Known</td>
<td class="align-middle">
{{ if eq .Known 1 }}
Yes
{{ else }}
@ -41,8 +41,8 @@
</td>
</tr>
<tr>
<td>Now</td>
<td>
<td class="align-middle">Now</td>
<td class="align-middle">
{{ if eq .Now 1 }}
Online
{{ else }}
@ -51,12 +51,12 @@
</td>
</tr>
<tr>
<td>
<td class="align-middle">
<form action="/del_host/" method="post">
<input name="id" type="hidden" class="form-control" value="{{ .ID }}"><button type="submit" class="btn btn-danger">Delete host</button>
</form>
</td>
<td></td>
<td class="align-middle"></td>
</tr>
{{ end }}
</table>
@ -64,8 +64,8 @@
<div class="col">
<table class="table">
<tr>
<td>Domain name</td>
<td>
<td class="align-middle">Domain name</td>
<td class="align-middle">
{{ range .Themes }}
<a href="http://{{ . }}" target="_blank">{{ . }}</a>
{{ end }}
@ -81,16 +81,16 @@
<form action="/port_scan/" method="post">
<input name="ip" type="hidden" class="form-control" value="{{ .IP }}">
<tr>
<td>Start port</td>
<td><input name="begin" type="text" class="form-control" placeholder="1"></td>
<td class="align-middle">Start port</td>
<td class="align-middle"><input name="begin" type="text" class="form-control" placeholder="1"></td>
</tr>
<tr>
<td>End port</td>
<td><input name="end" type="text" class="form-control" placeholder="65535"></td>
<td class="align-middle">End port</td>
<td class="align-middle"><input name="end" type="text" class="form-control" placeholder="65535"></td>
</tr>
<tr>
<td><button type="submit" class="btn btn-success">Scan host</button></td>
<td></td>
<td class="align-middle"><button type="submit" class="btn btn-success">Scan host</button></td>
<td class="align-middle"></td>
</tr>
</form>
</table>
@ -109,17 +109,17 @@
</tr>
{{ range .Hist }}
<tr>
<td>{{ .Name }}</td>
<td><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td>{{ .Date }}</td>
<td>
<td class="align-middle">{{ .Name }}</td>
<td class="align-middle"><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td class="align-middle">{{ .Date }}</td>
<td class="align-middle">
{{ if eq .Known 1 }}
Yes
{{ else }}
No
{{ end }}
</td>
<td>
<td class="align-middle">
{{ if eq .State 1 }}
<i class="bi bi-circle-fill text-success"></i>
{{ else }}
@ -134,4 +134,4 @@
{{ template "footer" }}
{{ end }}
{{ end }}

42
internal/web/templates/index.html
View file

@ -3,10 +3,13 @@
<meta http-equiv="refresh" content="{{ .Config.Timeout }}">
</head>
<body>
<div class="container mt-3">
<div class="container-lg mt-3">
<div class="row">
<div class="col">
<h2>Online</h2>
<p>Scanning interfaces: {{ .Config.Iface }}</p>
<table class="table table-striped">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>IP</th>
@ -17,11 +20,11 @@
{{ range .Hosts }}
{{ if eq .Now 1 }}
<tr>
<td>{{ .Name }}</td>
<td><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td><a href="/host?id={{ .ID }}">{{ .Mac }}</a></td>
<td>{{ .Hw }}</td>
<td>
<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={{ .ID }}">{{ .Mac }}</a></td>
<td class="align-middle">{{ .Hw }}</td>
<td class="align-middle">
{{ if eq .Known 1 }}
<button type="button" class="btn btn-success" disabled>Yes</button>
{{ else }}
@ -31,9 +34,11 @@
</tr>
{{ end }}
{{ end }}
</table>
</table>
</div>
<h2>Log</h2>
<table class="table table-striped">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>IP</th>
@ -46,14 +51,14 @@
<form action="/update_host/" method="post">
<input name="id" type="hidden" class="form-control" value="{{ .ID }}">
<tr>
<td>
<td class="align-middle">
<input name="name" type="text" class="form-control text-dark" value="{{ .Name }}">
</td>
<td><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td><a href="/host?id={{ .ID }}">{{ .Mac }}</a></td>
<td>{{ .Hw }}</td>
<td>{{ .Date }}</td>
<td>
<td class="align-middle"><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td class="align-middle"><a href="/host?id={{ .ID }}">{{ .Mac }}</a></td>
<td class="align-middle">{{ .Hw }}</td>
<td class="align-middle">{{ .Date }}</td>
<td class="align-middle">
{{ if eq .Known 1 }}
<button value="off" name="known" type="submit" class="btn btn-success">Yes</button>
{{ else }}
@ -63,8 +68,11 @@
</tr>
</form>
{{ end }}
</table>
</table>
</div>
</div>
</div>
</div>
{{ template "footer" }}
{{ end }}
{{ end }}

16
internal/web/templates/line.html
View file

@ -1,6 +1,6 @@
{{ define "line"}}
<body>
<div class="container mt-3">
<div class="container-lg mt-3 table-responsive">
<table class="table table-striped">
<tr>
<form action="/sort_hosts/" method="post">
@ -59,14 +59,14 @@
<form action="/update_host/" method="post">
<input name="id" type="hidden" class="form-control" value="{{ .ID }}">
<tr>
<td>
<td class="align-middle">
<input name="name" type="text" class="form-control text-dark" value="{{ .Name }}">
</td>
<td><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td><a href="/host?id={{ .ID }}">{{ .Mac }}</a></td>
<td>{{ .Hw }}</td>
<td>{{ .Date }}</td>
<td>
<td class="align-middle"><a href="http://{{ .IP }}" target="_blank">{{ .IP }}</a></td>
<td class="align-middle"><a href="/host?id={{ .ID }}">{{ .Mac }}</a></td>
<td class="align-middle">{{ .Hw }}</td>
<td class="align-middle">{{ .Date }}</td>
<td class="align-middle">
{{ if eq .Known 1 }}
<button value="off" name="known" type="submit" class="btn btn-success">Yes</button>
{{ else }}
@ -80,4 +80,4 @@
</div>
{{ template "footer" }}
{{ end }}
{{ end }}

4
internal/web/templates/login.html
View file

@ -1,7 +1,7 @@
{{ define "login" }}
</head>
<body>
<div class="container">
<div class="container-lg">
<br>
<br>
<div class="row text-center">
@ -16,4 +16,4 @@
</div>
{{ template "footer" }}
{{ end }}
{{ end }}

4
internal/web/templates/port.html
View file

@ -1,7 +1,7 @@
{{ define "port" }}
<body>
<div class="container mt-5">
<div class="container-lg mt-5">
<div class="row">
<div class="col">
<p>Open TCP ports:</p>
@ -15,4 +15,4 @@
{{ template "footer" }}
{{ end }}
{{ end }}