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

Implement Site component #32

Merged
merged 6 commits into from
Jun 12, 2018
Merged

Implement Site component #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9bf2d8f
update readme.md
isneezy Jun 7, 2018
02ae44c
use vue router
isneezy Jun 7, 2018
9975d84
pull off navigation items from SiteHeaderComponent
isneezy Jun 7, 2018
c45705a
add toogle menu event
isneezy Jun 11, 2018
d3aaebb
update example project
isneezy Jun 11, 2018
f95401d
enable site menu toggling in mobile devices
isneezy Jun 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 50 additions & 181 deletions example/src/App.vue
View file
Open in desktop
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