alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(docs): move icons into floating container

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-25 01:53:08 +02:00
parent 1f11365e34
commit 3ea735558f
1 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/src/.vuepress/theme/layouts/default.vue
View File

@@ -10,46 +10,56 @@ import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
import ReactIcon from '~icons/logos/react'
import GithubIcon from '~icons/carbon/logo-github'
import DiscordIcon from '~icons/logos/discord-icon'
const el = ref()
const marginLeft = ref()
onMounted(() => {
const bbox = el.value.getBoundingClientRect()
marginLeft.value = `-${bbox.width / 2}px`
})
</script>
<template>
<ParentLayout>
<template #navbar-after>
<div class="flex justify-center items-center ml-4 gap-3">
<a
href="https://github.com/bcakmakoglu/vue-flow"
target="_blank" rel="noopener noreferrer"
aria-label="GitHub"
class="relative group cursor-pointer flex justify-center items-center"
>
<GithubIcon class="text-black dark:text-white text-lg lg:text-2xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
<XyzTransition appear-visible xyz="fade perspective-1 down ease-out-back duration-10">
<div class="z-99 fixed bottom-6 left-1/2" ref="el" :style="{ marginLeft }">
<div class="bg-white flex justify-center items-center mx-2 gap-6 border-1 border-gray-500 px-4 py-2 rounded-lg shadow-lg">
<a
href="https://github.com/bcakmakoglu/vue-flow"
target="_blank" rel="noopener noreferrer"
aria-label="GitHub"
class="relative group cursor-pointer flex justify-center items-center"
>
<GithubIcon class="text-black dark:text-white text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
Contribute on GitHub!
</span>
</a>
<a
href="https://discord.gg/F4v6qE4Fuq"
target="_blank" rel="noopener noreferrer"
aria-label="Discord"
class="relative group cursor-pointer flex justify-center items-center"
>
<DiscordIcon class="text-lg lg:text-2xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
</a>
<a
href="https://discord.gg/F4v6qE4Fuq"
target="_blank" rel="noopener noreferrer"
aria-label="Discord"
class="relative group cursor-pointer flex justify-center items-center"
>
<DiscordIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
Join the Discord server!
</span>
</a>
<a
href="https://reactflow.dev/"
target="_blank" rel="noopener noreferrer"
aria-label="React Flow"
class="relative group cursor-pointer flex justify-center items-center"
>
<ReactIcon class="text-lg lg:text-2xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 text-xs">
</a>
<a
href="https://reactflow.dev/"
target="_blank" rel="noopener noreferrer"
aria-label="React Flow"
class="relative group cursor-pointer flex justify-center items-center"
>
<ReactIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
<span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
Check out the original React Flow by Wbkd!
</span>
</a>
</div>
</template>
</a>
</div>
</div>
</XyzTransition>
<ParentLayout>
<template #page-bottom>
<div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
</template>