Fixed stacked list
I simplified the stacked list which has resolved the text overlapping issue. There is still an issue with linking the stacked list to a detail page
This commit is contained in:
Joe
parent
f81330b3e7
commit
0557c6daa6
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "^1.55.2",
|
||||
"@budibase/bbui": "^1.56.0",
|
||||
"@budibase/client": "^0.6.2",
|
||||
"@budibase/colorpicker": "^1.0.1",
|
||||
"@budibase/string-templates": "^0.6.2",
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
class="icon"
|
||||
data-cy={`${key}-binding-button`}
|
||||
on:click={bindingDrawer.show}>
|
||||
<Icon name="edit" />
|
||||
<Icon name="lightning" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
border-top-right-radius: var(--border-radius-m);
|
||||
border-bottom-right-radius: var(--border-radius-m);
|
||||
color: var(--grey-7);
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.icon:hover {
|
||||
color: var(--ink);
|
||||
|
|
|
|||
|
|
@ -842,10 +842,10 @@
|
|||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@budibase/bbui@^1.55.2":
|
||||
version "1.55.2"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8"
|
||||
integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg==
|
||||
"@budibase/bbui@^1.56.0":
|
||||
version "1.56.0"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.56.0.tgz#91376f11b43706fd380291e9a5283760996eb62b"
|
||||
integrity sha512-OEFC7MapbJk7Bd7oo79cVOq9BIcK1x8XPHLC1lB2N4hts37IygzB4Egg6JZBD7rh7CqU8ppc4W7wkfQbaXEO1Q==
|
||||
dependencies:
|
||||
markdown-it "^12.0.2"
|
||||
quill "^1.3.7"
|
||||
|
|
|
|||
|
|
@ -183,18 +183,8 @@
|
|||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Text 1",
|
||||
"key": "text1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Text 2",
|
||||
"key": "text2"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Text 3",
|
||||
"key": "text3"
|
||||
"label": "Subheading",
|
||||
"key": "subheading"
|
||||
},
|
||||
{
|
||||
"type": "screen",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
|
||||
export let imageUrl = ""
|
||||
export let heading = ""
|
||||
export let text1 = ""
|
||||
export let text2 = ""
|
||||
export let text3 = ""
|
||||
export let subheading = ""
|
||||
export let destinationUrl = ""
|
||||
|
||||
$: showImage = !!imageUrl
|
||||
|
|
@ -16,16 +14,16 @@
|
|||
|
||||
<div class="container" use:styleable={$component.styles}>
|
||||
<a href={destinationUrl}>
|
||||
<div class="content">
|
||||
<div class="stackedlist">
|
||||
{#if showImage}
|
||||
<div class="image-block">
|
||||
<img class="image" src={imageUrl} alt="" />
|
||||
</div>
|
||||
{/if}
|
||||
<h2 class="heading">{heading}</h2>
|
||||
<h4 class="text">{text1}</h4>
|
||||
<h4 class="text">{text2}</h4>
|
||||
<h4 class="text3">{text3}</h4>
|
||||
<div class="content">
|
||||
<div class="heading">{heading}</div>
|
||||
<div class="subheading">{subheading}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -34,61 +32,51 @@
|
|||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container {
|
||||
padding: 20px;
|
||||
padding: 1rem 1.5rem;
|
||||
min-height: 3rem;
|
||||
display: block;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.stackedlist {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 300px 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
.image-block {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
padding: 2px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
margin-right: 20px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
min-width: 200px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
.image-block {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 1.5rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text3 {
|
||||
text-align: end;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.text3 {
|
||||
text-align: start;
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 3rem;
|
||||
max-width: 100%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
border-radius: 99px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue