Increase spacing on automation run log tab and move pagination control to bottom right of table

This commit is contained in:
Andrew Kingston 2022-07-11 19:53:14 +01:00
parent f780762d09
commit 57155656e2
1 changed files with 29 additions and 26 deletions

View File

@ -119,7 +119,7 @@
</script> </script>
<div class="root" class:panelOpen={showPanel}> <div class="root" class:panelOpen={showPanel}>
<Layout paddingX="XL" gap="S" alignContent="start"> <Layout noPadding gap="M" alignContent="start">
<div class="search"> <div class="search">
<div class="select"> <div class="select">
<Select <Select
@ -147,16 +147,27 @@
</div> </div>
</div> </div>
{#if runHistory} {#if runHistory}
<Table <div>
on:click={viewDetails} <Table
schema={runHistorySchema} on:click={viewDetails}
allowSelectRows={false} schema={runHistorySchema}
allowEditColumns={false} allowSelectRows={false}
allowEditRows={false} allowEditColumns={false}
data={runHistory} allowEditRows={false}
{customRenderers} data={runHistory}
placeholderText="No history found" {customRenderers}
/> placeholderText="No history found"
/>
<div class="pagination">
<Pagination
page={$pageInfo.pageNumber}
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
goToPrevPage={pageInfo.prevPage}
goToNextPage={pageInfo.nextPage}
/>
</div>
</div>
{/if} {/if}
</Layout> </Layout>
<div class="panel" class:panelShow={showPanel}> <div class="panel" class:panelShow={showPanel}>
@ -169,26 +180,18 @@
/> />
</div> </div>
</div> </div>
<div class="pagination">
<Pagination
page={$pageInfo.pageNumber}
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
goToPrevPage={pageInfo.prevPage}
goToNextPage={pageInfo.nextPage}
/>
</div>
<style> <style>
.root { .root {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: 100%; height: 100%;
padding: var(--spacing-xl) var(--spectrum-alias-grid-gutter-large);
} }
.search { .search {
display: flex; display: flex;
gap: var(--spacing-l); gap: var(--spacing-xl);
width: 100%; width: 100%;
align-items: flex-end; align-items: flex-end;
} }
@ -198,15 +201,15 @@
} }
.pagination { .pagination {
position: absolute; display: flex;
bottom: 0; flex-direction: row;
margin-bottom: var(--spacing-xl); justify-content: flex-end;
margin-left: var(--spacing-l); margin-top: var(--spacing-xl);
} }
.panel { .panel {
display: none; display: none;
background-color: var(--background); margin-top: calc(-1 * var(--spacing-xl));
} }
.panelShow { .panelShow {