Gridlistdetail (#177)

* Grid mode
Kredeum · May 4, 2022 · b7dea1c · b7dea1c
1 parent 6fd6f59
commit b7dea1c
Show file tree

Hide file tree

Showing 19 changed files with 720 additions and 458 deletions.
diff --git a/gulp/scss/_class.scss b/gulp/scss/_class.scss
@@ -204,7 +204,7 @@ select {
       background: rgba($green, 0.2);
     }
   }
-  &-sell {
+  &-sell, &-buy {
     color: $white;
     background: $green;
     &:hover {

diff --git a/gulp/scss/front.scss b/gulp/scss/front.scss
@@ -63,28 +63,13 @@
 }
 
 .media {
-  @include border-radius;
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 100%;
-  height: 130px;
-  width: 130px;
-
-  img {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.media-grid {
   @include border-radius;
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
   width: 100%;
-  img {
+
+  img, video {
     object-fit: cover;
     width: 100%;
     height: 100%;
@@ -294,11 +279,12 @@
         padding-top: 100%;
         position: relative;
 
-        img {
+        img, video {
           transition: all 300ms ease;
           position: absolute;
           top: 0;
           left: 0;
+          width:100%;
         }
       }
 
@@ -471,6 +457,10 @@
     font-weight: bold;
     margin-bottom: 30px;
   }
+
+  video {
+    width: 100%;
+  }
 }
 
 .modal-close,

diff --git a/svelte/components/Nft/NftsList.svelte → misc/old/svelte/NftsList.svelte b/svelte/components/Nft/NftsList.svelte → misc/old/svelte/NftsList.svelte
diff --git a/svelte/components/Global/Content.svelte b/svelte/components/Global/Content.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  // import { displayedTokenID } from "main/diplayedNft";
+
+  import Nft from "../Nft/Nft.svelte";
+  import NftList from "../Nft/NftList.svelte";
+
+  export let chainId: number;
+  export let address: string;
+  export let account: string;
+  export let platform: string;
+  export let refreshing: boolean = false;
+  export let refresh: number;
+
+  let tokenID: string = "";
+
+  $: account && chainId && address && handleChange();
+  const handleChange = () => (tokenID = "");
+
+  const handleClick = (evt: Event) => {
+    const evtTarget = evt.target as HTMLInputElement;
+    if (!evtTarget.classList.contains("btn")) {
+      if (evtTarget.closest("div [data-tokenid]")) {
+        evt.preventDefault();
+        tokenID = evtTarget.closest("div [data-tokenid]").getAttribute("data-tokenid");
+      } else if (evtTarget.getAttribute("data-back") === "backtocoll") {
+        evt.preventDefault();
+        tokenID = "";
+      }
+    }
+  };
+</script>
+
+<div on:click={(evt) => handleClick(evt)}>
+  {#if tokenID}
+    <Nft {chainId} {address} {tokenID} {account} {platform} />
+  {:else}
+    {#key address}
+      <NftList {chainId} {address} {account} {refresh} bind:refreshing {platform} />
+    {/key}
+  {/if}
+</div>
diff --git a/svelte/components/Global/Home.svelte b/svelte/components/Global/Home.svelte
@@ -9,19 +9,20 @@
   import Create from "../Global/Create.svelte";
   import Navigation from "../Global/Navigation.svelte";
 
-  import Nft from "../Nft/Nft.svelte";
-  import NftsList from "../Nft/NftsList.svelte";
   import NftsListRefresh from "../Nft/NftsListRefresh.svelte";
 
   import Title from "../Global/Title.svelte";
   // import BreadCrumb from "../../tests/BreadCrumb.svelte";
   import HomeLayout from "../Global/HomeLayout.svelte";
 
+  import Content from "./Content.svelte";
+
   // import { metamaskProvider } from "main/metamask";
 
+  export let platform: string = "dapp";
+
   let chainId: number;
   let address: string;
-  let tokenID: string;
   let account: string;
   let refreshing: boolean;
   let refresh: number;
@@ -62,11 +63,7 @@
 
   <span slot="content">
     {#if chainId && account && address}
-      {#if tokenID}
-        <Nft {chainId} {address} {tokenID} />
-      {:else}
-        <NftsList {chainId} {address} {account} {refresh} bind:refreshing />
-      {/if}
+      <Content {chainId} {address} {account} {platform} bind:refreshing {refresh} />
     {/if}
   </span>
 </HomeLayout>