From f81330b3e791ed932a5fda8359b235a534e8d61a Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Mon, 1 Feb 2021 17:12:18 +0000 Subject: [PATCH 1/2] Updating script for generating handlebars-helpers manifest. --- packages/string-templates/manifest.json | 71 ------------------- .../scripts/gen-collection-info.js | 11 +-- 2 files changed, 7 insertions(+), 75 deletions(-) diff --git a/packages/string-templates/manifest.json b/packages/string-templates/manifest.json index c23e3dc3a4..e3c8b1dc76 100644 --- a/packages/string-templates/manifest.json +++ b/packages/string-templates/manifest.json @@ -20,7 +20,6 @@ "array" ], "numArgs": 1, - "example": "handlebars {{avg \"[1, 2, 3, 4, 5]\"}} ", "description": "

Returns the average of all numbers in the given array.

\n" }, "ceil": { @@ -113,7 +112,6 @@ "array" ], "numArgs": 1, - "example": "handlebars {{sum \"[1, 2, 3, 4, 5]\"}} ", "description": "

Returns the sum of all numbers in the given array.

\n" }, "times": { @@ -132,7 +130,6 @@ "n" ], "numArgs": 2, - "example": "handlebars {{after array 1}} ", "description": "

Returns all of the items in an array after the specified index. Opposite of before.

\n" }, "arrayify": { @@ -140,7 +137,6 @@ "value" ], "numArgs": 1, - "example": "handlebars {{arrayify \"foo\"}} ", "description": "

Cast the given value to an array.

\n" }, "before": { @@ -149,7 +145,6 @@ "n" ], "numArgs": 2, - "example": "handlebars {{before array 2}} ", "description": "

Return all of the items in the collection before the specified count. Opposite of after.

\n" }, "eachIndex": { @@ -158,7 +153,6 @@ "options" ], "numArgs": 2, - "example": "handlebars {{#eachIndex array}} {{item}} is {{index}} {{/eachIndex}} ", "description": "

Iterates the array, listing an item and the index of it.

\n" }, "filter": { @@ -168,7 +162,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#filter array \"foo\"}}AAA{{else}}BBB{{/filter}} ", "description": "

Block helper that filters the given array and renders the block for values that evaluate to true, otherwise the inverse block is returned.

\n" }, "first": { @@ -177,7 +170,6 @@ "n" ], "numArgs": 2, - "example": "handlebars {{first \"['a', 'b', 'c', 'd', 'e']\" 2}} ", "description": "

Returns the first item, or first n items of an array.

\n" }, "forEach": { @@ -185,7 +177,6 @@ "array" ], "numArgs": 1, - "example": "handlebars {{#forEach accounts}} {{ name }} {{#unless isLast}}, {{/unless}} {{/forEach}} ", "description": "

Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block: - index - total - isFirst - isLast Also, @index is exposed as a private variable, and additional private variables may be defined as hash arguments.

\n" }, "inArray": { @@ -195,7 +186,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#inArray array \"d\"}} foo {{else}} bar {{/inArray}} ", "description": "

Block helper that renders the block if an array has the given value. Optionally specify an inverse block to render when the array does not have the given value.

\n" }, "isArray": { @@ -203,7 +193,6 @@ "value" ], "numArgs": 1, - "example": "handlebars {{isArray \"abc\"}} {{isArray array}} ", "description": "

Returns true if value is an es5 array.

\n" }, "itemAt": { @@ -212,7 +201,6 @@ "idx" ], "numArgs": 2, - "example": "handlebars {{itemAt array 1}} ", "description": "

Returns the item from array at index idx.

\n" }, "join": { @@ -221,7 +209,6 @@ "separator" ], "numArgs": 2, - "example": "handlebars {{join array}} {{join array '-'}} ", "description": "

Join all elements of array into a string, optionally using a given separator.

\n" }, "equalsLength": { @@ -239,7 +226,6 @@ "n" ], "numArgs": 2, - "example": "handlebars {{last value}} {{last value 2}} {{last value 3}} ", "description": "

Returns the last item, or last n items of an array or string. Opposite of first.

\n" }, "length": { @@ -247,7 +233,6 @@ "value" ], "numArgs": 1, - "example": "handlebars {{length '[\"a\", \"b\", \"c\"]'}} {{length myArray}} {{length myObject}} ", "description": "

Returns the length of the given string or array.

\n" }, "lengthEqual": { @@ -265,7 +250,6 @@ "fn" ], "numArgs": 2, - "example": "handlebars {{map array double}} ", "description": "

Returns a new array, created by calling function on each element of the given array. For example,

\n" }, "pluck": { @@ -274,7 +258,6 @@ "prop" ], "numArgs": 2, - "example": "handlebars // {{pluck items \"data.title\"}} ", "description": "

Map over the given object or array or objects and create an array of values from the given prop. Dot-notation may be used (as a string) to get nested properties.

\n" }, "reverse": { @@ -282,7 +265,6 @@ "value" ], "numArgs": 1, - "example": "handlebars {{reverse value}} {{reverse value}} ", "description": "

Reverse the elements in an array, or the characters in a string.

\n" }, "some": { @@ -292,7 +274,6 @@ "provided" ], "numArgs": 3, - "example": "handlebars {{#some array isString}} Render me if the array has a string. {{else}} Render me if it doesn't. {{/some}} ", "description": "

Block helper that returns the block if the callback returns true for some value in the given array.

\n" }, "sort": { @@ -301,7 +282,6 @@ "key" ], "numArgs": 2, - "example": "handlebars {{sort array}} ", "description": "

Sort the given array. If an array of objects is passed, you may optionally pass a key to sort on as the second argument. You may alternatively pass a sorting function as the second argument.

\n" }, "sortBy": { @@ -310,7 +290,6 @@ "props" ], "numArgs": 2, - "example": "handlebars {{sortBy array \"a\"}} ", "description": "

Sort an array. If an array of objects is passed, you may optionally pass a key to sort on as the second argument. You may alternatively pass a sorting function as the second argument.

\n" }, "withAfter": { @@ -320,7 +299,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#withAfter array 3}} {{this}} {{/withAfter}} ", "description": "

Use the items in the array after the specified index as context inside a block. Opposite of withBefore.

\n" }, "withBefore": { @@ -330,7 +308,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#withBefore array 3}} {{this}} {{/withBefore}} ", "description": "

Use the items in the array before the specified index as context inside a block. Opposite of withAfter.

\n" }, "withFirst": { @@ -340,7 +317,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#withFirst array}} {{this}} {{/withFirst}} ", "description": "

Use the first item in a collection inside a handlebars block expression. Opposite of withLast.

\n" }, "withGroup": { @@ -350,7 +326,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#withGroup array 4}} {{#each this}} {{.}} {{each}}
{{/withGroup}} ", "description": "

Block helper that groups array elements by given group size.

\n" }, "withLast": { @@ -360,7 +335,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#withLast array}} {{this}} {{/withLast}} ", "description": "

Use the last item or n items in an array as context inside a block. Opposite of withFirst.

\n" }, "withSort": { @@ -370,7 +344,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#withSort array}}{{this}}{{/withSort}} ", "description": "

Block helper that sorts a collection and exposes the sorted collection as context inside the block.

\n" }, "unique": { @@ -379,7 +352,6 @@ "options" ], "numArgs": 2, - "example": "handlebars {{#each (unique array)}}{{.}}{{/each}} ", "description": "

Block helper that return an array with all duplicate values removed. Best used along with a each helper.

\n" } }, @@ -419,7 +391,6 @@ "fractionDigits" ], "numArgs": 2, - "example": "handlebars {{toExponential number digits}}; ", "description": "

Returns a string representing the given number in exponential notation.

\n" }, "toFixed": { @@ -428,7 +399,6 @@ "digits" ], "numArgs": 2, - "example": "handlebars {{toFixed \"1.1234\" 2}} //=> '1.12' ", "description": "

Formats the given number using fixed-point notation.

\n" }, "toFloat": { @@ -451,7 +421,6 @@ "precision" ], "numArgs": 2, - "example": "handlebars {{toPrecision \"1.1234\" 2}} //=> '1.1' ", "description": "

Returns a string representing the Number object to the specified precision.

\n" } }, @@ -514,7 +483,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{stripProtocol url}} ", "description": "

Strip protocol from a url. Useful for displaying media that may have an 'http' protocol on secure connections.

\n" } }, @@ -525,7 +493,6 @@ "suffix" ], "numArgs": 2, - "example": "handlebars {{append item.stem \".html\"}} ", "description": "

Append the specified suffix to the given string.

\n" }, "camelcase": { @@ -533,7 +500,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{camelcase \"foo bar baz\"}}; ", "description": "

camelCase the characters in the given string.

\n" }, "capitalize": { @@ -541,7 +507,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{capitalize \"foo bar baz\"}} ", "description": "

Capitalize the first word in a sentence.

\n" }, "capitalizeAll": { @@ -549,7 +514,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{capitalizeAll \"foo bar baz\"}} ", "description": "

Capitalize all words in a string.

\n" }, "center": { @@ -565,7 +529,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{chop \"_ABC_\"}} {{chop \"-ABC-\"}} {{chop \" ABC \"}} ", "description": "

Like trim, but removes both extraneous whitespace and non-word characters from the beginning and end of a string.

\n" }, "dashcase": { @@ -573,7 +536,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{dashcase \"a-b-c d_e\"}} ", "description": "

dash-case the characters in string. Replaces non-word characters and periods with hyphens.

\n" }, "dotcase": { @@ -581,7 +543,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{dotcase \"a-b-c d_e\"}} ", "description": "

dot.case the characters in string.

\n" }, "downcase": { @@ -589,7 +550,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{downcase \"aBcDeF\"}} ", "description": "

Lowercase all of the characters in the given string. Alias for lowercase.

\n" }, "ellipsis": { @@ -598,7 +558,6 @@ "length" ], "numArgs": 2, - "example": "handlebars {{ellipsis (sanitize \"foo bar baz\"), 7}} {{ellipsis \"foo bar baz\", 7}} ", "description": "

Truncates a string to the specified length, and appends it with an elipsis, .

\n" }, "hyphenate": { @@ -606,7 +565,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{hyphenate \"foo bar baz qux\"}} ", "description": "

Replace spaces in a string with hyphens.

\n" }, "isString": { @@ -614,7 +572,6 @@ "value" ], "numArgs": 1, - "example": "handlebars {{isString \"foo\"}} ", "description": "

Return true if value is a string.

\n" }, "lowercase": { @@ -622,7 +579,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{lowercase \"Foo BAR baZ\"}} ", "description": "

Lowercase all characters in the given string.

\n" }, "occurrences": { @@ -631,7 +587,6 @@ "substring" ], "numArgs": 2, - "example": "handlebars {{occurrences \"foo bar foo bar baz\" \"foo\"}} ", "description": "

Return the number of occurrences of substring within the given string.

\n" }, "pascalcase": { @@ -639,7 +594,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{pascalcase \"foo bar baz\"}} ", "description": "

PascalCase the characters in string.

\n" }, "pathcase": { @@ -647,7 +601,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{pathcase \"a-b-c d_e\"}} ", "description": "

path/case the characters in string.

\n" }, "plusify": { @@ -655,7 +608,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{plusify \"foo bar baz\"}} ", "description": "

Replace spaces in the given string with pluses.

\n" }, "prepend": { @@ -664,7 +616,6 @@ "prefix" ], "numArgs": 2, - "example": "handlebars {{prepend val \"foo-\"}} ", "description": "

Prepends the given string with the specified prefix.

\n" }, "raw": { @@ -672,7 +623,6 @@ "options" ], "numArgs": 1, - "example": "handlebars {{{{#raw}}}} {{foo}} {{{{/raw}}}} ", "description": "

Render a block without processing mustache templates inside the block.

\n" }, "remove": { @@ -681,7 +631,6 @@ "substring" ], "numArgs": 2, - "example": "handlebars {{remove \"a b a b a b\" \"a \"}} ", "description": "

Remove all occurrences of substring from the given str.

\n" }, "removeFirst": { @@ -690,7 +639,6 @@ "substring" ], "numArgs": 2, - "example": "handlebars {{remove \"a b a b a b\" \"a\"}} ", "description": "

Remove the first occurrence of substring from the given str.

\n" }, "replace": { @@ -700,7 +648,6 @@ "b" ], "numArgs": 3, - "example": "handlebars {{replace \"a b a b a b\" \"a\" \"z\"}} ", "description": "

Replace all occurrences of substring a with substring b.

\n" }, "replaceFirst": { @@ -710,7 +657,6 @@ "b" ], "numArgs": 3, - "example": "handlebars {{replace \"a b a b a b\" \"a\" \"z\"}} ", "description": "

Replace the first occurrence of substring a with substring b.

\n" }, "sentence": { @@ -718,7 +664,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{sentence \"hello world. goodbye world.\"}} ", "description": "

Sentence case the given string

\n" }, "snakecase": { @@ -726,7 +671,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{snakecase \"a-b-c d_e\"}} ", "description": "

snake_case the characters in the given string.

\n" }, "split": { @@ -734,7 +678,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{split \"a,b,c\" \",\"}} ", "description": "

Split string by the given character.

\n" }, "startsWith": { @@ -744,7 +687,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#startsWith \"Goodbye\" \"Hello, world!\"}} Whoops {{else}} Bro, do you even hello world? {{/startsWith}} ", "description": "

Tests whether a string begins with the given prefix.

\n" }, "titleize": { @@ -752,7 +694,6 @@ "str" ], "numArgs": 1, - "example": "handlebars {{titleize \"this title case\"}} ", "description": "

Title case the given string.

\n" }, "trim": { @@ -760,7 +701,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{trim \" ABC \"}} ", "description": "

Removes extraneous whitespace from the beginning and end of a string.

\n" }, "trimLeft": { @@ -768,7 +708,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{trim \" ABC \"}} ", "description": "

Removes extraneous whitespace from the beginning of a string.

\n" }, "trimRight": { @@ -776,7 +715,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{trimRight \" ABC \"}} ", "description": "

Removes extraneous whitespace from the end of a string.

\n" }, "truncate": { @@ -786,7 +724,6 @@ "suffix" ], "numArgs": 3, - "example": "handlebars truncate(\"foo bar baz\", 7); truncate(sanitize(\"foo bar baz\", 7)); ", "description": "

Truncate a string to the specified length. Also see ellipsis.

\n" }, "truncateWords": { @@ -796,7 +733,6 @@ "suffix" ], "numArgs": 3, - "example": "handlebars truncateWords(\"foo bar baz\", 1); truncateWords(\"foo bar baz\", 2); truncateWords(\"foo bar baz\", 3); ", "description": "

Truncate a string to have the specified number of words. Also see truncate.

\n" }, "upcase": { @@ -804,7 +740,6 @@ "string" ], "numArgs": 1, - "example": "handlebars {{upcase \"aBcDeF\"}} ", "description": "

Uppercase all of the characters in the given string. Alias for uppercase.

\n" }, "uppercase": { @@ -813,7 +748,6 @@ "options" ], "numArgs": 2, - "example": "handlebars {{uppercase \"aBcDeF\"}} ", "description": "

Uppercase all of the characters in the given string. If used as a block helper it will uppercase the entire block. This helper does not support inverse blocks.

\n" } }, @@ -825,7 +759,6 @@ "options" ], "numArgs": 3, - "example": "handlebars {{#and great magnificent}}A{{else}}B{{/and}} ", "description": "

Helper that renders the block if both of the given values are truthy. If an inverse block is specified it will be rendered when falsy. Works as a block helper, inline helper or subexpression.

\n" }, "compare": { @@ -846,7 +779,6 @@ "options" ], "numArgs": 4, - "example": "handlebars {{#contains array \"d\"}} This will not be rendered. {{else}} This will be rendered. {{/contains}} ", "description": "

Block helper that renders the block if collection has the given value, using strict equality (===) for comparison, otherwise the inverse block is rendered (if specified). If a startIndex is specified and is negative, it is used as the offset from the end of the collection.

\n" }, "default": { @@ -915,7 +847,6 @@ "options" ], "numArgs": 2, - "example": "handlebars {{#ifEven value}} render A {{else}} render B {{/ifEven}} ", "description": "

Return true if the given value is an even number.

\n" }, "ifNth": { @@ -933,7 +864,6 @@ "options" ], "numArgs": 2, - "example": "handlebars {{#ifOdd value}} render A {{else}} render B {{/ifOdd}} ", "description": "

Block helper that renders a block if value is an odd number. If an inverse block is specified it will be rendered when falsy.

\n" }, "is": { @@ -994,7 +924,6 @@ "options" ], "numArgs": 2, - "example": "handlebars {{#or a b c}} If any value is true this will be rendered. {{/or}} ", "description": "

Block helper that renders a block if any of the given values is truthy. If an inverse block is specified it will be rendered when falsy.

\n" }, "unlessEq": { diff --git a/packages/string-templates/scripts/gen-collection-info.js b/packages/string-templates/scripts/gen-collection-info.js index d7e464a8ae..413e870519 100644 --- a/packages/string-templates/scripts/gen-collection-info.js +++ b/packages/string-templates/scripts/gen-collection-info.js @@ -78,11 +78,14 @@ function getCommentInfo(file, func) { docs.description = docs.description.replace(/\n/g, " ") docs.description = docs.description.replace(/[ ]{2,}/g, " ") docs.description = docs.description.replace(/is is/g, "is") - const example = docs.description.split("```") - if (example.length > 1) { - docs.example = example[1] + const examples = docs.tags + .filter(el => el.title === "example") + .map(el => el.description) + const blocks = docs.description.split("```") + if (examples.length > 0) { + docs.example = examples.join(" ") } - docs.description = example[0].trim() + docs.description = blocks[0].trim() return docs } From 0557c6daa6896385bede6dc2966d74593cde3600 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 2 Feb 2021 13:08:01 +0000 Subject: [PATCH 2/2] 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 --- packages/builder/package.json | 2 +- .../PropertyControls/PropertyControl.svelte | 4 +- packages/builder/yarn.lock | 8 +- packages/standard-components/manifest.json | 14 +-- .../src/StackedList.svelte | 92 ++++++++----------- 5 files changed, 49 insertions(+), 71 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index f8a2f6b60d..0e6eae7a7c 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -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", diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index a260789b5e..6f78484339 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -80,7 +80,7 @@ class="icon" data-cy={`${key}-binding-button`} on:click={bindingDrawer.show}> - + {/if} @@ -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); diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 803b961fcd..0416a6bc81 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -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" diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 65352761b9..8e8a8c1db3 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -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", diff --git a/packages/standard-components/src/StackedList.svelte b/packages/standard-components/src/StackedList.svelte index f7644a4e41..b06ce53ebe 100644 --- a/packages/standard-components/src/StackedList.svelte +++ b/packages/standard-components/src/StackedList.svelte @@ -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 @@
- @@ -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; }