Make automation history page responsive
This commit is contained in:
parent
5cf6ba89cf
commit
3d76b07a9a
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue