CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 10:36:59 +13:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1069 from Budibase/Fixed-stackedlist-styling

Browse source 
Fixed stacked list
This commit is contained in:
Joe 2021-02-02 13:30:37 +00:00 committed by GitHub
commit 4403c1fa82
5 changed files with 49 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/package.json
View file

@ -63,7 +63,7 @@
} }
}, },
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.55.2", "@budibase/bbui": "^1.56.0",
"@budibase/client": "^0.6.2", "@budibase/client": "^0.6.2",
"@budibase/colorpicker": "^1.0.1", "@budibase/colorpicker": "^1.0.1",
"@budibase/string-templates": "^0.6.2", "@budibase/string-templates": "^0.6.2",

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

@ -80,7 +80,7 @@
class="icon" class="icon"
data-cy={`${key}-binding-button`} data-cy={`${key}-binding-button`}
on:click={bindingDrawer.show}> on:click={bindingDrawer.show}>
<Icon name="edit" /> <Icon name="lightning" />
</div> </div>
{/if} {/if}
</div> </div>
@ -144,7 +144,7 @@
border-top-right-radius: var(--border-radius-m); border-top-right-radius: var(--border-radius-m);
border-bottom-right-radius: var(--border-radius-m); border-bottom-right-radius: var(--border-radius-m);
color: var(--grey-7); color: var(--grey-7);
font-size: 16px; font-size: 14px;
} }
.icon:hover { .icon:hover {
color: var(--ink); color: var(--ink);

8
packages/builder/yarn.lock
View file

@ -842,10 +842,10 @@
lodash "^4.17.19" lodash "^4.17.19"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@budibase/bbui@^1.55.2": "@budibase/bbui@^1.56.0":
version "1.55.2" version "1.56.0"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8" resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.56.0.tgz#91376f11b43706fd380291e9a5283760996eb62b"
integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg== integrity sha512-OEFC7MapbJk7Bd7oo79cVOq9BIcK1x8XPHLC1lB2N4hts37IygzB4Egg6JZBD7rh7CqU8ppc4W7wkfQbaXEO1Q==
dependencies: dependencies:
markdown-it "^12.0.2" markdown-it "^12.0.2"
quill "^1.3.7" quill "^1.3.7"

14
packages/standard-components/manifest.json
View file

@ -183,18 +183,8 @@
}, },
{ {
"type": "text", "type": "text",
"label": "Text 1", "label": "Subheading",
"key": "text1" "key": "subheading"
},
{
"type": "text",
"label": "Text 2",
"key": "text2"
},
{
"type": "text",
"label": "Text 3",
"key": "text3"
}, },
{ {
"type": "screen", "type": "screen",

88
packages/standard-components/src/StackedList.svelte
View file

@ -6,9 +6,7 @@
export let imageUrl = "" export let imageUrl = ""
export let heading = "" export let heading = ""
export let text1 = "" export let subheading = ""
export let text2 = ""
export let text3 = ""
export let destinationUrl = "" export let destinationUrl = ""
$: showImage = !!imageUrl $: showImage = !!imageUrl
@ -16,16 +14,16 @@
<div class="container" use:styleable={$component.styles}> <div class="container" use:styleable={$component.styles}>
<a href={destinationUrl}> <a href={destinationUrl}>
<div class="content"> <div class="stackedlist">
{#if showImage} {#if showImage}
<div class="image-block"> <div class="image-block">
<img class="image" src={imageUrl} alt="" /> <img class="image" src={imageUrl} alt="" />
</div> </div>
{/if} {/if}
<h2 class="heading">{heading}</h2> <div class="content">
<h4 class="text">{text1}</h4> <div class="heading">{heading}</div>
<h4 class="text">{text2}</h4> <div class="subheading">{subheading}</div>
<h4 class="text3">{text3}</h4> </div>
</div> </div>
</a> </a>
</div> </div>
@ -34,61 +32,51 @@
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
cursor: pointer;
} }
.container { .container {
padding: 20px; padding: 1rem 1.5rem;
min-height: 3rem;
display: block;
align-items: flex-start;
} }
.content { .stackedlist {
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; display: flex;
align-items: center; flex-direction: row;
justify-content: center; overflow: hidden;
max-width: 100%;
} }
.image { .subheading {
padding: 2px; opacity: 0.6;
max-width: 80px; }
max-height: 80px;
margin-right: 20px; .content {
min-width: 0;
max-width: 100%;
flex: 1 1 auto;
} }
.heading { .heading {
font-size: 24px; font-weight: 600;
margin: 0;
min-width: 200px;
} }
.text { .image-block {
font-size: 16px; display: flex;
font-weight: 400; flex: 0 0 auto;
margin-right: 1.5rem;
color: inherit;
text-decoration: none;
} }
.text3 { .image {
text-align: end; display: block;
font-size: 16px; overflow: hidden;
font-weight: 400; width: 3rem;
} max-width: 100%;
-webkit-user-select: none;
@media (max-width: 800px) { user-select: none;
.text3 { border-radius: 99px;
text-align: start;
}
} }
</style> </style>