mirror of
https://github.com/ZeppelinBot/Zeppelin.git
synced 2025-05-10 12:25:02 +00:00
Update dashboard side to tailwindcss
This commit is contained in:
parent
577500af92
commit
3bd485e7e4
11 changed files with 183 additions and 172 deletions
|
@ -1,46 +1,47 @@
|
|||
<template>
|
||||
<div class="docs">
|
||||
<div class="container mx-auto px-4 py-2">
|
||||
<!-- Top bar -->
|
||||
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
|
||||
<div class="flex-initial flex items-center">
|
||||
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||
<h1 class="flex-auto">Zeppelin Documentation</h1>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
role="menuitem"
|
||||
class="py-1 px-2 rounded hover:bg-gray-700">
|
||||
Go to dashboard
|
||||
</router-link>
|
||||
<div class="docs container mx-auto px-4 py-2">
|
||||
<!-- Top bar -->
|
||||
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
|
||||
<div class="flex-initial flex items-center">
|
||||
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||
|
||||
<router-link to="/docs">
|
||||
<h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
role="menuitem"
|
||||
class="py-1 px-2 rounded hover:bg-gray-700">
|
||||
Go to dashboard
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- WIP bar -->
|
||||
<div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
|
||||
<i class="mdi mdi-alert mr-1" title="Note"></i>
|
||||
This documentation is a work in progress.
|
||||
</div>
|
||||
|
||||
<!-- Content wrapper -->
|
||||
<div class="flex items-start mt-8">
|
||||
<!-- Sidebar -->
|
||||
<nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
|
||||
<div role="none" v-for="(group, index) in menu">
|
||||
<h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
|
||||
<ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
|
||||
<li role="none" v-for="item in group.items">
|
||||
<router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- WIP bar -->
|
||||
<div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
|
||||
<i class="mdi mdi-alert mr-1" title="Note"></i>
|
||||
This documentation is a work in progress.
|
||||
</div>
|
||||
|
||||
<!-- Content wrapper -->
|
||||
<div class="flex items-start mt-8">
|
||||
<!-- Sidebar -->
|
||||
<nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
|
||||
<div role="none" v-for="(group, index) in menu">
|
||||
<h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
|
||||
<ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
|
||||
<li role="none" v-for="item in group.items">
|
||||
<router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="docs-content flex-auto overflow-x-hidden">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="docs-content main-content flex-auto overflow-x-hidden">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue