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

update(docs): styling of sidebar and header

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

update(docs): target server generation

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-06 15:42:05 +01:00
parent ea7db92b6e
commit 412a84a898
6 changed files with 46 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/Header.vue
+21 -4
View File
@@ -1,5 +1,5 @@
<template>
<header class="flex items-center py-4 px-8 text-white">
<header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
<div class="flex flex-col">
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
<span class="text-xs text-gray-800 mt-2"
@@ -7,10 +7,27 @@
Based on <a href="https://reactflow.dev">React Flow</a>
</span>
</div>
<div class="flex-1">Docs</div>
<div class="flex-1"><span class="button text-gray-400">Docs</span></div>
<div class="flex-1">
<router-link to="/examples"> Examples </router-link>
<router-link class="link" to="/examples"> Examples</router-link>
</div>
<div class="flex-1"><a href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
<div class="flex-1"><a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
</header>
</template>
<style scoped>
a {
@apply hover:text-gray-300;
}
.logo {
text-decoration: none;
display: block;
line-height: 1;
}
.link {
@apply bg-gray-200 rounded-lg px-4 py-2 !hover:text-yellow-500 text-black;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500;
}
</style>
docs/components/Sidebar.vue
+13 -14
View File
@@ -44,10 +44,13 @@ const examples = [
path: '/interaction',
label: 'Interaction',
},
/*
todo: layouting example not working with dagre for some reason so it's disabled for now
{
path: '/layouting',
label: 'Layouting',
},
*/
{
path: '/multi-flows',
label: 'Multi Flows',
@@ -104,28 +107,24 @@ const examples = [
</script>
<template>
<aside>
<div class="flex flex-col justify-center items-start">
<router-link
v-for="(example, i) of examples"
:key="`example-link-${i}`"
class="example-link"
:to="`/examples${example.path}`"
>
{{ example.label }}
<div class="flex flex-col text-left items-start">
<router-link v-for="(e, i) of examples" :key="`example-link-${i}`" class="example-link" :to="`/examples${e.path}`">
{{ e.label }}
</router-link>
</div>
<slot></slot>
</aside>
</template>
<style>
<style scoped>
.example-link {
@apply text-lg text-white hover:text-black py-2 underline;
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500;
}
aside {
border-right: 1px solid #eee;
padding: 15px 10px;
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 280px; /* Set the width of the sidebar */
@apply w-[280px] h-full px-[10px] py-[15px];
background: rgba(0, 0, 0, 0.25);
overflow-x: hidden; /* Disable horizontal scroll */
}
</style>