Add space between buttons
This commit is contained in:
parent
31800360d2
commit
717c4499ba
|
|
@ -40,52 +40,52 @@
|
|||
|
||||
<div class="container-fluid d-flex justify-content-center align-items-center min-vh-100">
|
||||
<div>
|
||||
<table class="table table-borderless table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<% for (let c = 0; c < numCols; c++) { %>
|
||||
<th class="text-left">
|
||||
<h3><%= cols[c] || '' %></h3>
|
||||
</th>
|
||||
<% } %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% chunks.forEach((row) => { %>
|
||||
<tr>
|
||||
<% for (let c = 0; c < numCols; c++) {
|
||||
const cell = row[c] || {};
|
||||
const isBlank = Object.keys(cell).length === 0;
|
||||
%>
|
||||
<td class="text-left">
|
||||
<% if (isBlank) { %>
|
||||
<!-- blank space -->
|
||||
<% } else {
|
||||
const ctx = cell.context || {};
|
||||
<table class="table table-borderless table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<% for (let c = 0; c < numCols; c++) { %>
|
||||
<th class="text-left p-2">
|
||||
<h3><%= cols[c] || '' %></h3>
|
||||
</th>
|
||||
<% } %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% chunks.forEach((row) => { %>
|
||||
<tr>
|
||||
<% for (let c = 0; c < numCols; c++) {
|
||||
const cell = row[c] || {};
|
||||
const isBlank = Object.keys(cell).length === 0;
|
||||
%>
|
||||
<td class="text-left p-2">
|
||||
<% if (isBlank) { %>
|
||||
<!-- blank space -->
|
||||
<% } else {
|
||||
const ctx = cell.context || {};
|
||||
%>
|
||||
<button
|
||||
class="btn <%= cell.btnClass || 'btn-secondary' %> mb-1 w-100 <%= cell.doubleHeight ? 'btn-tall' : 'btn-short' %> fw-bold fs-4 <%= cell.faIcon ? 'd-flex justify-content-center align-items-center' : '' %>"
|
||||
name="<%= cell.name || '' %>"
|
||||
onclick="triggerAnnouncement(this)"
|
||||
<% if (ctx.context) { %> data-context="<%= ctx.context %>" <% } %>
|
||||
<% if (ctx.timeout) { %> data-timeout="<%= ctx.timeout %>" <% } %>
|
||||
<% if (ctx.cid) { %> data-cid="<%= ctx.cid %>" <% } %>
|
||||
<% if (ctx.dial) { %> data-dial="<%= ctx.dial %>" <% } %>
|
||||
>
|
||||
<% if (cell.faIcon) { %>
|
||||
<i class="<%= cell.faIcon %> me-2" <% if (cell.faStyle) { %> style="<%= cell.faStyle %>" <% } %>></i>
|
||||
<span><%= cell.text || '' %></span>
|
||||
<% } else { %>
|
||||
<%= cell.text || '' %>
|
||||
<% } %>
|
||||
</button>
|
||||
<% } %>
|
||||
</td>
|
||||
<% } %>
|
||||
</tr>
|
||||
<% }); %>
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
class="btn <%= cell.btnClass || 'btn-secondary' %> mb-1 w-100 <%= cell.doubleHeight ? 'btn-tall' : 'btn-short' %> fw-bold fs-4 <%= cell.faIcon ? 'd-flex justify-content-center align-items-center' : '' %>"
|
||||
name="<%= cell.name || '' %>"
|
||||
onclick="triggerAnnouncement(this)"
|
||||
<% if (ctx.context) { %> data-context="<%= ctx.context %>" <% } %>
|
||||
<% if (ctx.timeout) { %> data-timeout="<%= ctx.timeout %>" <% } %>
|
||||
<% if (ctx.cid) { %> data-cid="<%= ctx.cid %>" <% } %>
|
||||
<% if (ctx.dial) { %> data-dial="<%= ctx.dial %>" <% } %>
|
||||
>
|
||||
<% if (cell.faIcon) { %>
|
||||
<i class="<%= cell.faIcon %> me-2" <% if (cell.faStyle) { %> style="<%= cell.faStyle %>" <% } %>></i>
|
||||
<span><%= cell.text || '' %></span>
|
||||
<% } else { %>
|
||||
<%= cell.text || '' %>
|
||||
<% } %>
|
||||
</button>
|
||||
<% } %>
|
||||
</td>
|
||||
<% } %>
|
||||
</tr>
|
||||
<% }); %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue