Skip to content
This repository has been archived by the owner on Feb 5, 2023. It is now read-only.

add: bar card component #85

Merged
merged 2 commits into from
Oct 15, 2021
Merged

add: bar card component #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43f02d1
add: bar card component
Candinya Oct 15, 2021
79a0e48
add: card height restrict
Candinya Oct 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/components/BarCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 7 additions & 6 deletions src/components/NFT/NFTItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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>
46 changes: 46 additions & 0 deletions src/views/Test.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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,
Expand All @@ -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: [
Expand Down