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