Make automation history page responsive

This commit is contained in:
Andrew Kingston 2023-01-11 12:09:58 +00:00
parent 5cf6ba89cf
commit 3d76b07a9a
1 changed files with 52 additions and 48 deletions

View File

@ -155,47 +155,47 @@
</Layout> </Layout>
<Divider /> <Divider />
<div class="search"> <div class="controls">
<div class="select"> <div class="search">
<Select <div class="select">
placeholder="All" <Select
label="Status" placeholder="All"
bind:value={status} label="Status"
options={statusOptions} bind:value={status}
/> options={statusOptions}
</div> />
<div class="select"> </div>
<Select <div class="select">
placeholder="All" <Select
label="Automation" placeholder="All"
bind:value={automationId} label="Automation"
options={automationOptions} bind:value={automationId}
/> options={automationOptions}
</div> />
<div class="select"> </div>
<Select <div class="select">
placeholder="All" <Select
label="Date range" placeholder="All"
bind:value={timeRange} label="Date range"
options={timeOptions} bind:value={timeRange}
isOptionEnabled={x => { options={timeOptions}
if (licensePlan?.type === Constants.PlanType.FREE) { isOptionEnabled={x => {
return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0 if (licensePlan?.type === Constants.PlanType.FREE) {
} else if (licensePlan?.type === Constants.PlanType.TEAM) { return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
return ["90-d"].indexOf(x.value) < 0 } else if (licensePlan?.type === Constants.PlanType.TEAM) {
} else if (licensePlan?.type === Constants.PlanType.PRO) { return ["90-d"].indexOf(x.value) < 0
return ["30-d", "90-d"].indexOf(x.value) < 0 } else if (licensePlan?.type === Constants.PlanType.PRO) {
} return ["30-d", "90-d"].indexOf(x.value) < 0
return true }
}} return true
/> }}
/>
</div>
</div> </div>
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud} {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
<div class="pro-upgrade"> <Button secondary on:click={$licensing.goToUpgradePage()}>
<Button secondary on:click={$licensing.goToUpgradePage()}> Get more history
Get more history </Button>
</Button>
</div>
{/if} {/if}
</div> </div>
@ -236,14 +236,24 @@
{/if} {/if}
<style> <style>
.controls {
display: flex;
flex-direction: row;
gap: var(--spacing-xl);
align-items: flex-end;
flex-wrap: wrap;
}
.search { .search {
display: flex; display: flex;
gap: var(--spacing-xl); gap: var(--spacing-xl);
width: 100%; align-items: flex-start;
align-items: flex-end; flex: 1 0 auto;
max-width: 100%;
} }
.select { .select {
flex-basis: 150px; flex: 1 1 0;
max-width: 150px;
min-width: 80px;
} }
.pagination { .pagination {
display: flex; display: flex;
@ -251,10 +261,4 @@
justify-content: flex-end; justify-content: flex-end;
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }
.pro-upgrade {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
}
</style> </style>