Merge commit 'b61dfb2de05e494b66ffd1f99da8f8594782764c' into fix-token-dropdowns
This commit is contained in:
Filipe Soccol
@@ -113,82 +113,7 @@ onClickOutside(infoMenuRef, () => {
|
||||
|
||||
<div class="flex sm:gap-4 gap-2 items-center">
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
v-show="infoMenuOpenToggle"
|
||||
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
|
||||
>
|
||||
<div class="mt-2">
|
||||
<div class="bg-white rounded-md z-10 -left-32 w-52">
|
||||
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
|
||||
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
|
||||
Documentação
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<RouterLink
|
||||
: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>
|
||||
</RouterLink>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<div
|
||||
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
|
||||
>
|
||||
<div class="redirect_button">
|
||||
<a
|
||||
href="https://www.twitter.com/doiim"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<TwitterIcon
|
||||
alt="Twitter"
|
||||
width="20"
|
||||
height="20"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/company/doiim/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<LinkedinIcon
|
||||
alt="LinkedIn"
|
||||
width="20"
|
||||
height="20"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.github.com/doiim"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<GithubIcon
|
||||
alt="Github"
|
||||
width="20"
|
||||
height="20"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<button
|
||||
ref="infoMenuRef"
|
||||
class="default-button hidden md:inline-block cursor-pointer"
|
||||
@click="
|
||||
@@ -200,16 +125,93 @@ onClickOutside(infoMenuRef, () => {
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="text-gray-50 font-semibold sm:text-base"
|
||||
class="topbar-text topbar-link"
|
||||
:style="{
|
||||
'border-bottom': infoMenuOpenToggle
|
||||
? '2px solid white'
|
||||
: 'transparent',
|
||||
: '2px solid transparent',
|
||||
}"
|
||||
>
|
||||
Menu
|
||||
</h1>
|
||||
</div>
|
||||
</button>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
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="menu-button gap-2 px-4 rounded-md cursor-pointer">
|
||||
<span
|
||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||
>
|
||||
Documentação
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<RouterLink
|
||||
: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>
|
||||
</RouterLink>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<div
|
||||
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
|
||||
>
|
||||
<div class="redirect_button flex mr-4">
|
||||
<div class="mr-6">
|
||||
<a href="https://www.twitter.com/doiim">
|
||||
<img
|
||||
alt="Twitter"
|
||||
width="20"
|
||||
height="20"
|
||||
src="@/assets/twitterIcon.svg"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mr-6">
|
||||
<a href="https://www.linkedin.com/company/doiim/">
|
||||
<img
|
||||
alt="LinkedIn"
|
||||
width="20"
|
||||
height="20"
|
||||
src="@/assets/linkedinIcon.svg"
|
||||
class="cursor-pointer"
|
||||
href="https://www.linkedin.com/company/doiim/"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mr-6">
|
||||
<a href="https://www.github.com/doiim">
|
||||
<img
|
||||
alt="Github"
|
||||
width="20"
|
||||
height="20"
|
||||
src="@/assets/githubIcon.svg"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="'/faq'"
|
||||
@@ -220,21 +222,26 @@ onClickOutside(infoMenuRef, () => {
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="sellerView ? '/' : '/seller'"
|
||||
class="default-button sm:whitespace-normal whitespace-nowrap hidden md:inline-block"
|
||||
class="default-button sm:whitespace-normal whitespace-nowrap lg-view w-40 sm:w-44 md:w-36"
|
||||
>
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
<div class="topbar-text topbar-link text-center mx-auto inline-block">
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="sellerView ? '/' : '/seller'"
|
||||
v-if="!walletAddress"
|
||||
class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden"
|
||||
class="default-button sm:whitespace-normal whitespace-nowrap sm-view w-40 sm:w-44 md:w-36"
|
||||
>
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
<div class="topbar-text topbar-link text-center mx-auto inline-block">
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<div class="flex flex-col" v-if="walletAddress">
|
||||
<div class="flex flex-col relative" v-if="walletAddress">
|
||||
<div
|
||||
ref="currencyRef"
|
||||
class="group top-bar-info cursor-pointer h-10"
|
||||
class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
|
||||
:class="{ 'bg-gray-50': currencyMenuOpenToggle }"
|
||||
@click="
|
||||
[
|
||||
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
|
||||
@@ -249,25 +256,36 @@ onClickOutside(infoMenuRef, () => {
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span class="default-text hidden md:inline-block">
|
||||
<span
|
||||
class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
|
||||
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||
>
|
||||
{{ Networks[etherStore.networkName].chainName }}
|
||||
</span>
|
||||
<ChevronDown
|
||||
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
|
||||
<div
|
||||
class="transition-all duration-500 ease-in-out mt-1"
|
||||
:class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
|
||||
alt="Chevron Down"
|
||||
/>
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
class="h-4 w-4 text-white group-hover:text-gray-900"
|
||||
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||
>
|
||||
<use href="@/assets/chevron.svg#chevronDown"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="currencyMenuOpenToggle"
|
||||
class="mt-10 pl-3 absolute w-full text-gray-900 hidden md:inline-block"
|
||||
>
|
||||
<div class="mt-2">
|
||||
<div class="bg-white rounded-md z-10">
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
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
|
||||
v-for="(chainData, network) in Networks"
|
||||
:key="network"
|
||||
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
||||
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
|
||||
@@ -275,8 +293,9 @@ onClickOutside(infoMenuRef, () => {
|
||||
width="20"
|
||||
height="20"
|
||||
:src="getNetworkImage(NetworkEnum[network])"
|
||||
class="mr-2 ml-1"
|
||||
/>
|
||||
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
|
||||
<span class="text-gray-900 font-semibold text-sm">
|
||||
{{ chainData.chainName }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -285,7 +304,7 @@ onClickOutside(infoMenuRef, () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@@ -304,10 +323,11 @@ onClickOutside(infoMenuRef, () => {
|
||||
Conectar
|
||||
</button>
|
||||
<div v-if="walletAddress" class="account-info">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col relative">
|
||||
<div
|
||||
ref="walletAddressRef"
|
||||
class="top-bar-info cursor-pointer h-10"
|
||||
class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
|
||||
:class="{ 'bg-gray-50': menuOpenToggle }"
|
||||
@click="
|
||||
[
|
||||
(menuOpenToggle = !menuOpenToggle),
|
||||
@@ -316,41 +336,52 @@ onClickOutside(infoMenuRef, () => {
|
||||
]
|
||||
"
|
||||
>
|
||||
<Account alt="Account image" />
|
||||
<span class="default-text">
|
||||
<img alt="Account image" src="@/assets/account.svg" />
|
||||
<span
|
||||
class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
|
||||
:class="{ '!text-gray-900': menuOpenToggle }"
|
||||
>
|
||||
{{ formatWalletAddress() }}
|
||||
</span>
|
||||
<ChevronDown
|
||||
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
|
||||
<div
|
||||
class="transition-all duration-500 ease-in-out mt-1"
|
||||
:class="{ 'scale-y-[-1]': menuOpenToggle }"
|
||||
alt="Chevron Down"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="menuOpenToggle"
|
||||
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
|
||||
>
|
||||
<div class="pl-4 mt-2">
|
||||
<div class="bg-white rounded-md z-10">
|
||||
<RouterLink
|
||||
onclick="closeMenu()"
|
||||
to="/manage_bids"
|
||||
class="redirect_button menu-button"
|
||||
>
|
||||
Gerenciar Ofertas
|
||||
</RouterLink>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<button
|
||||
onclick="disconnectUser()"
|
||||
class="redirect_button menu-button"
|
||||
>
|
||||
Desconectar
|
||||
</button>
|
||||
</div>
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
class="h-4 w-4 text-white group-hover:text-gray-900"
|
||||
:class="{ '!text-gray-900': menuOpenToggle }"
|
||||
>
|
||||
<use href="@/assets/chevron.svg#chevronDown"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
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="menu-button" @click="closeMenu()">
|
||||
<RouterLink to="/manage_bids" class="redirect_button">
|
||||
Gerenciar Ofertas
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="w-full flex justify-center">
|
||||
<hr class="w-4/5" />
|
||||
</div>
|
||||
<div class="menu-button" @click="disconnectUser">
|
||||
<RouterLink to="/" class="redirect_button">
|
||||
Desconectar
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -450,6 +481,13 @@ header {
|
||||
@apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
|
||||
}
|
||||
|
||||
.topbar-text {
|
||||
@apply text-gray-50 font-semibold sm:text-base mt-0.5 transition-all duration-500;
|
||||
}
|
||||
.topbar-link {
|
||||
@apply mt-0.5 hover:border-b-2 border-b-2 border-transparent hover:!border-white;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
@apply flex items-center gap-6;
|
||||
}
|
||||
@@ -459,7 +497,7 @@ header {
|
||||
}
|
||||
|
||||
.top-bar-info {
|
||||
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
|
||||
@apply flex justify-between items-center gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
|
||||
}
|
||||
|
||||
.redirect_button {
|
||||
@@ -474,9 +512,26 @@ a:hover {
|
||||
@apply bg-gray-200 rounded;
|
||||
}
|
||||
|
||||
.lg-view {
|
||||
display: inline-block;
|
||||
}
|
||||
.sm-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
margin-top: 1400px;
|
||||
bottom: 0px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.lg-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm-view {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user