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
docs/src/.vuepress/theme/layouts/default.vue
+42 -32
View File
@@ -10,46 +10,56 @@ import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
import ReactIcon from '~icons/logos/react' import ReactIcon from '~icons/logos/react'
import GithubIcon from '~icons/carbon/logo-github' import GithubIcon from '~icons/carbon/logo-github'
import DiscordIcon from '~icons/logos/discord-icon' 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> </script>
<template> <template>
<ParentLayout> <XyzTransition appear-visible xyz="fade perspective-1 down ease-out-back duration-10">
<template #navbar-after> <div class="z-99 fixed bottom-6 left-1/2" ref="el" :style="{ marginLeft }">
<div class="flex justify-center items-center ml-4 gap-3"> <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 <a
href="https://github.com/bcakmakoglu/vue-flow" href="https://github.com/bcakmakoglu/vue-flow"
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
aria-label="GitHub" aria-label="GitHub"
class="relative group cursor-pointer flex justify-center items-center" 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" /> <GithubIcon class="text-black dark:text-white text-xl 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"> <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! Contribute on GitHub!
</span> </span>
</a> </a>
<a <a
href="https://discord.gg/F4v6qE4Fuq" href="https://discord.gg/F4v6qE4Fuq"
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
aria-label="Discord" aria-label="Discord"
class="relative group cursor-pointer flex justify-center items-center" 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" /> <DiscordIcon class="text-xl 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"> <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! Join the Discord server!
</span> </span>
</a> </a>
<a <a
href="https://reactflow.dev/" href="https://reactflow.dev/"
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
aria-label="React Flow" aria-label="React Flow"
class="relative group cursor-pointer flex justify-center items-center" 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" /> <ReactIcon class="text-xl 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"> <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! Check out the original React Flow by Wbkd!
</span> </span>
</a> </a>
</div> </div>
</template> </div>
</XyzTransition>
<ParentLayout>
<template #page-bottom> <template #page-bottom>
<div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div> <div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
</template> </template>