cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update contracts+ desktop version

Browse Source
This commit is contained in:
EmberSpirit
2023-09-24 11:38:12 +02:00
parent 1b2ea9b2a2
commit 5c7053c0d9
40 changed files with 2327 additions and 2586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.vue
+141 -121
View File
@@ -1,17 +1,16 @@
<template>
<header>
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
<div class="navbar-inner">
<div class="navbar-icon">
<router-link to="/">
<img alt="logo" class="logo" src="/assets/img/vampir.png" />
</router-link>
</div>
<div class="navbar-text">
<router-link to="/">Bloodline</router-link>
</div>
<div class="navbar-center" v-if="!isMobile">
<!-- <div class="navbar-social-links">
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
<div class="navbar-inner">
<div class="navbar-icon">
<router-link to="/">
<img alt="logo" class="logo" src="/assets/img/vampir.png" />
</router-link>
</div>
<div class="navbar-text">
<router-link to="/">Bloodline</router-link>
</div>
<div class="navbar-center" v-if="!isMobile">
<!-- <div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
@@ -31,45 +30,50 @@
<div class="social-bloodline-badge-text">Twitter</div>
</div>
</div> -->
</div>
<div class="navbar-end">
<div class="navbar-navigation mid-text" v-if="!isMobile">
<div
class="navbar-navigation-link"
v-for="link in links"
:key="link.name"
:class="{ active: link.name === route.name }"
@click="router.push(link.path)"
>
<div class="icon">
<img :src="link.icon" alt="" />
</div>
<div class="text">{{ link.title }}</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-navigation mid-text" v-if="!isMobile && connected">
<div
class="navbar-navigation-link"
v-for="link in links"
:key="link.name"
:class="{ active: link.name === route.name }"
@click="router.push(link.path)"
>
<div class="icon">
<img :src="link.icon" alt="" />
</div>
<div class="text">{{ link.title }}</div>
</div>
<div v-if="!isMobile">
<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
<div v-if="!address" class="btn btn-immortal mid-text" @click="showPanel = true">connect</div>
<!-- <span v-else @click="showPanel = true"> test</span> -->
<div class="login-icon-desktop mid-text" v-else @click="showPanel = true">
<img :src="getblocky(address)" alt="avatar" />
<div>{{ getAddressShortName(walletStore.address) }}</div>
</div>
<div v-if="!isMobile">
<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
<div v-if="!address" class="btn btn-immortal mid-text" @click="showPanel = true">connect</div>
<!-- <span v-else @click="showPanel = true"> test</span> -->
<div v-else @click="showPanel = true"><img :src="getblocky(address)" alt="avatar" /></div>
</div>
<div v-else @click="showPanel = true">
<div class="login-icon" v-if="!address">
<font-awesome-icon :icon="['fas', 'fa-arrow-right-to-bracket']" />
</div>
<div v-else @click="showPanel = true">
<div class="login-icon" v-if="!address">
<font-awesome-icon :icon="['fas', 'fa-arrow-right-to-bracket']" />
</div>
<div v-else><img :src="getblocky(address)" alt="avatar" /></div>
<div v-else>
<img :src="getblocky(address)" alt="avatar" />
</div>
</div>
</div>
</div>
</header>
</div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
import { getblocky, getAddressShortName } from "@/helper/helper.js";
import { useRoute, useRouter } from "vue-router";
const emit = defineEmits(["showPanel"]);
@@ -124,99 +128,115 @@ onBeforeUnmount(() => {
</script>
<style lang="sass" scoped>
header
// margin-bottom: 82px
// @media (min-width: 992px)
// margin-bottom: 128px
// margin-bottom: 82px
// @media (min-width: 992px)
// margin-bottom: 128px
.navbar
position: fixed
z-index: 3
.navbar
position: fixed
z-index: 3
box-sizing: border-box
background-color: #202020
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
height: 82px
@media (min-width: 992px)
height: 128px
// &.navbar--hidden
// transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
padding: 16px 24px
box-sizing: border-box
background-color: #202020
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
height: 82px
height: 100%
align-items: center
@media (min-width: 992px)
height: 128px
// &.navbar--hidden
// transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
padding: 16px 24px
box-sizing: border-box
height: 100%
align-items: center
@media (min-width: 992px)
padding: 16px 24px
.navbar-icon
img
height: 50px
width: 50px
.navbar-text
font-family: 'Vampire', sans-serif
font-size: 36px
margin-left: 16px
letter-spacing: 0.138em
line-height: 73.107px
.navbar-icon
img
height: 50px
width: 50px
@media (min-width: 992px)
font-size: 64px
a
text-decoration: none
color: white
.navbar-center
height: 75px
width: 75px
.navbar-text
font-family: 'Vampire', sans-serif
font-size: 36px
margin-left: 16px
letter-spacing: 0.138em
line-height: 73.107px
@media (min-width: 992px)
font-size: 64px
a
text-decoration: none
color: white
.navbar-center
display: flex
margin-left: auto
.navbar-social-links
display: flex
margin-left: auto
.navbar-social-links
gap: 18px
.social-bloodline-badge
font-size: 16px
padding: 8px 16px 8px 16px
border-radius: 14px
background-color: #0F0F0F
display: flex
gap: 18px
.social-bloodline-badge
font-size: 16px
padding: 8px 16px 8px 16px
border-radius: 14px
background-color: #0F0F0F
display: flex
&:hover,&:active,&:focus
background-color: lighten(#0F0F0F, 10%)
cursor: pointer
.social-bloodline-badge-icon
margin-right: 8px
.navbar-end
&:hover,&:active,&:focus
background-color: lighten(#0F0F0F, 10%)
cursor: pointer
.social-bloodline-badge-icon
margin-right: 8px
.navbar-end
display: flex
margin-left: auto
gap: 80px
.navbar-navigation
display: flex
margin-left: auto
gap: 80px
.navbar-navigation
align-items: center
gap: 48px
.navbar-navigation-link
display: flex
align-items: center
gap: 48px
.navbar-navigation-link
display: flex
gap: 8px
&.active
border-bottom: 2px solid white
&:active, &:hover, &:focus
cursor: pointer
.icon
img
width: 20px
height: 20px
gap: 8px
border-bottom: 2px solid transparent
&.active
border-bottom: 2px solid white
&:active, &:hover, &:focus
cursor: pointer
.icon
img
width: 20px
height: 20px
.login-icon
color: var(--white)
background-color: var(--purple)
padding: 8px
font-size: 25px
border-radius: 8px
width: 44px
height: 44px
display: flex
justify-content: center
align-items: center
.login-icon
color: var(--white)
background-color: var(--purple)
padding: 8px
font-size: 25px
border-radius: 8px
width: 44px
height: 44px
display: flex
justify-content: center
align-items: center
img
width: 32px
height: 32px
border-radius: 8px
.login-icon-desktop
display: flex
padding: 8px
align-items: center
gap: 16px
border-radius: 16px
background: var(--Background-grey, #2D2D2D)
&:hover,&:active,&:focus
cursor: pointer
img
width: 32px
height: 32px
border-radius: 8px
width: 45px
height: 45px
</style>