UX: allow horizontal overflow scroll, fix button (#95)

This commit is contained in:
Kris 2021-02-18 04:36:37 -05:00 committed by GitHub
parent 5e24556b24
commit 3151fde1e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 32 deletions

View File

@ -1,37 +1,43 @@
<div class="result-info"> <article>
{{d-button action=(action "downloadResultJson") icon="download" label="explorer.download_json" group=group}} <header class="result-header">
{{d-button action=(action "downloadResultCsv") icon="download" label="explorer.download_csv" group=group}} <div class="result-info">
</div> {{d-button action=(action "downloadResultJson") icon="download" label="explorer.download_json" group=group}}
{{d-button action=(action "downloadResultCsv") icon="download" label="explorer.download_csv" group=group}}
</div>
<div class="result-about"> <div class="result-about">
{{resultCount}} {{resultCount}}
{{duration}} {{duration}}
</div> </div>
<br> <br>
{{~#if hasExplain}} {{~#if hasExplain}}
<pre class="result-explain"><code> <pre class="result-explain"><code>
{{~content.explain}} {{~content.explain}}
</code></pre> </code></pre>
{{~/if}} {{~/if}}
<br> <br>
</header>
<table> <section>
<thead> <table>
<tr class="headers"> <thead>
{{#each columnDispNames as |col|}} <tr class="headers">
<th>{{col}}</th> {{#each columnDispNames as |col|}}
{{/each}} <th>{{col}}</th>
</tr> {{/each}}
</thead> </tr>
<tbody> </thead>
{{#each rows as |row|}} <tbody>
{{query-row-content {{#each rows as |row|}}
row=row {{query-row-content
fallbackTemplate=fallbackTemplate row=row
columnTemplates=columnTemplates}} fallbackTemplate=fallbackTemplate
{{/each}} columnTemplates=columnTemplates}}
</tbody> {{/each}}
</table> </tbody>
</table>
</section>
</article>

View File

@ -280,7 +280,19 @@ table.group-reports {
margin: 10px 0; margin: 10px 0;
} }
.query-create {
display: flex;
input {
margin-right: 0.5em;
margin-bottom: 0;
}
}
.query-results { .query-results {
section {
width: 100%;
overflow-x: auto;
}
table { table {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;