Added basic global app layout

This commit is contained in:
Thaum
2015-01-07 11:24:26 +00:00
parent 53eb0da24b
commit 078f873219
8 changed files with 111 additions and 21 deletions

View File

@@ -1,5 +1,6 @@
Router.configure({
loadingTemplate: 'loading'
loadingTemplate: 'loading',
layoutTemplate: 'layout'
});
Router.map( function () {

View File

@@ -72,4 +72,8 @@
.blue-grey {
background-color: #607D8B;
}
.white {
background-color: #ffffff;
}

View File

@@ -1,9 +1,7 @@
<template name="stats">
<core-animated-pages selected={{selectedSection}} transitions="hero-transition cross-fade">
<section id="stats">
<div class="abilityFlex">
{{> abilityCards}}
</div>
</section>
<section id="detailContainer">
<div cross-fade id="darkOverlay"></div>

View File

@@ -1,6 +1,7 @@
.card.double {
display: flex;
}
.card.double > div{
vertical-align: top;
padding: 16px;
@@ -15,7 +16,7 @@
border-radius: 2px 0 0 2px;
}
.abilityFlex .card {
#stats .card {
padding: 0;
}

View File

@@ -1,19 +1,30 @@
<template name="characterSheet">
<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
<paper-tab>Stats</paper-tab>
<paper-tab>Features</paper-tab>
<paper-tab>Inventory</paper-tab>
<paper-tab>Spellbook</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Journal</paper-tab>
</paper-tabs>
<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
<swipe-detect touch-action="pan-y">{{> stats}}</swipe-detect>
<swipe-detect touch-action="pan-y">{{> features}}</swipe-detect>
<swipe-detect touch-action="pan-y">inventory</swipe-detect>
<swipe-detect touch-action="pan-y">spellBook</swipe-detect>
<swipe-detect touch-action="pan-y">persona</swipe-detect>
<swipe-detect touch-action="pan-y">journal</swipe-detect>
</core-animated-pages>
<!--<div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>-->
<core-toolbar class="medium-tall">
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div flex>
Name
</div>
<paper-icon-button icon="more-vert" role="button"></paper-icon-button>
<div class="bottom fit" horizontal layout>
<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}}>
<paper-tab>Stats</paper-tab>
<paper-tab>Features</paper-tab>
<paper-tab>Inventory</paper-tab>
<paper-tab>Spellbook</paper-tab>
<paper-tab>Persona</paper-tab>
<paper-tab>Journal</paper-tab>
</paper-tabs>
</div>
</core-toolbar>
<div>
<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right">
<swipe-detect touch-action="pan-y">{{> stats}}</swipe-detect>
<swipe-detect touch-action="pan-y">{{> features}}</swipe-detect>
<swipe-detect touch-action="pan-y">inventory</swipe-detect>
<swipe-detect touch-action="pan-y">spellBook</swipe-detect>
<swipe-detect touch-action="pan-y">persona</swipe-detect>
<swipe-detect touch-action="pan-y">journal</swipe-detect>
</core-animated-pages>
</div>
</template>

View File

@@ -3,7 +3,9 @@
<link rel="import" href="/components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="/components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="/components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-scaffold/core-scaffold.html">
<!--paper components-->
<link rel="import" href="/components/paper-dialog/paper-dialog.html">

View File

@@ -0,0 +1,25 @@
<template name="layout">
<core-drawer-panel>
<core-header-panel drawer navigation flex mode="seamed" class="white">
<core-toolbar>Application</core-toolbar>
<core-menu theme="core-light-theme">
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main navigation flex mode="seamed">
{{> yield}}
</core-header-panel>
</core-drawer-panel>
<paper-action-dialog global-dialog layered backdrop
transition="paper-dialog-transition-bottom"
full-on-mobile>
{{#if globalDialogTemplate}}
{{> UI.dynamic template=globalDialogTemplate data=globalDialogData}}
{{/if}}
</paper-action-dialog>
<paper-toast global-toast></paper-toast>
</template>

View File

@@ -0,0 +1,48 @@
<template name="publicHeader">
<core-toolbar class="toolbar toolbar-primary">
<a class="header-logo" href="/">
<img src="/img/white-logo.png"/>
</a>
<div flex></div>
<div class="visible-md wide">
<div layout horizontal>
{{> headerItems}}
</div>
</div>
<paper-menu-button class="hidden-md narrow">
<paper-icon-button icon="menu" role="button"></paper-icon-button>
<paper-dropdown class="dropdown" halign="right">
<core-menu class="menu">
{{> headerItems}}
</core-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
</template>
<template name="headerItems">
<paper-item class="toolbar-item">
<a href="{{pathFor route='pricing'}}">
Pricing
</a>
</paper-item>
<paper-item class="toolbar-item">
<a href="{{pathFor route='accounts.signUp'}}">
Sign Up
</a>
</paper-item>
<paper-item class="toolbar-item">
<a href="{{pathFor route='accounts.signIn'}}">
Sign In
</a>
</paper-item>
</template>