update responsive design
This commit is contained in:
Michel Fromme
+185
-130
@@ -1,76 +1,87 @@
|
||||
<template>
|
||||
<div class="sacrifice-wrapper card bloodline-wrapper">
|
||||
{{ activeToken.allowance }}
|
||||
<div class="sacrifice-headline">Select Token</div>
|
||||
<div class="sacrifice-select-tokens">
|
||||
<div class="sacrifice-tokens">
|
||||
<div
|
||||
class="sacrifice-token"
|
||||
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
|
||||
v-for="token in props.data"
|
||||
:key="token.contractAddress"
|
||||
@click="tokenStore.changeActiveToken(token)"
|
||||
>
|
||||
{{ token.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
||||
<div class="sacrifice-from-wrapper bloodline-border">
|
||||
<div class="sarcrifice-from-input">
|
||||
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img
|
||||
src="@/assets/img/vampir.png"
|
||||
alt="vampir"
|
||||
/>
|
||||
</div>
|
||||
<div class="value-adder">
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
|
||||
<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
|
||||
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-divider bloodline-devider">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
||||
</div>
|
||||
<div class="sacrifice-to-wrapper bloodline-border">
|
||||
<div class="sarcrifice-from-input">
|
||||
<div class="sacrifice-to-output">
|
||||
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
|
||||
<div class="sacrifice-to-output-rewards">{{ output }}</div>
|
||||
</div>
|
||||
<img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-info-wrapper">
|
||||
<div class="sacrifice-fees-img">
|
||||
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
|
||||
</div>
|
||||
<div class="sacrifice-fees-body">
|
||||
<div class="sacrifice-fees-body-header">
|
||||
<div class="sacrifice-fees-body-header-title">Gas Support</div>
|
||||
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-buttons-function-wrapper">
|
||||
<div v-if="connected">
|
||||
|
||||
<div class="sacrifice-inner">
|
||||
<div class="sacrifice-headline">Select Sacrifice</div>
|
||||
<div class="sacrifice-select-tokens">
|
||||
<div class="sacrifice-tokens">
|
||||
<div
|
||||
class="btn btn-immortal"
|
||||
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
|
||||
@click="approvalData = tokenStore.sacrificeToken(1)"
|
||||
class="sacrifice-token"
|
||||
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
|
||||
v-for="token in props.data"
|
||||
:key="token.contractAddress"
|
||||
@click="tokenStore.changeActiveToken(token)"
|
||||
>
|
||||
<font-awesome-icon v-if="loading" icon="spinner" spin />
|
||||
Sacrifce {{ activeToken.name }}
|
||||
</div>
|
||||
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
|
||||
Approve {{ activeToken.name }}
|
||||
<div class="sacrifice-token-logo">
|
||||
<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
|
||||
<img v-if="!isMobile" :src="token.logo" alt="token logo" />
|
||||
</div>
|
||||
<div class="sacrifice-token-name">{{ token.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
|
||||
</div>
|
||||
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
||||
<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="sarcrifice-from-input">
|
||||
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" />
|
||||
<div class="sacrifice-logo">
|
||||
<img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-adder">
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
|
||||
<!-- <div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
|
||||
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">
|
||||
Max
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-divider bloodline-devider">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
||||
</div>
|
||||
<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="sarcrifice-from-input">
|
||||
<div class="sacrifice-to-output">
|
||||
<div class="sacrifice-to-output-coin">$BLOOD</div>
|
||||
<div class="sacrifice-to-output-rewards">{{ output }}</div>
|
||||
</div>
|
||||
<div class="sacrifice-logo">
|
||||
<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-info-wrapper">
|
||||
<div class="sacrifice-fees-img">
|
||||
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
|
||||
</div>
|
||||
<div class="sacrifice-fees-body">
|
||||
<div class="sacrifice-fees-body-header">
|
||||
<div class="sacrifice-fees-body-header-title">Gas Support</div>
|
||||
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-buttons-function-wrapper">
|
||||
<div v-if="connected">
|
||||
<div
|
||||
class="btn btn-immortal"
|
||||
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
|
||||
@click="approvalData = tokenStore.sacrificeToken(1)"
|
||||
>
|
||||
<font-awesome-icon v-if="loading" icon="spinner" spin />
|
||||
Sacrifce {{ activeToken.name }}
|
||||
</div>
|
||||
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
|
||||
Approve {{ activeToken.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,11 +89,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from "vue";
|
||||
import { ref, defineProps, watch, inject } from "vue";
|
||||
import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { storeToRefs } from "pinia";
|
||||
import Helper from "@/utils/helper.js";
|
||||
const isMobile = inject("isMobile");
|
||||
|
||||
const walletStore = useWalletStore();
|
||||
const { contract, connected } = storeToRefs(walletStore);
|
||||
@@ -115,6 +127,10 @@ async function test(e) {
|
||||
function addTokens(value) {
|
||||
tokenNumber.value = tokenNumber.value + value;
|
||||
}
|
||||
|
||||
function getImageUrl(url) {
|
||||
return new URL(url, import.meta.url).href;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
@@ -125,72 +141,112 @@ function addTokens(value) {
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
background-color: var(--primary)
|
||||
.sacrifice-headline
|
||||
text-align: center
|
||||
font-size: 36px
|
||||
.sacrifice-select-tokens
|
||||
padding: 24px
|
||||
display: flex
|
||||
margin-bottom: 32px
|
||||
.sacrifice-tokens
|
||||
display: flex
|
||||
width: 100%
|
||||
justify-content: space-evenly
|
||||
.sacrifice-token
|
||||
width: 132px
|
||||
height: 132px
|
||||
border-radius: 16px
|
||||
padding: 12px
|
||||
border: 1px solid lightgrey
|
||||
cursor: pointer
|
||||
background-color: var(--tertiary)
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--tertiary-dark)
|
||||
&.sacrifice-token--active
|
||||
background-color: var(--tertiary-dark)
|
||||
.sacrifice-buttons-function-wrapper
|
||||
text-align: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-top: 24px
|
||||
.btn
|
||||
padding: 16px 64px
|
||||
.sacrifice-fees-info-wrapper
|
||||
display: flex
|
||||
border: 2px dashed var(--grey)
|
||||
border-radius: 16px
|
||||
padding: 16px 24px
|
||||
margin-top: 24px
|
||||
.sacrifice-fees-img
|
||||
flex: 0 0 15%
|
||||
.sacrifice-fees-body
|
||||
flex: 1 1 auto
|
||||
.sacrifice-fees-body-header
|
||||
font-size: 24px
|
||||
.sacrifice-inner
|
||||
padding: 48px 24px
|
||||
@media (min-width: 992px)
|
||||
padding: 48px 64px
|
||||
.sacrifice-headline
|
||||
text-align: center
|
||||
font-size: 24px
|
||||
margin-bottom: 32px
|
||||
@media (min-width: 992px)
|
||||
font-size: 36px
|
||||
.sacrifice-select-tokens
|
||||
display: flex
|
||||
margin-bottom: 32px
|
||||
.sacrifice-tokens
|
||||
display: flex
|
||||
width: 100%
|
||||
justify-content: space-between
|
||||
@media (min-width: 992px)
|
||||
justify-content: space-evenly
|
||||
|
||||
.sacrifice-token
|
||||
border-radius: 16px
|
||||
padding: 12px
|
||||
cursor: pointer
|
||||
background-color: #0F0F0F
|
||||
text-align: center
|
||||
@media (min-width: 992px)
|
||||
padding: 0
|
||||
background-color: unset
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--tertiary-dark)
|
||||
&.sacrifice-token--active
|
||||
background-color: var(--tertiary-dark)
|
||||
.sacrifice-token-name
|
||||
padding: 5px 26px
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
|
||||
.sacrifice-buttons-function-wrapper
|
||||
text-align: center
|
||||
justify-content: center
|
||||
margin-top: 24px
|
||||
display: block
|
||||
@media (min-width: 992px)
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
.btn
|
||||
padding: 16px 64px
|
||||
.sacrifice-fees-info-wrapper
|
||||
display: flex
|
||||
border: 2px dashed var(--grey)
|
||||
color: var(--grey)
|
||||
border-radius: 16px
|
||||
padding: 16px 24px
|
||||
margin-top: 24px
|
||||
font-size: 16px
|
||||
.sacrifice-fees-img
|
||||
flex: 0 0 15%
|
||||
.sacrifice-fees-body
|
||||
flex: 1 1 auto
|
||||
.sacrifice-fees-body-header
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
margin-bottom: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
margin-bottom: 0
|
||||
|
||||
.sacrifice-from-to-wrapper
|
||||
.sacrifice-from-wrapper,.sacrifice-to-wrapper
|
||||
.sarcrifice-from-input
|
||||
display: flex
|
||||
margin-bottom: 8px
|
||||
height: 60px
|
||||
// height: 60px
|
||||
input
|
||||
width: 100%
|
||||
font-size: 32px
|
||||
height: 45px
|
||||
font-size: 24px
|
||||
border-radius: 16px
|
||||
padding: 0 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 32px
|
||||
height: auto
|
||||
.sacrifice-logo
|
||||
margin-left: 16px
|
||||
img
|
||||
margin-left: 16px
|
||||
width: 45px
|
||||
height: 45px
|
||||
border-radius: 50%
|
||||
@media (min-width: 992px)
|
||||
height: auto
|
||||
width: auto
|
||||
.sacrifice-to-output
|
||||
flex: 1 1 auto
|
||||
text-align: left
|
||||
.sacrifice-to-output-coin
|
||||
font-size: 24px
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.sacrifice-to-output-rewards
|
||||
font-size: 42px
|
||||
font-size: 24px
|
||||
@media (min-width: 992px)
|
||||
font-size: 42px
|
||||
.value-adder
|
||||
display: flex
|
||||
gap: 6px
|
||||
@@ -200,17 +256,16 @@ function addTokens(value) {
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--secondary)
|
||||
border: 1px solid var(--secondary-dark)
|
||||
cursor: pointer
|
||||
.sacrifice-adder-balance
|
||||
margin-left: auto
|
||||
.sacrifice-adder-max
|
||||
margin-left: 12px
|
||||
color: red
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active
|
||||
color: darken(red, 10%)
|
||||
transform: scale(1.1)
|
||||
transition: transform 0s
|
||||
// .sacrifice-adder-balance
|
||||
// margin-left: auto
|
||||
// .sacrifice-adder-max
|
||||
// margin-left: 12px
|
||||
// color: red
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &:active
|
||||
// color: darken(red, 10%)
|
||||
// transform: scale(1.1)
|
||||
// transition: transform 0s
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user