From 811b72b2d29c2e8fe5001547dae4d3c25276e1cd Mon Sep 17 00:00:00 2001 From: codepert Date: Fri, 5 Jul 2024 21:49:06 +0900 Subject: [PATCH 1/2] apply style to token poster component. --- src/lib/tokenPoster/tokenPoster.svelte | 48 ++++++++++++++------------ 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/src/lib/tokenPoster/tokenPoster.svelte b/src/lib/tokenPoster/tokenPoster.svelte index 808cc4b..8ef87d7 100644 --- a/src/lib/tokenPoster/tokenPoster.svelte +++ b/src/lib/tokenPoster/tokenPoster.svelte @@ -31,19 +31,8 @@ xl: 'p-4 sm:p-8' }; - const yPaddings: Record = { - none: '', - xs: 'py-2', - sm: 'py-4', - md: 'py-4 sm:py-5', - lg: 'py-4 sm:py-6', - xl: 'py-4 sm:py-8' - }; - let innerPadding: string; $: innerPadding = paddings[padding]; - let innerYpadding: string; - $: innerYpadding = yPaddings[padding]; let assetInfo: AssetRaw; let assetMetadata: AssetMetaData; @@ -56,36 +45,51 @@ console.log("token card metadata", assetMetadata); } } - + function shortenString(str:string, maxLength:number): string { + if (str.length <= maxLength) { + return str; // No need to shorten + } else { + // Calculate lengths of the parts + let firstPartLength = Math.ceil(maxLength / 2); + let secondPartLength = maxLength - firstPartLength; + + // Extract the first and last parts + let firstPart = str.substring(0, firstPartLength); + let secondPart = str.substring(str.length - secondPartLength); + + // Construct the shortened string + return firstPart + "...." + secondPart; + } + } + onMount(() => { getAssetData(assetAccount); }); let cardClass: string; $: cardClass = twMerge('flex w-full', $$props.class); - $: cardClass = twMerge('flex w-full', $$props.class, reverse ? 'flex-col-reverse ' : 'flex-col', innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover'); + $: cardClass = twMerge('flex w-full', 'flex-row gap-5 ', innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover'); let imgCls:string; - $:imgCls = twMerge('hover:cursor-pointer', imgClass) + $:imgCls = twMerge('hover:cursor-pointer w-20 h-20 mt-1', imgClass) (showModal = true)}> {#if assetMetadata?.image} - product 1 + product 1 {:else} - -
+ {/if} -
-

{assetMetadata?.code ? assetMetadata?.code : ""}

-

{assetMetadata?.name ? assetMetadata?.name : ""}

-

{assetMetadata?.issuer ? assetMetadata?.issuer: ""}

+
+

{assetMetadata?.code ? assetMetadata?.code : ""}

+

{assetMetadata?.name ? assetMetadata?.name : ""}

+

{assetMetadata?.issuer ? shortenString(assetMetadata?.issuer, 20): ""}

From edb32f37322b4e862077b4e8af4249458776755e Mon Sep 17 00:00:00 2001 From: codepert Date: Thu, 18 Jul 2024 16:46:17 +0900 Subject: [PATCH 2/2] add shadow props to frame. --- src/lib/frame/frame.svelte | 2 +- src/lib/frame/style.css | 2 ++ src/routes/+page.svelte | 16 +++++++++++++++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/lib/frame/frame.svelte b/src/lib/frame/frame.svelte index 49ed3fc..64d90c6 100644 --- a/src/lib/frame/frame.svelte +++ b/src/lib/frame/frame.svelte @@ -168,7 +168,7 @@ let divClass; // $:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg', hoverTransform && "hover", $$props.class, imgHoverTransform && ("img-hover")) - $:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg', $$props.class) + $:divClass = twMerge('ms-frame ', $$props.rounded && 'rounded-lg', $$props.class, $$props.shadow && 'shadow') diff --git a/src/lib/frame/style.css b/src/lib/frame/style.css index b9cca64..1e72e10 100644 --- a/src/lib/frame/style.css +++ b/src/lib/frame/style.css @@ -1,5 +1,7 @@ .ms-frame { cursor: pointer; +} +.ms-frame.shadow { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .ms-frame.hover:hover { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8076f16..3972ecd 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -44,6 +44,8 @@ dataURL="http://localhost/api" intervalData={intervalData} hoverTransform + shadow + rounded >
Meta stellar card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.

@@ -57,6 +59,8 @@ hoverTransform imgHoverTransform reverse + shadow + rounded >
Meta stellar card(reverse)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.

@@ -69,6 +73,8 @@ dataURL="http://localhost/api" intervalData={intervalData} hoverTransform + shadow + rounded >
Meta stellar card(no image)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.

@@ -81,7 +87,9 @@ intervalData={intervalData} hoverTransform class="rounded-lg" - imgClass="rounded-lg"> + imgClass="rounded-lg" + shadow + rounded>

Image poster card @@ -92,6 +100,8 @@ yutubeURL="/video/1.mp4" thumnailURL="/images/1.jpg" type="video/mp4" + shadow + rounded >