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

Handle long app names correctly in app grid view

This commit is contained in:
Andrew Kingston 2021-05-07 13:29:05 +01:00
parent f0b39f2530
commit 81e9d8833c
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Layout/Layout.svelte
View File

@ -5,9 +5,11 @@
export let noPadding = false export let noPadding = false
export let gap = "M" export let gap = "M"
export let noGap = false export let noGap = false
export let alignContent = "normal"
</script> </script>
<div <div
style="align-content:{alignContent};"
class:horizontal class:horizontal
class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding && class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
paddingY} gap-{!noGap && gap}" paddingY} gap-{!noGap && gap}"

61
packages/builder/src/components/start/AppCard.svelte
View File

@ -17,31 +17,37 @@
let appExportLoading = false let appExportLoading = false
</script> </script>
<Layout noPadding gap="XS"> <div class="wrapper">
<div class="preview" use:gradient /> <Layout noPadding gap="XS" alignContent="start">
<div class="title"> <div class="preview" use:gradient />
<Link href={$url(`../../app/${app._id}`)}> <div class="title">
<Heading size="XS"> <Link href={$url(`../../app/${app._id}`)}>
{app.name} <Heading size="XS">
</Heading> {app.name}
</Link> </Heading>
<ActionMenu> </Link>
<Icon slot="control" name="More" hoverable /> <ActionMenu align="right">
<MenuItem on:click={() => exportApp(app)} icon="Download">Export</MenuItem <Icon slot="control" name="More" hoverable />
> <MenuItem on:click={() => exportApp(app)} icon="Download"
</ActionMenu> >Export</MenuItem
</div> >
<div class="status"> </ActionMenu>
<Body noPadding size="S"> </div>
Edited {Math.floor(1 + Math.random() * 10)} months ago <div class="status">
</Body> <Body noPadding size="S">
{#if Math.random() > 0.5} Edited {Math.floor(1 + Math.random() * 10)} months ago
<Icon name="LockClosed" /> </Body>
{/if} {#if Math.random() > 0.5}
</div> <Icon name="LockClosed" />
</Layout> {/if}
</div>
</Layout>
</div>
<style> <style>
.wrapper {
overflow: hidden;
}
.preview { .preview {
height: 135px; height: 135px;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
@ -58,6 +64,15 @@
.title :global(a) { .title :global(a) {
text-decoration: none; text-decoration: none;
flex: 1 1 auto;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
margin-right: var(--spacing-m);
}
.title :global(h1) {
overflow: hidden;
text-overflow: ellipsis;
} }
.title :global(h1:hover) { .title :global(h1:hover) {
color: var(--spectrum-global-color-blue-600); color: var(--spectrum-global-color-blue-600);