k-space/wildflock
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Activity

add card-style template for mobile view
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Sergo 2024-02-04 01:48:14 +02:00
parent 1ca64bc925
commit c6e74cca90
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/index.js
View File

@ -1,8 +1,10 @@
function renderAliases(data) { function renderAliases(data) {
const dataContainer = document.getElementById('container'); const dataContainer = document.getElementById('container');
const template = Handlebars.compile(okHandlebarsTemplate); const template = window.innerWidth > 768 ? Handlebars.compile(defaultTemplate) : Handlebars.compile(responsiveCardTemplate);
const html = template({ const html = template({
data: data.sort((a, b) => new Date(a.created) - new Date(b.created)) data: data
.sort((a, b) => new Date(a.created) - new Date(b.created))
.map(alias => ({ ...alias, created: new Date(alias.created).toLocaleString() }))
}); });
dataContainer.innerHTML = html; dataContainer.innerHTML = html;
@ -38,7 +40,7 @@ function copyToClipboard(text) {
navigator.clipboard.writeText(text) navigator.clipboard.writeText(text)
} }
const okHandlebarsTemplate = ` const defaultTemplate = `
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -64,6 +66,29 @@ const okHandlebarsTemplate = `
<input type="text" id="tags" placeholder="Add tags (optional)"> <input type="text" id="tags" placeholder="Add tags (optional)">
<div class="btn btn-primary" onclick="createAlias()">Create alias</div class="btn btn-primary"> <div class="btn btn-primary" onclick="createAlias()">Create alias</div class="btn btn-primary">
` `
// Responsive card template for mobile
const responsiveCardTemplate = `
{{#each data}}
<div class="card">
<div class="card-body">
<h5 class="card-title
{{#if tags.length}}
text-primary
{{/if}}
">
{{#each tags}}
<span class="badge bg-secondary">{{this}}</span>
{{/each}}
</h5>
<h5 class="card-title" onclick="copyToClipboard('{{address}}')" style="cursor: pointer;">{{address}}</h5>
<p class="card-text">{{created}}</p>
<div onclick="deleteAlias('{{id}}')" class="btn btn-sm btn-danger {{#unless id}}disabled{{/unless}}">Delete</div>
</div>
</div>
{{/each}}
<input type="text" id="tags" placeholder="Add tags (optional)">
<button class="btn btn-primary btn-sm" onclick="createAlias()">Create alias</button">
`
fetch('/aliases').then(async res => { fetch('/aliases').then(async res => {
const dataContainer = document.getElementById('container'); const dataContainer = document.getElementById('container');