mohsen_hassani/LedgerLine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group frontend panels into explicit row containers

Browse Source 
Wrap Submit and Load burst in one full-width .row and Result, Chaos and
Service health in a second. Each .row splits its width evenly between its
panels (gap subtracted first) and stacks below 900px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Movses Aslanyan
2026-10-09 15:46:40 +03:30
co-authored by Claude Opus 5.5
parent 9f0d19c08f
commit 79a41bf869
2 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/gateway/static/index.html
+61 -57
View File
@@ -12,67 +12,71 @@
</header> </header>
<main> <main>
<section id="submit-panel"> <div class="row">
<h2>Submit a transaction</h2> <section id="submit-panel">
<form id="tx-form"> <h2>Submit a transaction</h2>
<label>Account <form id="tx-form">
<select id="account-select"></select> <label>Account
<select id="account-select"></select>
</label>
<label>Amount (minor units)
<input type="number" id="amount-input" value="1000" min="0">
</label>
<label>Merchant
<input type="text" id="merchant-input" value="Corner Store">
</label>
<fieldset>
<legend>Kind</legend>
<label><input type="radio" name="kind" value="deposit" checked> deposit</label>
<label><input type="radio" name="kind" value="withdrawal"> withdrawal</label>
<label><input type="radio" name="kind" value="purchase"> purchase</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</section>
<section id="load-panel">
<h2>Load burst</h2>
<label>N
<select id="burst-n">
<option value="10">10</option>
<option value="50">50</option>
<option value="200">200</option>
</select>
</label> </label>
<label>Amount (minor units) <button id="burst-button">Fire burst</button>
<input type="number" id="amount-input" value="1000" min="0"> <table id="burst-table">
</label> <thead>
<label>Merchant <tr><th>count</th><th>success</th><th>errors</th><th>min</th><th>mean</th><th>p50</th><th>p95</th><th>max</th></tr>
<input type="text" id="merchant-input" value="Corner Store"> </thead>
</label> <tbody><tr><td colspan="8">no burst run yet</td></tr></tbody>
<fieldset> </table>
<legend>Kind</legend> </section>
<label><input type="radio" name="kind" value="deposit" checked> deposit</label> </div>
<label><input type="radio" name="kind" value="withdrawal"> withdrawal</label>
<label><input type="radio" name="kind" value="purchase"> purchase</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</section>
<section id="load-panel"> <div class="row">
<h2>Load burst</h2> <section id="result-panel">
<label>N <h2>Result</h2>
<select id="burst-n"> <p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p>
<option value="10">10</option> <pre id="result-json">(nothing yet)</pre>
<option value="50">50</option> </section>
<option value="200">200</option>
</select>
</label>
<button id="burst-button">Fire burst</button>
<table id="burst-table">
<thead>
<tr><th>count</th><th>success</th><th>errors</th><th>min</th><th>mean</th><th>p50</th><th>p95</th><th>max</th></tr>
</thead>
<tbody><tr><td colspan="8">no burst run yet</td></tr></tbody>
</table>
</section>
<section id="result-panel"> <section id="chaos-panel">
<h2>Result</h2> <h2>Chaos</h2>
<p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p> <div id="chaos-flags"></div>
<pre id="result-json">(nothing yet)</pre> <div id="chaos-profiles">
</section> <button data-profile="clean">clean</button>
<button data-profile="light">light</button>
<button data-profile="nightmare">nightmare</button>
<button data-profile="random">random</button>
</div>
</section>
<section id="chaos-panel"> <section id="health-panel">
<h2>Chaos</h2> <h2>Service health</h2>
<div id="chaos-flags"></div> <div id="health-strip"></div>
<div id="chaos-profiles"> </section>
<button data-profile="clean">clean</button> </div>
<button data-profile="light">light</button>
<button data-profile="nightmare">nightmare</button>
<button data-profile="random">random</button>
</div>
</section>
<section id="health-panel">
<h2>Service health</h2>
<div id="health-strip"></div>
</section>
</main> </main>
<script src="/static/app.js"></script> <script src="/static/app.js"></script>
services/gateway/static/style.css
+13 -17
View File
@@ -39,31 +39,27 @@ header h1 {
font-size: 0.85rem; font-size: 0.85rem;
} }
/* 6-column grid: row 1 panels span 3 (half), row 2 panels span 2 (third).
The grid gap is subtracted before dividing, so with gap g and width W
a half panel is (W - g) / 2 and a third panel is (W - 2g) / 3. */
main { main {
display: grid; display: flex;
grid-template-columns: repeat(6, minmax(0, 1fr)); flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
main > section { /* Each row is full width and splits it evenly between its panels. The gap
grid-column: span 2; is subtracted before dividing, so with gap g and width W two panels are
min-width: 0; (W - g) / 2 each and three panels are (W - 2g) / 3 each. */
} .row {
display: grid;
#submit-panel, grid-auto-flow: column;
#load-panel { grid-auto-columns: minmax(0, 1fr);
grid-column: span 3; gap: 1.5rem;
width: 100%;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
main > section, .row {
#submit-panel, grid-auto-flow: row;
#load-panel {
grid-column: 1 / -1;
} }
} }