Skip to content
This repository has been archived by the owner on Nov 30, 2020. It is now read-only.

Commit

Permalink
Implement Site component (#32)
Browse files Browse the repository at this point in the history 
* update readme.md

* use vue router

move Page content from App  to HomPage

* pull off navigation items from SiteHeaderComponent

* add toogle menu event

* update example project

* enable site menu toggling in mobile devices
  • Loading branch information
@isneezy @Nilpo
isneezy authored and Nilpo committed Jun 12, 2018
1 parent b79b4fa commit 7ac054e
Show file tree
Hide file tree
Showing 9 changed files with 263 additions and 245 deletions.
231 changes: 50 additions & 181 deletions example/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,196 +1,65 @@
<template>
<site-wrapper>
<site-header :imageUrl="logoImage"></site-header>

<site-nav></site-nav>

<page title="Dashboard">
<grid-row cards>

<grid-col :key="stat.label" v-for="stat in stats" xs="6" sm="4" lg="2">
<stats-card :movement="stat.movement" :total="stat.total" :label="stat.label"/>
</grid-col>

<grid-col lg="6">
<card>
<card-header title="Development Activity"/>
<t-table cards vertical-align="center">
<table-head>
<table-row>
<table-cel colspan="2" header>User</table-cel>
<table-cel header>Commit</table-cel>
<table-cel header>Date</table-cel>
<table-cel header></table-cel>
</table-row>
</table-head>
<table-body>
<table-row>
<table-cel class="w-1"><avatar image-url="/static/demo/faces/male/9.jpg"/></table-cel>
<table-cel>Ronald Bardley</table-cel>
<table-cel>Initial commit</table-cel>
<table-cel class="text-norwap">May 6, 2018</table-cel>
<table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
</table-row>
<table-row>
<table-cel class="w-1"><avatar image-url="/static/demo/faces/female/1.jpg"/></table-cel>
<table-cel>Beverly Armstrong</table-cel>
<table-cel>Left sidebar adjustments</table-cel>
<table-cel class="text-norwap">Apirl 15, 2018</table-cel>
<table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
</table-row>
<table-row>
<table-cel class="w-1"><avatar image-url="/static/demo/faces/male/4.jpg"/></table-cel>
<table-cel>Boddy Knight</table-cel>
<table-cel>Topbar dropdown style</table-cel>
<table-cel class="text-norwap">Apirl 8, 2018</table-cel>
<table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
</table-row>
<table-row>
<table-cel class="w-1"><avatar image-url="/static/demo/faces/female/11.jpg"/></table-cel>
<table-cel>Sharon Wells</table-cel>
<table-cel>Fixes #625</table-cel>
<table-cel class="text-norwap">Apirl 9, 2018</table-cel>
<table-cel class="w-1"><a href="#" class="icon"><i class="fe fe-trash"></i></a></table-cel>
</table-row>
</table-body>
</t-table>
</card>
</grid-col>

<grid-col lg="6">
<alert type="primary">Are you in trouble? <alert-link to="/documentation" label="Read our documentation"/> with code samples.</alert>

<grid-row>
<grid-col sm="6">
<card title="Chart title"></card>
</grid-col>

<grid-col sm="6">
<card title="Chart title"></card>
</grid-col>

<grid-col sm="6">
<progress-card title="New feedback" total="62" :progress="68" progress-color="red"/>
</grid-col>
<grid-col sm="6">
<progress-card title="Today profit" total="$652" :progress="84"/>
</grid-col>
</grid-row>
</grid-col>

<grid-col sm="6" lg="3">
<stamp-card icon="dollar-sign" footer="12 waiting payments"><a href="#">132 <small>Sales</small></a></stamp-card>
</grid-col>
<grid-col sm="6" lg="3">
<stamp-card color="green" icon="shopping-cart" footer="32 shipped"><a href="#">78 <small>Orders</small></a></stamp-card>
</grid-col>
<grid-col sm="6" lg="3">
<stamp-card color="red" icon="users" footer="163 registered today"><a href="#">1352 <small>Members</small></a></stamp-card>
</grid-col>
<grid-col sm="6" lg="3">
<stamp-card color="yellow" icon="message-square" footer="16 waiting"><a href="#">132 <small>Comments</small></a></stamp-card>
</grid-col>
</grid-row>

<grid-row cards>
<grid-col xs="12">
<card>
<t-table responsive hover cards outline vertical-align="center" className="text-nowrap">
<table-head>
<table-row>
<table-cel header class="text-center w-1"></table-cel>
<table-cel header>User</table-cel>
<table-cel header>Usage</table-cel>
<table-cel header class="text-center">Payment</table-cel>
<table-cel header>Activity</table-cel>
<table-cel header class="text-center">Satisfaction</table-cel>
<table-cel header class="text-center"></table-cel>
</table-row>
</table-head>
<table-body>
<table-row>
<table-cel class="text-center">
<avatar image-url="/static/demo/faces/female/26.jpg" status-color="green"/>
</table-cel>
<table-cel>
<div>Elizabeth Martin</div>
<div class="small text-muted">Registered: Mar 19, 2018</div>
</table-cel>

<table-cel>
<div class="clearfix">
<div class="float-left">
<strong>42%</strong>
</div>
<div class="float-right">
<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<progress-bar size="xs" color="yellow" :progress="42" />
</table-cel>

<table-cel class="text-center">
<i class="payment payment-visa"></i>
</table-cel>

<table-cel>
<div class="small text-muted">Last login</div>
<div>4 minutes ago</div>
</table-cel>

<table-cel class="text-center">
<div class="mx-auto chart-circle chart-circle-xs" data-value="0.42" data-thickness="3" data-color="blue">
<div class="chart-circle-value">42%</div>
</div>
</table-cel>

<table-cel>
<dropdown position="right" class="item-action">
<template slot="dropdown-toggle">
<a href="javascript:void(0)" class="icon"><i class="fe fe-more-vertical"></i></a>
</template>
<dropdown-menu-item label="Hello"/>
</dropdown>
</table-cel>
</table-row>
</table-body>
</t-table>
</card>
</grid-col>
</grid-row>
</page>

</site-wrapper>
<site-wrapper>
<site-header @toggle-menu="toggleMenu" imageUrl="/static/demo/brand/tabler.svg">
<div class="nav-item">
<t-button :outline="true" size="sm" href="https://github.com/tabler/tabler-vue"
target="_blank">Source code
</t-button>
</div>
<notifications/>
<account-dropdown imageUrl="/static/demo/faces/female/25.jpg" title="Jane Pearson" subtitle="Administrator" />
</site-header>
<site-nav :collapsed="menuCollapsed">
<nav-item to="/" icon="home" label="Home"/>
<nav-item to="/interface" icon="box" label="Interface">
<dropdown-menu-item label="Cards design"/>
<dropdown-menu-item label="Charts"/>
<dropdown-menu-item label="Pricing cards"/>
</nav-item>
<nav-item to="/pages" icon="calendar" label="Components">
<dropdown-menu-item label="Maps"/>
<dropdown-menu-item label="Icons"/>
<dropdown-menu-item label="Blog"/>
<dropdown-menu-item label="Carousel"/>
</nav-item>
<nav-item to="/pages" icon="file" label="Pages">
<dropdown-menu-item label="Profile"/>
<dropdown-menu-item label="Login"/>
<dropdown-menu-item label="Register"/>
<dropdown-menu-item label="Forgot password"/>
<dropdown-menu-item label="400 error"/>
<dropdown-menu-item label="401 error"/>
<dropdown-menu-item label="403 error"/>
<dropdown-menu-item label="404 error"/>
<dropdown-menu-item label="500 error"/>
<dropdown-menu-item label="503 error"/>
<dropdown-menu-item label="Email"/>
<dropdown-menu-item label="Empty page"/>
<dropdown-menu-item label="RTL mode"/>
</nav-item>
<nav-item to="/" icon="check-square" label="Forms"/>
<nav-item to="/" icon="image" label="Gallery"/>
<nav-item to="/" icon="file-text" label="Documentation"/>
</site-nav>
<router-view/>
</site-wrapper>
</template>

<script>
import Logo from './assets/demo/brand/tabler.svg'
export default {
name: 'App',
data: () => ({
stats: [
{label: 'New Tickets', movement: 6, total: 43},
{label: 'Closed Today', movement: -3, total: 17},
{label: 'New Replies', movement: 9, total: 7},
{label: 'Followers', movement: 3, total: '27.3K'},
{label: 'Daily Earnings', movement: -2, total: '$95'},
{label: 'Products', movement: -1, total: 621}
],
process: [
{label: 'New feedback', movement: 6, total: 62},
{label: 'Today profit', movement: -3, total: '$652'}
]
menuCollapsed: true
}),
computed: {
logoImage () {
return Logo
methods: {
toggleMenu() {
this.menuCollapsed = !this.menuCollapsed
}
}
}
</script>

<style>
@import "../../dist/css/dashboard.css";
/**./assets/logo.png**/
@import "../../dist/css/dashboard.css";
/**./assets/logo.png**/
</style>
Loading

0 comments on commit 7ac054e

Please sign in to comment.