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