Apply transitions to all dropdowns
This commit is contained in:
Vagner
parent
1287a0e9a7
commit
149f0e4767
@ -193,33 +193,35 @@ watch(walletAddress, (): void => {
|
|||||||
src="@/assets/chevronDownBlack.svg"
|
src="@/assets/chevronDownBlack.svg"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-if="selectTokenToggle"
|
<div
|
||||||
class="mt-2 w-[100px] text-gray-900 absolute"
|
v-if="selectTokenToggle"
|
||||||
>
|
class="mt-2 w-[100px] text-gray-900 absolute"
|
||||||
<div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
>
|
||||||
<div
|
<div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
||||||
v-for="token in TokenEnum"
|
<div
|
||||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
v-for="token in TokenEnum"
|
||||||
@click="handleSelectedToken(token)"
|
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||||
>
|
@click="handleSelectedToken(token)"
|
||||||
<img
|
|
||||||
:alt="token + ' logo'"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
:src="getTokenImage(token)"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
|
||||||
>
|
>
|
||||||
{{ token }}
|
<img
|
||||||
</span>
|
:alt="token + ' logo'"
|
||||||
</div>
|
width="20"
|
||||||
<div class="w-full flex justify-center">
|
height="20"
|
||||||
<hr class="w-4/5" />
|
:src="getTokenImage(token)"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||||
|
>
|
||||||
|
{{ token }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-divide py-2 mb-2"></div>
|
<div class="custom-divide py-2 mb-2"></div>
|
||||||
|
|||||||
@ -135,33 +135,35 @@ const handleButtonClick = async (
|
|||||||
src="@/assets/chevronDownBlack.svg"
|
src="@/assets/chevronDownBlack.svg"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-if="selectTokenToggle"
|
<div
|
||||||
class="mt-2 w-[100px] text-gray-900 absolute"
|
v-if="selectTokenToggle"
|
||||||
>
|
class="mt-2 w-[100px] text-gray-900 absolute"
|
||||||
<div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
>
|
||||||
<div
|
<div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
||||||
v-for="token in TokenEnum"
|
<div
|
||||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
v-for="token in TokenEnum"
|
||||||
@click="handleSelectedToken(token)"
|
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||||
>
|
@click="handleSelectedToken(token)"
|
||||||
<img
|
|
||||||
:alt="token + ' logo'"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
:src="getTokenImage(token)"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
|
||||||
>
|
>
|
||||||
{{ token }}
|
<img
|
||||||
</span>
|
:alt="token + ' logo'"
|
||||||
</div>
|
width="20"
|
||||||
<div class="w-full flex justify-center">
|
height="20"
|
||||||
<hr class="w-4/5" />
|
:src="getTokenImage(token)"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||||
|
>
|
||||||
|
{{ token }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -111,79 +111,81 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
Menu
|
Menu
|
||||||
</h1>
|
</h1>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-show="infoMenuOpenToggle"
|
<div
|
||||||
class="mt-10 absolute w-full text-gray-900 lg-view"
|
v-show="infoMenuOpenToggle"
|
||||||
>
|
class="mt-10 absolute w-full text-gray-900 lg-view"
|
||||||
<div class="mt-2">
|
>
|
||||||
<div class="bg-white rounded-md z-10 -left-36 w-52">
|
<div class="mt-2">
|
||||||
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
|
<div class="bg-white rounded-md z-10 -left-36 w-52">
|
||||||
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
|
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
|
||||||
Documentação
|
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
|
||||||
</span>
|
Documentação
|
||||||
</div>
|
</span>
|
||||||
<div class="w-full flex justify-center">
|
</div>
|
||||||
<hr class="w-4/5" />
|
<div class="w-full flex justify-center">
|
||||||
</div>
|
<hr class="w-4/5" />
|
||||||
<RouterLink
|
</div>
|
||||||
:to="'/faq'"
|
<RouterLink
|
||||||
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
:to="'/faq'"
|
||||||
>
|
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
||||||
<span
|
|
||||||
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
|
|
||||||
>
|
>
|
||||||
Perguntas frequentes
|
<span
|
||||||
</span>
|
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
|
||||||
</RouterLink>
|
>
|
||||||
<div class="w-full flex justify-center">
|
Perguntas frequentes
|
||||||
<hr class="w-4/5" />
|
</span>
|
||||||
</div>
|
</RouterLink>
|
||||||
<div
|
<div class="w-full flex justify-center">
|
||||||
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
|
<hr class="w-4/5" />
|
||||||
>
|
</div>
|
||||||
<div class="redirect_button flex mr-4">
|
<div
|
||||||
<div class="mr-6">
|
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
|
||||||
<a href="https://www.twitter.com/doiim">
|
>
|
||||||
<img
|
<div class="redirect_button flex mr-4">
|
||||||
alt="Twitter"
|
<div class="mr-6">
|
||||||
width="20"
|
<a href="https://www.twitter.com/doiim">
|
||||||
height="20"
|
<img
|
||||||
src="@/assets/twitterIcon.svg"
|
alt="Twitter"
|
||||||
class="cursor-pointer"
|
width="20"
|
||||||
/>
|
height="20"
|
||||||
</a>
|
src="@/assets/twitterIcon.svg"
|
||||||
</div>
|
class="cursor-pointer"
|
||||||
<div class="mr-6">
|
/>
|
||||||
<a href="https://www.linkedin.com/company/doiim/">
|
</a>
|
||||||
<img
|
</div>
|
||||||
alt="LinkedIn"
|
<div class="mr-6">
|
||||||
width="20"
|
<a href="https://www.linkedin.com/company/doiim/">
|
||||||
height="20"
|
<img
|
||||||
src="@/assets/linkedinIcon.svg"
|
alt="LinkedIn"
|
||||||
class="cursor-pointer"
|
width="20"
|
||||||
href="https://www.linkedin.com/company/doiim/"
|
height="20"
|
||||||
/>
|
src="@/assets/linkedinIcon.svg"
|
||||||
</a>
|
class="cursor-pointer"
|
||||||
</div>
|
href="https://www.linkedin.com/company/doiim/"
|
||||||
<div class="mr-6">
|
/>
|
||||||
<a href="https://www.github.com/doiim">
|
</a>
|
||||||
<img
|
</div>
|
||||||
alt="Github"
|
<div class="mr-6">
|
||||||
width="20"
|
<a href="https://www.github.com/doiim">
|
||||||
height="20"
|
<img
|
||||||
src="@/assets/githubIcon.svg"
|
alt="Github"
|
||||||
class="cursor-pointer"
|
width="20"
|
||||||
/>
|
height="20"
|
||||||
</a>
|
src="@/assets/githubIcon.svg"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="w-full flex justify-center">
|
||||||
<div class="w-full flex justify-center">
|
<hr class="w-4/5" />
|
||||||
<hr class="w-4/5" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
:to="'/faq'"
|
:to="'/faq'"
|
||||||
@ -246,33 +248,35 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-show="currencyMenuOpenToggle"
|
<div
|
||||||
class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
|
v-show="currencyMenuOpenToggle"
|
||||||
>
|
class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
|
||||||
<div class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
>
|
||||||
<div
|
<div class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
||||||
v-for="(chainData, network) in Networks"
|
<div
|
||||||
class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
|
v-for="(chainData, network) in Networks"
|
||||||
@click="networkChange(network)"
|
class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
|
||||||
>
|
@click="networkChange(network)"
|
||||||
<img
|
>
|
||||||
:alt="chainData.chainName + ' image'"
|
<img
|
||||||
width="20"
|
:alt="chainData.chainName + ' image'"
|
||||||
height="20"
|
width="20"
|
||||||
:src="getNetworkImage(NetworkEnum[network])"
|
height="20"
|
||||||
class="mr-2 ml-1"
|
:src="getNetworkImage(NetworkEnum[network])"
|
||||||
/>
|
class="mr-2 ml-1"
|
||||||
<span class="text-gray-900 font-semibold text-sm">
|
/>
|
||||||
{{ chainData.chainName }}
|
<span class="text-gray-900 font-semibold text-sm">
|
||||||
</span>
|
{{ chainData.chainName }}
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full flex justify-center">
|
<div class="w-full flex justify-center">
|
||||||
<hr class="w-4/5" />
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -322,28 +326,30 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-show="menuOpenToggle"
|
<div
|
||||||
class="mt-10 absolute w-full text-gray-900 lg-view"
|
v-show="menuOpenToggle"
|
||||||
>
|
class="mt-10 absolute w-full text-gray-900 lg-view"
|
||||||
<div class="pl-4 mt-2">
|
>
|
||||||
<div class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
<div class="pl-4 mt-2">
|
||||||
<div class="menu-button" @click="closeMenu()">
|
<div class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
|
||||||
<RouterLink to="/manage_bids" class="redirect_button">
|
<div class="menu-button" @click="closeMenu()">
|
||||||
Gerenciar Ofertas
|
<RouterLink to="/manage_bids" class="redirect_button">
|
||||||
</RouterLink>
|
Gerenciar Ofertas
|
||||||
</div>
|
</RouterLink>
|
||||||
<div class="w-full flex justify-center">
|
</div>
|
||||||
<hr class="w-4/5" />
|
<div class="w-full flex justify-center">
|
||||||
</div>
|
<hr class="w-4/5" />
|
||||||
<div class="menu-button" @click="disconnectUser">
|
</div>
|
||||||
<RouterLink to="/" class="redirect_button">
|
<div class="menu-button" @click="disconnectUser">
|
||||||
Desconectar
|
<RouterLink to="/" class="redirect_button">
|
||||||
</RouterLink>
|
Desconectar
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user