Merge pull request #85 from NaturalSelectionLabs/feature/bar-cards

add: bar card component
NaturalSelectionLabs · Oct 15, 2021 · dfa736d · dfa736d
2 parents 74fb970 + 79a0e48
commit dfa736d
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 6 deletions.
diff --git a/src/components/BarCard.vue b/src/components/BarCard.vue
@@ -0,0 +1,29 @@
+<template>
+    <div
+        class="box-border rounded-xl px-5 py-1 flex flex-row items-center border-card h-16"
+        :class="[`bg-${$props.color}-bg`, `border-${$props.color}-border`]"
+    >
+        <div class="p-2">
+            <slot name="header" />
+        </div>
+        <div class="flex flex-row items-center w-full overflow-y-auto p-2">
+            <slot name="content" />
+        </div>
+        <div class="p-2">
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+
+@Options({
+    props: {
+        color: String,
+    },
+})
+export default class BarCard extends Vue {}
+</script>
+
+<style></style>
diff --git a/src/components/NFT/NFTItem.vue b/src/components/NFT/NFTItem.vue
@@ -4,7 +4,8 @@
             width: size + 'px',
             height: size + 'px',
         }"
-        class="rounded shadow-nft"
+        class="shadow-nft"
+        :class="size < 60 ? 'rounded-sm' : 'rounded'"
     >
         <video
             v-if="
@@ -20,7 +21,7 @@
                     : posterUrl
             "
             class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain']"
+            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size < 60 ? 'rounded-sm' : 'rounded']"
             :style="{
                 width: size + 'px',
                 height: size + 'px',
@@ -44,7 +45,7 @@
             "
             :src="imageUrl"
             class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain']"
+            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size < 60 ? 'rounded-sm' : 'rounded']"
             :style="{
                 width: size + 'px',
                 height: size + 'px',
@@ -55,7 +56,7 @@
             :src="imageUrl"
             :poster="posterUrl"
             class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain']"
+            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size < 60 ? 'rounded-sm' : 'rounded']"
             :style="{
                 width: size + 'px',
                 height: size + 'px',
@@ -71,7 +72,7 @@
             v-else
             :src="isShowingDetails ? imageUrl || posterUrl || defaultImage : posterUrl || imageUrl || defaultImage"
             class="nft-item"
-            :class="[!isShowingDetails ? 'object-cover' : 'object-contain']"
+            :class="[!isShowingDetails ? 'object-cover' : 'object-contain', size < 60 ? 'rounded-sm' : 'rounded']"
             :style="{
                 width: size + 'px',
                 height: size + 'px',
@@ -111,7 +112,7 @@ export default class NFTItem extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .nft-item {
-        @apply rounded border border-item-border filter shadow-nft bg-item-bg;
+        @apply border border-item-border filter bg-item-bg;
     }
 }
 </style>
diff --git a/src/views/Test.vue b/src/views/Test.vue
@@ -1,6 +1,47 @@
 <template>
     <h1>Test page</h1>
     <div class="flex flex-col gap-8 items-center">
+        <BarCard color="account">
+            <template #header>
+                <span class="text-account-title w-16 inline-flex"> Accounts </span>
+            </template>
+            <template #content>
+                <AccountItem
+                    class="inline-block mr-1 cursor-pointer"
+                    :size="40"
+                    v-for="id in 8"
+                    :key="id"
+                    chain="Ethereum"
+                />
+            </template>
+            <template #footer>
+                <Button size="sm" class="w-8 h-8 bg-account-btn-s text-account-btn-s-text shadow-account-btn-s">
+                    <i class="bx bxs-pencil bx-xs" />
+                </Button>
+            </template>
+        </BarCard>
+
+        <BarCard color="nft">
+            <template #header>
+                <span class="text-nft-title w-16 inline-flex"> NFTs </span>
+            </template>
+            <template #content>
+                <NFTItem
+                    class="inline-flex mr-1 cursor-pointer"
+                    image-url="https://i.imgur.com/GdWEt4z.jpg"
+                    poster-url="https://i.imgur.com/GdWEt4z.jpg"
+                    :size="40"
+                    v-for="id in 8"
+                    :key="id"
+                />
+            </template>
+            <template #footer>
+                <Button size="sm" class="w-8 h-8 bg-nft-btn-s text-nft-btn-s-text shadow-nft-btn-s">
+                    <i class="bx bxs-pencil bx-xs" />
+                </Button>
+            </template>
+        </BarCard>
+
         <Button size="sm" class="w-10 h-10 bg-white text-primary shadow-secondary">
             <i class="bx bx-chevron-left bx-sm"></i>
         </Button>
@@ -539,10 +580,14 @@ import html2canvas from 'html2canvas';
 import draggable from 'vuedraggable';
 
 import Loading from '@/components/Loading.vue';
+import BarCard from '@/components/BarCard.vue';
+
+import config from '@/config';
 
 @Options({
     name: 'Test',
     components: {
+        BarCard,
         ScanTag,
         Modal,
         FollowerCard,
@@ -559,6 +604,7 @@ import Loading from '@/components/Loading.vue';
     },
 })
 export default class Test extends Vue {
+    config: typeof config = config;
     value: String = 'value';
     accounts: Object = {
         array1: [