MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make app dynamic filter component respsonsive

This commit is contained in:
Andrew Kingston 2022-03-22 18:33:41 +00:00
parent 7e32bd5fd0
commit e1878dabc2
1 changed files with 74 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/components/app/dynamic-filter/FilterModal.svelte
View File

@ -4,7 +4,6 @@
Button,
Combobox,
DatePicker,
DrawerContent,
Icon,
Input,
Layout,
@ -12,10 +11,12 @@
} from "@budibase/bbui"
import { generate } from "shortid"
import { LuceneUtils, Constants } from "@budibase/frontend-core"
import { getContext } from "svelte"
export let schemaFields
export let filters = []
const context = getContext("context")
const BannedTypes = ["link", "attachment", "json"]
$: fieldOptions = (schemaFields ?? [])
@ -89,8 +90,7 @@
}
</script>
<DrawerContent>
<div class="container">
<div class="container" class:mobile={$context.device.mobile}>
<Layout noPadding>
<Body size="S">
{#if !filters?.length}
@ -138,6 +138,7 @@
{:else}
<Input disabled />
{/if}
<div class="controls">
<Icon
name="Duplicate"
hoverable
@ -150,6 +151,7 @@
size="S"
on:click={() => removeFilter(filter.id)}
/>
</div>
{/each}
</div>
{/if}
@ -159,8 +161,7 @@
</Button>
</div>
</Layout>
</div>
</DrawerContent>
</div>
<style>
.container {
@ -175,4 +176,19 @@
align-items: center;
grid-template-columns: 1fr 120px 1fr auto auto;
}
.controls {
display: contents;
}
.container.mobile .fields {
grid-template-columns: 1fr;
}
.container.mobile .controls {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: var(--spacing-s) 0;
gap: var(--spacing-s);
}
</style>