Skip to content

Commit

Permalink
Merge pull request #1 from Alexander-D-Karpov/dashboard-design
Browse files Browse the repository at this point in the history 
Improve dashboard design
  • Loading branch information
@Alexander-D-Karpov
Alexander-D-Karpov committed Jul 16, 2024
2 parents b2eacad + 8ab6dc8 commit c3bee12
Show file tree
Hide file tree
Showing 5 changed files with 290 additions and 235 deletions.
2 changes: 2 additions & 0 deletions internal/dashboard/handlers.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import (
"database/sql"
"html/template"
"log"
"math"
"net/http"
"os"
"strconv"
Expand Down Expand Up @@ -135,6 +136,7 @@ func getAllSites(db *sql.DB) ([]models.Site, error) {
if err := rows.Scan(&site.ID, &site.Name, &site.URL, &site.IsUp, &site.LastCheck); err != nil {
return nil, err
}
site.LastCheck = math.Round(site.LastCheck * 1000)
sites = append(sites, site)
}
return sites, nil
Expand Down
132 changes: 74 additions & 58 deletions internal/dashboard/templates/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,69 +4,85 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webring Dashboard</title>
<link rel="stylesheet" href="/static/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/dashboard.css">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css">
</head>
<body>
<header>
<h1>Webring Dashboard</h1>
<a href="/dashboard">
<h1>
<i class="ri-bubble-chart-fill"></i>
Webring Dashboard
</h1>
</a>
</header>
<main>
<section id="add-site">
<h2>Add New Site</h2>
<form action="/dashboard/add" method="POST" class="card">
<input type="number" name="id" placeholder="ID" required>
<input type="text" name="name" placeholder="Name" required>
<input type="url" name="url" placeholder="URL" required>
<button type="submit" class="btn btn-primary">Add Site</button>
</form>
</section>
<section id="site-list">
<h2>Site List</h2>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
<th>Status</th>
<th>Last Check</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{range .}}
<tr>
<td>{{.ID}}</td>
<td>{{.Name}}</td>
<td><a href="{{.URL}}" target="_blank">{{.URL}}</a></td>
<td>
{{if .IsUp}}
<span class="badge badge-success">Up</span>
{{else}}
<span class="badge badge-danger">Down</span>
{{end}}
</td>
<td>{{.LastCheck}}</td>
<td>
<div class="action-forms">
<form action="/dashboard/update/{{.ID}}" method="POST" class="inline-form update-form">
<input type="text" name="name" value="{{.Name}}" required>
<input type="url" name="url" value="{{.URL}}" required>
<button type="submit" class="btn btn-secondary">Update</button>
</form>
<form action="/dashboard/remove/{{.ID}}" method="POST" class="inline-form remove-form">
<button type="submit" class="btn btn-danger">Remove</button>
</form>
</div>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</section>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
<th>Status</th>
<th>Ping</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="id" placeholder="ID" form="form-new" required></td>
<td><input type="text" name="name" placeholder="Name" form="form-new" required></td>
<td><input type="url" name="url" placeholder="URL" form="form-new" required></td>
<td></td>
<td></td>
<td>
<button type="submit" form="form-new">
<i class="ri-check-line"></i>
</button>
<form action="/dashboard/add" method="POST" style="display: none" id="form-new"></form>
</td>
</tr>
{{range .}}
<tr>
<td>{{.ID}}</td>
<td><input type="text" name="name" value="{{.Name}}" form="form-{{.ID}}" required></td>
<td>
<div class="cell">
<input type="url" name="url" value="{{.URL}}" form="form-{{.ID}}" required>
<a href="{{.URL}}" target="_blank">
<i class="ri-arrow-right-up-line"></i>
</a>
</div>
</td>
<td>
{{if .IsUp}}
<span class="badge badge-success">Up</span>
{{else}}
<span class="badge badge-danger">Down</span>
{{end}}
</td>
<td>{{.LastCheck}}</td>
<td>
<div class="cell">
<button type="submit" form="form-{{.ID}}">
<i class="ri-check-line"></i>
</button>
<form action="/dashboard/update/{{.ID}}" method="POST" id="form-{{.ID}}"></form>
<form action="/dashboard/remove/{{.ID}}" method="POST" style="display: contents">
<button type="submit">
<i class="ri-delete-bin-line"></i>
</button>
</form>
</div>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</main>
</body>
</html>
147 changes: 147 additions & 0 deletions static/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
@import "/static/reset.css";

:root {
--color-primary-100: #dbeafe;
--color-primary-900: #1e3a8a;
--color-primary-950: #172554;

--color-gray-100: #f4f4f5;
--color-gray-400: #a1a1aa;
--color-gray-600: #52525b;
--color-gray-900: #18181b;
--color-gray-950: #09090b;

--color-green-100: #dcfce7;
--color-green-700: #15803d;

--color-red-100: #fee2e2;
--color-red-700: #b91c1c;

font-family: Inter, sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
font-weight: 500;
}

@supports (font-variation-settings: normal) {
:root { font-family: InterVariable, sans-serif; }
}

body {
background-color: var(--color-gray-950);
color: var(--color-gray-100);
}

header {
background-color: var(--color-primary-950);
color: var(--color-primary-100);
padding: 1rem;
text-align: center;
}

header h1 {
font-weight: bold;
}

main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}

.table-responsive {
overflow-x: auto;
}

table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 4px;
overflow: hidden;
border: 1px var(--color-gray-900) solid;
}

th, td {
padding: .5rem 1rem;
text-align: left;
border-bottom: 1px solid var(--color-gray-900);
}

td {
border-right: 1px solid var(--color-gray-900);
}

td:last-child {
border-right: none;
}

th {
background-color: var(--color-primary-900);
color: var(--color-primary-100);
font-weight: 600;
text-transform: uppercase;
font-size: .875rem;
}

.cell {
width: 100%;
justify-content: stretch;
display: flex;
gap: .5rem;
}

tr:last-child td {
border-bottom: none;
}

.badge {
width: 100%;
display: flex;
justify-content: center;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
}

.badge-success {
background-color: var(--color-green-700);
color: var(--color-green-100);
}

.badge-danger {
background-color: var(--color-red-700);
color: var(--color-red-100);
}

input {
width: 100%;
min-width: 6rem;
border: none;
background: transparent;
border-radius: 4px;
font-size: 1rem;
}

input[type=number] {
width: 3rem;
min-width: 3rem;
}

input[type=url] {
min-width: 10rem;
}

input:focus {
outline: none;
box-shadow: 0 0 0 1px var(--color-gray-400), 0 0 0 4px var(--color-gray-600);
}

input::placeholder {
color: var(--color-gray-600);
}

form {
display: none;
}
67 changes: 67 additions & 0 deletions static/reset.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
*, ::before, ::after {
box-sizing: border-box;
}

html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}

body {
margin: 0;
line-height: inherit;
}

a {
color: inherit;
text-decoration: inherit;
}

h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}

button, input, optgroup, select, textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
border: none;
}

button, [role=button] {
cursor: pointer;
}

button, select {
text-transform: none;
}

b, strong {
font-weight: bolder;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
margin: 0;
}
Loading

0 comments on commit c3bee12

Please sign in to comment.