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,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>