Modify style of tokenPoster.

metastellar-io · Jul 4, 2024 · 7bab2da · 7bab2da
1 parent 6f9f3e6
commit 7bab2da
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/src/lib/tokenPoster/tokenPoster.svelte b/src/lib/tokenPoster/tokenPoster.svelte
@@ -13,10 +13,12 @@
   export let assetAccount: AssetAccount;
   export let imgClass: string | undefined = undefined;
   export let padding: SizeType | 'none' = 'lg';
+  export let reverse: boolean = false;
 
 	interface $$Props extends ComponentProps<Frame> {
     assetAccount: AssetAccount;
     imgClass?:string;
+    reverse?: boolean;
     padding?: SizeType | 'none';
 	}
 
@@ -61,11 +63,12 @@
 
   let cardClass: string;
   $: cardClass = twMerge('flex w-full', $$props.class);
-  $: cardClass = twMerge('flex w-full',  $$props.class, innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover');
+  $: cardClass = twMerge('flex w-full',  $$props.class, reverse ? 'flex-col-reverse ' : 'flex-col', innerPadding, $$restProps.imgHoverTransform && 'img-hover', $$restProps.hoverTransform && 'hover');
 
 
 	let imgCls:string;
 	$:imgCls = twMerge('hover:cursor-pointer', imgClass)
+  
 </script>
 
 <Frame tag="div" {...$$restProps} class={cardClass} on:click={() => (showModal = true)}>
@@ -79,9 +82,10 @@
     </svg>
   </div>
   {/if}
-  <p>{assetMetadata?.code ? assetMetadata?.code : ""}</p>
-  <p>{assetMetadata?.name ? assetMetadata?.name : ""}</p>
-  <p>{assetMetadata?.issuer ? assetMetadata?.issuer: ""}</p>
-
+  <div class={innerYpadding}>
+    <h3 class="whitespace-nowrap overflow-hidden text-ellipsis text-2xl font-bold ">{assetMetadata?.code ? assetMetadata?.code : ""}</h3>
+    <p class="whitespace-nowrap overflow-hidden text-ellipsis text-slate-600 ">{assetMetadata?.name ? assetMetadata?.name : ""}</p>
+    <p class="whitespace-nowrap overflow-hidden text-ellipsis my-2">{assetMetadata?.issuer ? assetMetadata?.issuer: ""}</p>
+  </div>
   <!-- <h5 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{token?.name + " #" + token?.id}</h5> -->
 </Frame>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
   import CanvasModal from '$lib/CanvasModal/Modal.svelte';
   import { nftInfo, tokenInfo } from '../constants.js';
   import Jumbotron from '$lib/JumboTron/index.svelte';
-    import TokenPoster from '$lib/tokenPoster/tokenPoster.svelte';
+  import TokenPoster from '$lib/tokenPoster/tokenPoster.svelte';
   
   let recordMouseMoveTrack = true;
   let intervalData = 5;
@@ -22,13 +22,13 @@
     for people to do stuff
   </Jumbotron>
   <div class="flex flex-row gap-5 max-w-7xl">
-
       <Card 
         img="/images/wallet.webp"
         imgClass="m-lg rounded-lg"
         isMouseTrackRecord={recordMouseMoveTrack} 
         dataURL="http://localhost/api" 
         intervalData={intervalData}
+        hoverTransform
         >
           <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card</h5> 
           <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
@@ -48,6 +48,7 @@
       </Card>
   </div>
   <div class="flex flex-wor gap-5 mzx-w-6xl mt-16">
+    <div>
       <Card 
         isMouseTrackRecord={recordMouseMoveTrack} 
         dataURL="http://localhost/api" 
@@ -57,6 +58,20 @@
           <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card(no image)</h5> 
           <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
       </Card> 
+
+        <ImagePoster 
+            img="/images/test.png" 
+            isMouseTrackRecord={recordMouseMoveTrack} 
+            dataURL="http://localhost/api" 
+            intervalData={intervalData} 
+            hoverTransform
+            class="rounded-lg"
+            imgClass="rounded-lg">
+          </ImagePoster>
+          <h3 class="mt-4">
+            Image poster card
+          </h3>
+      </div>
       <YutubePoster
       isMouseTrackRecord={recordMouseMoveTrack} dataURL="http://localhost/api" intervalData={intervalData}
       yutubeURL="/video/1.mp4"
@@ -71,8 +86,7 @@
       </div>
     </YutubePoster>
   </div>
-  <div class="flex flex-row gap-5 max-w-6xl mt-16">
-
+  <div class="flex flex-row gap-5 max-w-7xl mt-16">
     <div class="w-1/2">
       <NftPoster 
           isMouseTrackRecord={recordMouseMoveTrack} 
@@ -88,36 +102,19 @@
         NFT poster card
       </h3>
     </div>
-
     <div class="w-1/2">
       <TokenPoster 
           isMouseTrackRecord={recordMouseMoveTrack} 
           dataURL="http://localhost/api" 
           intervalData={intervalData} 
           hoverTransform
-          imgHoverTransform
           assetAccount={tokenInfo}
         >
       </TokenPoster>
-
       <h3 class="mt-4">
         Token poster card
       </h3>
     </div>
-    <div class="w-1/2">
-      <ImagePoster 
-          img="/images/test.png" 
-          isMouseTrackRecord={recordMouseMoveTrack} 
-          dataURL="http://localhost/api" 
-          intervalData={intervalData} 
-          hoverTransform
-          class="rounded-lg"
-          imgClass="rounded-lg">
-        </ImagePoster>
-        <h3 class="mt-4">
-          Image poster card
-        </h3>
-    </div>
   </div>
   <div class="flex flex-row gap-5 max-w-6xl  mt-16">
     <CanvasModal bind:showModal={showModal} autoScaleHeight={true}>