Handle long app names correctly in app grid view
This commit is contained in:
parent
be28fc2fb8
commit
b5dade2d50
2 changed files with 40 additions and 23 deletions
|
@ -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}"
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue