Add navigation to vue, improve responsiveness of the design
This commit is contained in:
Dane Everitt
parent
be5a9108f9
commit
ee9a34716d
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
Pterodactyl
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'dashboard' }">
|
||||
<server-icon aria-label="Server dashboard"/>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'account' }">
|
||||
<user-icon aria-label="Profile management"/>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="this.route('admin.index')">
|
||||
<settings-icon aria-label="Administrative controls"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="this.route('auth.logout')">
|
||||
<log-out-icon aria-label="Sign out"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'navigation',
|
||||
components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon }
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,26 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<flash container="mt-4"/>
|
||||
<div class="server-search animate fadein">
|
||||
<input type="text"
|
||||
:placeholder="$t('dashboard.index.search')"
|
||||
@input="onChange"
|
||||
v-model="search"
|
||||
ref="search"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="this.loading" class="my-4 animate fadein">
|
||||
<div class="text-center h-16">
|
||||
<span class="spinner spinner-xl"></span>
|
||||
<navigation/>
|
||||
<div class="container">
|
||||
<flash container="mt-4"/>
|
||||
<div class="server-search animate fadein">
|
||||
<input type="text"
|
||||
:placeholder="$t('dashboard.index.search')"
|
||||
@input="onChange"
|
||||
v-model="search"
|
||||
ref="search"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="this.loading" class="my-4 animate fadein">
|
||||
<div class="text-center h-16">
|
||||
<span class="spinner spinner-xl"></span>
|
||||
</div>
|
||||
</div>
|
||||
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
|
||||
<server-box
|
||||
v-for="(server, index) in servers.models"
|
||||
v-bind:key="index"
|
||||
v-bind:server="server"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
|
||||
<server-box
|
||||
v-for="(server, index) in servers.models"
|
||||
v-bind:key="index"
|
||||
v-bind:server="server"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,10 +33,11 @@
|
|||
import _ from 'lodash';
|
||||
import Flash from '../Flash';
|
||||
import ServerBox from './ServerBox';
|
||||
import Navigation from '../core/Navigation';
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: { ServerBox, Flash },
|
||||
components: { Navigation, ServerBox, Flash },
|
||||
data: function () {
|
||||
return {
|
||||
backgroundedAt: DateTime.local(),
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export const routes = [
|
|||
}
|
||||
},
|
||||
|
||||
{ name : 'index', path: '/', component: Dashboard },
|
||||
{ name : 'dashboard', path: '/', component: Dashboard },
|
||||
{ name : 'account', path: '/account', component: Account },
|
||||
{ name : 'account.api', path: '/account/api', component: Account },
|
||||
{ name : 'account.security', path: '/account/security', component: Account },
|
||||
|
|
|
|||
|
|
@ -49,11 +49,7 @@ code {
|
|||
@apply .pb-4;
|
||||
|
||||
@screen smx {
|
||||
@apply .w-1/2 .pr-4;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
padding-right: 0;
|
||||
}
|
||||
@apply .w-full;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
|
|
|
|||
|
|
@ -4,11 +4,18 @@
|
|||
|
||||
& > .logo {
|
||||
@apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@screen xsx {
|
||||
@apply .hidden
|
||||
}
|
||||
}
|
||||
|
||||
& > .menu {
|
||||
@apply .float-right .mx-8 .inline-block;
|
||||
|
||||
& > ul {
|
||||
@apply .list-reset;
|
||||
& > li {
|
||||
|
|
@ -19,10 +26,21 @@
|
|||
|
||||
&:hover {
|
||||
@apply .bg-blue-dark;
|
||||
}
|
||||
|
||||
& .feather {
|
||||
@apply .h-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@screen xsx {
|
||||
@apply .w-full .text-center;
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
@apply .float-right .mx-8 .inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,5 +25,11 @@
|
|||
* Assorted Other CSS
|
||||
*/
|
||||
body {
|
||||
@apply .font-sans;
|
||||
@apply .font-sans;
|
||||
}
|
||||
|
||||
.container {
|
||||
@screen xsx {
|
||||
@apply .px-2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,8 @@
|
|||
@extends('templates/wrapper')
|
||||
|
||||
@section('above-container')
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
Pterodactyl
|
||||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Your Servers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Admin</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>dane</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('auth.logout') }}">
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('container')
|
||||
<router-view></router-view>
|
||||
<div class="w-full m-auto mt-0">
|
||||
<div class="w-full m-auto mt-0 container">
|
||||
<p class="text-right text-grey-dark text-xs">
|
||||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,13 @@
|
|||
@include('layouts.scripts')
|
||||
</head>
|
||||
<body class="{{ $css['body'] ?? 'bg-grey-lighter' }}">
|
||||
@yield('above-container')
|
||||
<div class="container" id="pterodactyl">
|
||||
@yield('container')
|
||||
</div>
|
||||
@yield('below-container')
|
||||
@section('content')
|
||||
@yield('above-container')
|
||||
<div id="pterodactyl">
|
||||
@yield('container')
|
||||
</div>
|
||||
@yield('below-container')
|
||||
@show
|
||||
@section('scripts')
|
||||
{!! $asset->js('assets/scripts/bundle.js') !!}
|
||||
@show
|
||||
|
|
|
|||
|
|
@ -172,6 +172,7 @@ module.exports = {
|
|||
'lg': '992px',
|
||||
'xl': '1200px',
|
||||
|
||||
'xsx': {'max': '575px'},
|
||||
'smx': {'max': '767px'},
|
||||
'mdx': {'max': '991px'},
|
||||
'lgx': {'max': '1999px'},
|
||||
|
|
|
|||
Loading…
Reference in New Issue