Got some Polymer 1.0 elements working with 1.4
Character sheets now visible, but vulcanize broke, using raw head imports instead
This commit is contained in:
Stefan Zermatten
@@ -1,33 +1,47 @@
|
||||
<template name="layout">
|
||||
<core-drawer-panel class="layout" responsiveWidth="905px" disableSwipe>
|
||||
<core-header-panel drawer navigation flex mode="seamed" class="white">
|
||||
<div id="accountSummary">
|
||||
{{#if currentUser}}
|
||||
<div id="profileLink"
|
||||
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
|
||||
{{profileLink}}
|
||||
</div>
|
||||
{{else}}
|
||||
<a href="/sign-in" style="color: white;">Sign in</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="navPanel">
|
||||
<core-item id="homeNav" icon="home" label="Home"></core-item>
|
||||
{{> characterSideList}}
|
||||
<core-item id="guide" icon="social:school" label="Guide"></core-item>
|
||||
<core-item id="feedback" icon="bug-report" label="Send Feedback"></core-item>
|
||||
<core-item id="changeLog" icon="list" label="Change Log"></core-item>
|
||||
</div>
|
||||
</core-header-panel>
|
||||
<core-animated-pages main
|
||||
<app-drawer-layout class="layout" responsiveWidth="905px" fullbleed>
|
||||
<app-drawer>
|
||||
<app-header-layout mode="seamed" class="white">
|
||||
<div id="accountSummary">
|
||||
{{#if currentUser}}
|
||||
<div id="profileLink"
|
||||
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
|
||||
{{profileLink}}
|
||||
</div>
|
||||
{{else}}
|
||||
<a href="/sign-in" style="color: white;">Sign in</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="navPanel">
|
||||
<paper-icon-item id="homeNav" icon="home">
|
||||
<iron-icon icon="home" item-icon></iron-icon>
|
||||
Home
|
||||
</paper-icon-item>
|
||||
{{> characterSideList}}
|
||||
<paper-icon-item id="guide">
|
||||
<iron-icon icon="social:school" item-icon></iron-icon>
|
||||
Guide
|
||||
</paper-icon-item>
|
||||
<paper-icon-item id="feedback">
|
||||
<iron-icon icon="bug-report" item-icon></iron-icon>
|
||||
Send Feedback
|
||||
</paper-icon-item>
|
||||
<paper-icon-item id="changeLog">
|
||||
<iron-icon icon="list" item-icon></iron-icon>
|
||||
Change Log
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
</app-drawer>
|
||||
<neon-animated-pages class="fit"
|
||||
navigation
|
||||
detail-pages
|
||||
transitions="hero-transition cross-fade"
|
||||
selected={{globalDetailSelected}}>
|
||||
<section id="mainContentSection" class={{notSelected}}>
|
||||
<core-header-panel fit mode="standard">
|
||||
<app-header-layout fullbleed>
|
||||
{{> yield}}
|
||||
</core-header-panel>
|
||||
</app-header-layout>
|
||||
<div>
|
||||
<div id="fadeDummy" cross-fade></div>
|
||||
</div>
|
||||
@@ -35,27 +49,26 @@
|
||||
<section id="detailSection">
|
||||
<div id="detailScreenFiller">
|
||||
<div id="screenDim" cross-fade></div>
|
||||
<paper-shadow id="globalDetail" class="card" z="5"
|
||||
<paper-material id="globalDetail" class="card" z="5"
|
||||
animated hero hero-id="main"
|
||||
layout vertical>
|
||||
{{#if globalDetailTemplate}}
|
||||
{{> UI.dynamic template=globalDetailTemplate data=globalDetailData}}
|
||||
{{/if}}
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
</core-drawer-panel>
|
||||
</neon-animated-pages>
|
||||
</app-drawer-layout>
|
||||
|
||||
<paper-action-dialog global-dialog backdrop
|
||||
transition="core-transition-center"
|
||||
<paper-dialog global-dialog backdrop
|
||||
class="scrolling {{#if globalDialogFullOnMobile}}full-on-mobile{{/if}}"
|
||||
heading={{globalDialogHeader}}
|
||||
layered>
|
||||
{{#if globalDialogTemplate}}
|
||||
{{> UI.dynamic template=globalDialogTemplate data=globalDialogData}}
|
||||
{{/if}}
|
||||
</paper-action-dialog>
|
||||
</paper-dialog>
|
||||
|
||||
<paper-toast global-toast duration="5000">
|
||||
{{#if globalToastTemplate}}
|
||||
|
||||
@@ -20,14 +20,22 @@ Template.layout.helpers({
|
||||
},
|
||||
});
|
||||
|
||||
let drawerLayout;
|
||||
const closeDrawer = function(instance){
|
||||
if (!drawerLayout) drawerLayout = instance.find("app-drawer-layout");
|
||||
if (drawerLayout && drawerLayout.narrow){
|
||||
drawerLayout.drawer.close();
|
||||
}
|
||||
}
|
||||
|
||||
Template.layout.events({
|
||||
"tap #homeNav": function(event, instance){
|
||||
Router.go("/");
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
closeDrawer(instance);
|
||||
},
|
||||
"tap #profileLink": function(event, instance){
|
||||
Router.go("profile");
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
closeDrawer(instance);
|
||||
},
|
||||
"tap #feedback": function(event, instance) {
|
||||
GlobalUI.showDialog({
|
||||
@@ -35,14 +43,14 @@ Template.layout.events({
|
||||
template: "feedback",
|
||||
fullOnMobile: true,
|
||||
});
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
closeDrawer(instance);
|
||||
},
|
||||
"tap #changeLog": function(event, instance) {
|
||||
Router.go("changeLog");
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
closeDrawer(instance);
|
||||
},
|
||||
"tap #guide": function(event, instance) {
|
||||
Router.go("guide");
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
closeDrawer(instance);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<!--core components-->
|
||||
<link rel="import" href="/components/core-animated-pages/core-animated-pages.html">
|
||||
<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-icons/av-icons.html">
|
||||
<link rel="import" href="/components/core-icons/core-icons.html">
|
||||
<link rel="import" href="/components/core-icons/editor-icons.html">
|
||||
<link rel="import" href="/components/core-icons/image-icons.html">
|
||||
<link rel="import" href="/components/core-icons/social-icons.html">
|
||||
<link rel="import" href="/components/core-image/core-image.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">
|
||||
<link rel="import" href="/components/core-transition/core-transition.html">
|
||||
|
||||
<!--paper components-->
|
||||
<link rel="import" href="/components/paper-button/paper-button.html">
|
||||
<link rel="import" href="/components/paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="/components/paper-dialog/paper-action-dialog.html">
|
||||
<link rel="import" href="/components/paper-dialog/paper-dialog.html">
|
||||
<link rel="import" href="/components/paper-dialog/paper-dialog-transition.html">
|
||||
<link rel="import" href="/components/paper-fab/paper-fab.html">
|
||||
<link rel="import" href="/components/paper-fab-menu/paper-fab-menu.html">
|
||||
<link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="/components/paper-input/paper-autogrow-textarea.html">
|
||||
<link rel="import" href="/components/paper-input/paper-input.html">
|
||||
<link rel="import" href="/components/paper-input/paper-input-decorator.html">
|
||||
<link rel="import" href="/components/paper-item/paper-item.html">
|
||||
<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
|
||||
<link rel="import" href="/components/paper-radio-button/paper-radio-button.html">
|
||||
<link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
|
||||
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
|
||||
<link rel="import" href="/components/paper-spinner/paper-spinner.html">
|
||||
<link rel="import" href="/components/paper-slider/paper-slider.html">
|
||||
<link rel="import" href="/components/paper-tabs/paper-tabs.html">
|
||||
<link rel="import" href="/components/paper-toast/paper-toast.html">
|
||||
<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">
|
||||
|
||||
<!--custom components-->
|
||||
<link rel="import" href="/custom_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||
<link rel="import" href="/custom_components/paper-dropdown/paper-dropdown.html">
|
||||
<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
|
||||
36
rpg-docs/client/views/layout/polymerImports.html
Normal file
36
rpg-docs/client/views/layout/polymerImports.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<head>
|
||||
<script>
|
||||
/* this script must run before Polymer is imported */
|
||||
window.Polymer = {
|
||||
dom: 'shadow',
|
||||
lazyRegister: true
|
||||
};
|
||||
</script>
|
||||
<link rel="import" href="/components/app-layout/app-layout.html">
|
||||
|
||||
<link rel="import" href="/components/iron-icon/iron-icon.html">
|
||||
<!--<link rel="import" href="/components/iron-icons/av-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/communication-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/device-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/editor-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/hardware-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/image-icons.html">-->
|
||||
<link rel="import" href="/components/iron-icons/iron-icons.html">
|
||||
<!--<link rel="import" href="/components/iron-icons/maps-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/notification-icons.html">-->
|
||||
<!--<link rel="import" href="/components/iron-icons/places-icons.html">-->
|
||||
<link rel="import" href="/components/iron-icons/social-icons.html">
|
||||
|
||||
<link rel="import" href="/components/neon-animation/neon-animation.html">
|
||||
<link rel="import" href="/components/neon-animation/neon-animations.html">
|
||||
|
||||
<link rel="import" href="/components/paper-dialog/paper-dialog.html">
|
||||
<link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="/components/paper-item/all-imports.html">
|
||||
<link rel="import" href="/components/paper-material/paper-material.html">
|
||||
<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
|
||||
<link rel="import" href="/components/paper-tabs/paper-tabs.html">
|
||||
<link rel="import" href="/components/paper-toast/paper-toast.html">
|
||||
|
||||
<link rel="import" href="/custom_components/app-theme.html">
|
||||
</head>
|
||||
11
rpg-docs/client/views/layout/testLayout.html
Normal file
11
rpg-docs/client/views/layout/testLayout.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<template name="testLayout">
|
||||
<app-drawer-layout class="layout fit" responsiveWidth="905px">
|
||||
<app-drawer>
|
||||
<app-header-layout mode="seamed" class="white">
|
||||
</app-header-layout>
|
||||
</app-drawer>
|
||||
<div>
|
||||
{{> yield}}
|
||||
</div>
|
||||
</app-drawer-layout>
|
||||
</template>
|
||||
@@ -42,12 +42,12 @@ html /deep/ .red-button:not([disabled]) {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#globalDetail core-toolbar {
|
||||
#globalDetail app-toolbar {
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#globalDetail core-toolbar {
|
||||
#globalDetail app-toolbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
paper-tabs, core-toolbar {
|
||||
paper-tabs, app-toolbar {
|
||||
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
core-toolbar paper-tabs {
|
||||
app-toolbar paper-tabs {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -23,6 +23,6 @@ paper-tabs.transparent-brown {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
core-toolbar.medium-tall {
|
||||
app-toolbar.medium-tall {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
@@ -1,54 +1,54 @@
|
||||
<template name="characterSheet">
|
||||
<!--<div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>-->
|
||||
<core-toolbar class="medium-tall {{colorClass}}">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<div flex>
|
||||
{{name}}
|
||||
</div>
|
||||
{{#if canEditCharacter _id}}
|
||||
<div>
|
||||
{{> colorDropdown}}
|
||||
<app-header>
|
||||
<app-toolbar class="medium-tall {{colorClass}}">
|
||||
<paper-icon-button icon="menu" drawer-toggle top-item></paper-icon-button>
|
||||
<div class="flex" top-item>
|
||||
{{name}}
|
||||
</div>
|
||||
<paper-menu-button>
|
||||
<paper-icon-button icon="more-vert" noink></paper-icon-button>
|
||||
<paper-dropdown class="dropdown" halign="right">
|
||||
<core-menu class="menu" style="color: black; color: rgba(0,0,0,0.87);">
|
||||
<paper-item id="deleteCharacter">
|
||||
<core-icon icon="delete"></core-icon>Delete
|
||||
</paper-item>
|
||||
<paper-item id="shareCharacter">
|
||||
<core-icon icon="social:share"></core-icon>Share
|
||||
</paper-item>
|
||||
<paper-item id="characterSettings">
|
||||
<core-icon icon="settings"></core-icon>Settings
|
||||
</paper-item>
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-menu-button>
|
||||
{{/if}}
|
||||
<div class="bottom fit" horizontal layout>
|
||||
<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
|
||||
<paper-tab name="stats">Stats</paper-tab>
|
||||
<paper-tab name="features">Features</paper-tab>
|
||||
<paper-tab name="inventory">Inventory</paper-tab>
|
||||
{{#unless hideSpellcasting}}
|
||||
<paper-tab name="spells">Spells</paper-tab>
|
||||
{{/unless}}
|
||||
<paper-tab name="persona">Persona</paper-tab>
|
||||
<paper-tab name="journal">Journal</paper-tab>
|
||||
</paper-tabs>
|
||||
</div>
|
||||
</core-toolbar>
|
||||
<div fit>
|
||||
<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" fit>
|
||||
<section flex name="stats">{{> stats}}</section>
|
||||
<section flex name="features">{{> features}}</section>
|
||||
<section flex name="inventory">{{> inventory}}</section>
|
||||
{{#if canEditCharacter _id}}
|
||||
{{> colorDropdown}}
|
||||
<paper-menu-button top-item>
|
||||
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content" halign="right">
|
||||
<paper-icon-item id="deleteCharacter">
|
||||
<iron-icon icon="delete" item-icon></iron-icon>
|
||||
Delete
|
||||
</paper-icon-item>
|
||||
<paper-icon-item id="shareCharacter">
|
||||
<iron-icon icon="social:share" item-icon></iron-icon>
|
||||
Share
|
||||
</paper-icon-item>
|
||||
<paper-icon-item id="characterSettings">
|
||||
<iron-icon icon="settings" item-icon></iron-icon>
|
||||
Settings
|
||||
</paper-icon-item>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
{{/if}}
|
||||
<div bottom-item>
|
||||
<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}" attr-for-selected="name">
|
||||
<paper-tab name="stats">Stats</paper-tab>
|
||||
<paper-tab name="features">Features</paper-tab>
|
||||
<paper-tab name="inventory">Inventory</paper-tab>
|
||||
{{#unless hideSpellcasting}}
|
||||
<paper-tab name="spells">Spells</paper-tab>
|
||||
{{/unless}}
|
||||
<paper-tab name="persona">Persona</paper-tab>
|
||||
<paper-tab name="journal">Journal</paper-tab>
|
||||
</paper-tabs>
|
||||
</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div>
|
||||
<neon-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" attr-for-selected="name">
|
||||
<div name="stats">{{> stats}}</div>
|
||||
<div name="features">{{> features}}</div>
|
||||
<div name="inventory">{{> inventory}}</div>
|
||||
{{#unless hideSpellcasting}}
|
||||
<section flex name="spells">{{> spells}}</section>
|
||||
<div name="spells">{{> spells}}</div>
|
||||
{{/unless}}
|
||||
<section flex name="persona">{{> persona}}</section>
|
||||
<section flex name="journal">{{> journal}}</section>
|
||||
</core-animated-pages>
|
||||
<div name="persona">{{> persona}}</div>
|
||||
<div name="journal">{{> journal}}</div>
|
||||
</neon-animated-pages>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Template.characterSheet.onCreated(function() {
|
||||
Template.characterSheet.onRendered(function() {
|
||||
//default to the first tab
|
||||
Session.setDefault(this.data._id + ".selectedTab", "stats");
|
||||
//watch this character and make sure their encumbrance is updated
|
||||
@@ -24,11 +24,8 @@ Template.characterSheet.helpers({
|
||||
});
|
||||
|
||||
Template.characterSheet.events({
|
||||
"core-animated-pages-transition-end #tabPages": function(event) {
|
||||
event.stopPropagation();
|
||||
},
|
||||
"tap #characterSheetTabs paper-tab": function(event, instance){
|
||||
setTab(this._id, event.currentTarget.getAttribute("name"));
|
||||
"iron-select #characterSheetTabs": function(event, instance){
|
||||
setTab(this._id, event.target.selected);
|
||||
},
|
||||
"color-change": function(event, instance){
|
||||
Characters.update(this._id, {$set: {color: event.color}});
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.resourceCards paper-shadow.healthCard {
|
||||
.resourceCards paper-material.healthCard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<!--Attacks-->
|
||||
<div>
|
||||
<paper-shadow class="card">
|
||||
<paper-material class="card">
|
||||
<div class="top white">
|
||||
Attacks
|
||||
</div>
|
||||
@@ -48,12 +48,12 @@
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
|
||||
<!--Proficiencies-->
|
||||
<div>
|
||||
<paper-shadow class="card">
|
||||
<paper-material class="card">
|
||||
<div class="white top">
|
||||
Proficiencies
|
||||
</div>
|
||||
@@ -77,13 +77,13 @@
|
||||
{{> proficiencyListItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
|
||||
<!--features-->
|
||||
{{#each features}}
|
||||
<div>
|
||||
<paper-shadow class="card featureCard"
|
||||
<paper-material class="card featureCard"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div class="top {{colorClass}} subhead"
|
||||
layout horizontal
|
||||
@@ -123,7 +123,7 @@
|
||||
</paper-button>
|
||||
</div>
|
||||
{{/if}}
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
@@ -145,7 +145,7 @@
|
||||
<template name="resource">
|
||||
{{#if characterCalculate "attributeBase" char._id name}}
|
||||
<div>
|
||||
<paper-shadow class="card"
|
||||
<paper-material class="card"
|
||||
hero-id="main" {{detailHero name char._id}}
|
||||
layout horizontal>
|
||||
<div class="left {{getColor}} display1 white-text"
|
||||
@@ -168,7 +168,7 @@
|
||||
flex layout horizontal center>
|
||||
{{title}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="column-container">
|
||||
<!--Net Worth-->
|
||||
<div>
|
||||
<paper-shadow class="card">
|
||||
<paper-material class="card">
|
||||
<div class="white top" layout horizontal center>
|
||||
<div class="subhead" flex>
|
||||
Net Worth
|
||||
@@ -13,11 +13,11 @@
|
||||
{{valueString netWorth}}
|
||||
</div>
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
<!--Weight Carried-->
|
||||
<div>
|
||||
<paper-shadow class="card"
|
||||
<paper-material class="card"
|
||||
hero-id="main" {{detailHero "weightCarried" _id}}>
|
||||
<div class="top green white-text weightCarried"
|
||||
hero-id="toolbar" {{detailHero "weightCarried" _id}}
|
||||
@@ -40,9 +40,9 @@
|
||||
hero-id="main" {{detailHero}}
|
||||
layout horizontal center>
|
||||
<div flex>
|
||||
<core-icon icon="work"
|
||||
<iron-icon icon="work"
|
||||
style="margin-right: 16px">
|
||||
</core-icon>
|
||||
</iron-icon>
|
||||
{{name}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,11 +50,11 @@
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
<!--Equipment-->
|
||||
<div>
|
||||
<paper-shadow class="card equipmentContainer">
|
||||
<paper-material class="card equipmentContainer">
|
||||
<div class="white top" layout horizontal center>
|
||||
<div class="subhead" flex>
|
||||
Equipment
|
||||
@@ -80,11 +80,11 @@
|
||||
{{>inventoryItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
<!--Carried Items-->
|
||||
<div>
|
||||
<paper-shadow class="card carriedContainer">
|
||||
<paper-material class="card carriedContainer">
|
||||
<div class="white top" layout horizontal center>
|
||||
<div class="subhead" flex>
|
||||
Carried
|
||||
@@ -101,11 +101,11 @@
|
||||
{{>inventoryItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{#each containers}}
|
||||
<div>
|
||||
<paper-shadow class="card itemContainer"
|
||||
<paper-material class="card itemContainer"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div class="top {{colorClass}}"
|
||||
hero-id="toolbar" {{detailHero}}
|
||||
@@ -132,7 +132,7 @@
|
||||
{{>inventoryItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
{{#each containers}}
|
||||
<paper-item name={{_id}}
|
||||
layout horizontal center>
|
||||
<core-icon icon="image:brightness-1"
|
||||
<iron-icon icon="image:brightness-1"
|
||||
style="color: {{hexColor color}};
|
||||
margin-right: 16px;">
|
||||
</core-icon>
|
||||
</iron-icon>
|
||||
<div>{{name}}</div>
|
||||
</paper-item>
|
||||
{{/each}}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div id="journal" class="scroll-y" fit>
|
||||
<div class="column-container">
|
||||
<!--Experience Table-->
|
||||
<div><paper-shadow class="card experiencesCard"
|
||||
<div><paper-material class="card experiencesCard"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div class="top white subhead"
|
||||
hero-id="toolbar" {{detailHero}}
|
||||
@@ -37,9 +37,9 @@
|
||||
</paper-button>
|
||||
</div>
|
||||
{{/if}}
|
||||
</paper-shadow></div>
|
||||
</paper-material></div>
|
||||
<!--Class Table-->
|
||||
<div><paper-shadow class="card"
|
||||
<div><paper-material class="card"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div class="white top"
|
||||
hero-id="toolbar" {{detailHero}}
|
||||
@@ -78,18 +78,18 @@
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow></div>
|
||||
</paper-material></div>
|
||||
<!--Notes-->
|
||||
{{#each notes}}
|
||||
<div>
|
||||
<paper-shadow class="card" hero-id="main" {{detailHero}}>
|
||||
<paper-material class="card" hero-id="main" {{detailHero}}>
|
||||
<div class="top {{colorClass}} noteTop subhead"
|
||||
hero-id="toolbar" {{detailHero}}
|
||||
layout horizontal center>
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="bottom">{{#markdown}}{{description}}{{/markdown}}</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="column-container">
|
||||
{{#with characterDetails}}
|
||||
<div>
|
||||
<paper-shadow class="card"
|
||||
<paper-material class="card"
|
||||
hero-id="main" {{detailHero "details" _id}}>
|
||||
{{#unless picture}}
|
||||
<div class="top subhead characterField {{colorClass}}"
|
||||
@@ -32,7 +32,7 @@
|
||||
{{alignment}} {{gender}} {{race}}
|
||||
</div>
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/with}}
|
||||
<div>{{> containerCard characterField "description" "Description"}}</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
<div>{{> containerCard characterField "flaws" "Flaws"}}</div>
|
||||
<div>{{> containerCard characterField "backstory" "Background"}}</div>
|
||||
<div>
|
||||
<paper-shadow class="card">
|
||||
<paper-material class="card">
|
||||
<div class="white top subhead">
|
||||
Languages
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@
|
||||
{{> proficiencyListItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
</template>
|
||||
|
||||
<template name="containerCardHelper">
|
||||
<paper-shadow class="card {{class}}"
|
||||
<paper-material class="card {{class}}"
|
||||
hero-id="main" {{detailHero field ../_id}}>
|
||||
<div class="top subhead {{colorClass}} {{topClass}}"
|
||||
hero-id="toolbar" {{detailHero field ../_id}}>
|
||||
@@ -73,5 +73,5 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">{{#markdown}}{{> UI.contentBlock}}{{/markdown}}</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</template>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<div class="proficiency item small"
|
||||
hero-id="main" {{detailHero}}
|
||||
layout horizontal center>
|
||||
<core-icon icon="{{profIcon}}"
|
||||
style="margin-right: 16px;"></core-icon>
|
||||
<iron-icon icon="{{profIcon}}"
|
||||
style="margin-right: 16px;"></iron-icon>
|
||||
<div flex>{{getName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="proficiencyView item small"
|
||||
style="padding: 0;"
|
||||
layout horizontal center>
|
||||
<core-icon icon="{{profIcon}}" style="margin-right: 16px;"></core-icon>
|
||||
<iron-icon icon="{{profIcon}}" style="margin-right: 16px;"></iron-icon>
|
||||
<div>{{getName}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
#spells .inventoryItem core-icon{
|
||||
#spells .inventoryItem iron-icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
@@ -18,7 +18,7 @@
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
#spells .inventoryItem[disabled] core-icon{
|
||||
#spells .inventoryItem[disabled] iron-icon{
|
||||
color: #ccc !important;
|
||||
color: rgba(0,0,0,0.26) !important;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div style="padding: 4px;"
|
||||
layout horizontal start wrap>
|
||||
{{#if hasSlots}}
|
||||
<paper-shadow class="card"
|
||||
<paper-material class="card"
|
||||
style="margin: 4px;"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div class="white top subhead"
|
||||
@@ -32,10 +32,10 @@
|
||||
</div>
|
||||
{{/if}}{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
{{/if}}
|
||||
{{#each spellLists}}
|
||||
<paper-shadow class="card spellList" flex
|
||||
<paper-material class="card spellList" flex
|
||||
hero-id="main" {{detailHero}}
|
||||
style="margin: 4px;">
|
||||
<div class="top {{colorClass}}"
|
||||
@@ -92,10 +92,10 @@
|
||||
<div class="tall spell item"
|
||||
hero-id="main" {{detailHero}}
|
||||
layout horizontal center>
|
||||
<core-icon icon="social:whatshot"
|
||||
<iron-icon icon="social:whatshot"
|
||||
style="color: {{hexColor color}};
|
||||
margin-right: 16px;"
|
||||
></core-icon>
|
||||
></iron-icon>
|
||||
<div flex layout vertical>
|
||||
<div>{{name}}</div>
|
||||
<div class="caption">
|
||||
@@ -122,7 +122,7 @@
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="fab-buffer"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template name="abilityMiniCard">
|
||||
<div>
|
||||
<paper-shadow class="card abilityMiniCard clickable"
|
||||
<paper-material class="card abilityMiniCard clickable"
|
||||
hero-id="main" {{detailHero ability ../_id}}
|
||||
layout horizontal>
|
||||
<div class="left white-text {{color}}"
|
||||
@@ -11,6 +11,6 @@
|
||||
<div class="right subhead" layout horizontal center>
|
||||
{{title}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="healthCard">
|
||||
<paper-shadow class="card container healthCard"
|
||||
<paper-material class="card container healthCard"
|
||||
hero-id="main" {{detailHero "hitPoints" _id}}
|
||||
layout horizontal wrap>
|
||||
<div class="green white-text subhead left"
|
||||
@@ -95,5 +95,5 @@
|
||||
{{/with}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template name="hitDice">
|
||||
{{#if characterCalculate "attributeBase" ../_id name}}
|
||||
<div>
|
||||
<paper-shadow class="card hit-dice" hero-id="main"
|
||||
<paper-material class="card hit-dice" hero-id="main"
|
||||
{{detailHero name ../_id}}
|
||||
layout horizontal>
|
||||
<div class="left green display1 white-text"
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="right clickable" flex relative horizontal layout center>
|
||||
Hit Dice
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
{{characterCalculate "skillMod" charId skillName}}
|
||||
</div>
|
||||
<div class="subhead">
|
||||
<core-icon icon="{{profIcon}}" class="black54"></core-icon>
|
||||
<iron-icon icon="{{profIcon}}" class="black54"></iron-icon>
|
||||
{{#if profSource}}
|
||||
{{proficiencyValue}} - {{#with profSource}}{{sourceName}}{{/with}}
|
||||
{{else}}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
hero-id="main"
|
||||
{{detailHero skill ../_id}}
|
||||
layout horizontal center>
|
||||
<core-icon icon="{{profIcon}}"></core-icon>
|
||||
<iron-icon icon="{{profIcon}}"></iron-icon>
|
||||
{{#if failSkill}}
|
||||
<div class="fail skill-mod">fail</div>
|
||||
{{else}}
|
||||
|
||||
@@ -46,6 +46,6 @@
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
section:not(.core-selected):not([animate]) paper-shadow[hero] {
|
||||
section:not(.core-selected):not([animate]) paper-material[hero] {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -28,7 +28,7 @@
|
||||
{{>hitDice name="d12HitDice" diceNum="12" char=this}}
|
||||
<!--Saving Throws-->
|
||||
<div>
|
||||
<paper-shadow class="card">
|
||||
<paper-material class="card">
|
||||
<div class="top white subhead">
|
||||
Saving Throws
|
||||
</div>
|
||||
@@ -40,11 +40,11 @@
|
||||
{{> skillRow name="Wisdom" skill="wisdomSave"}}
|
||||
{{> skillRow name="Charisma" skill="charismaSave"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
<!--Skills-->
|
||||
<div>
|
||||
<paper-shadow class="card">
|
||||
<paper-material class="card">
|
||||
<div class="top white subhead">
|
||||
Skills
|
||||
</div>
|
||||
@@ -68,7 +68,7 @@
|
||||
{{> skillRow name="Stealth" skill="stealth"}}
|
||||
{{> skillRow name="Survival" skill="survival"}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,7 +76,7 @@
|
||||
|
||||
<template name="statCard">
|
||||
<div>
|
||||
<paper-shadow class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
|
||||
<paper-material class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
|
||||
<div class="left display1 white-text {{color}}"
|
||||
hero-id="toolbar" {{detailHero stat ../_id}}>
|
||||
{{#if isSkill}}
|
||||
@@ -88,6 +88,6 @@
|
||||
<div class="right subhead" flex horizontal layout center>
|
||||
{{name}}
|
||||
</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template name="characterList">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div flex>
|
||||
Characters
|
||||
</div>
|
||||
</core-toolbar>
|
||||
</app-toolbar>
|
||||
<div class="scroll-y" fit>
|
||||
{{#if currentUser}}
|
||||
{{#if characters.count}}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.singleLineItem core-icon {
|
||||
.singleLineItem iron-icon {
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
width: 8px;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<a href={{pathFor route="characterSheet" data=this}}
|
||||
class="singleLineItem characterRepresentative"
|
||||
layout horizontal center>
|
||||
<core-icon icon="image:brightness-1"></core-icon>
|
||||
<iron-icon icon="image:brightness-1"></iron-icon>
|
||||
<div>{{name}}</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template name="guide">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div flex>Guide</div>
|
||||
</core-toolbar>
|
||||
</app-toolbar>
|
||||
<div layout vertical center>
|
||||
<paper-shadow class="wallOfText card" style="padding: 32px; max-width: 800px;">
|
||||
<paper-material class="wallOfText card" style="padding: 32px; max-width: 800px;">
|
||||
<h2>Character Sheet Philosophy</h2>
|
||||
<p>Setting up your character on Dicecloud is going to take you a little longer than just filling it in on a paper character sheet would have. The goal of using an online sheet is to make actually playing the game more streamlined, and ultimately more fun. So putting a little extra effort into setting up your character now will pay off over and over again once you're playing.</p>
|
||||
<p>The idea is to track where each number comes from, and allow you to easily make changes on the fly.</p>
|
||||
@@ -89,6 +89,6 @@
|
||||
<li>Change your level and check that the <em>Stats</em> tab gets updated accordingly</li>
|
||||
</ul>
|
||||
<p>You can try all sorts of calculations in your effects and in certain other places too. For example if you had some feature that is used a number of times equal to your wisdom modifier or 1, whichever is lower, you could limit its uses to <em>min(1, wisdomMod)</em> and the character sheet will figure it out for you, and update itself if you wisdom modifier happens to change later.</p>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,9 +1,9 @@
|
||||
<template name="home">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div flex>
|
||||
Home
|
||||
</div>
|
||||
</core-toolbar>
|
||||
</app-toolbar>
|
||||
{{> intro}}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
Check out the example characters
|
||||
</h2>
|
||||
<div layout horizontal around-justified wrap>
|
||||
<paper-shadow class="card characterCard ssArcher clickable"
|
||||
<paper-material class="card characterCard ssArcher clickable"
|
||||
z="2">
|
||||
<div class="top subhead green white-text">
|
||||
<div class="subhead" flex>
|
||||
@@ -44,8 +44,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom text">Lawful Good Human</div>
|
||||
</paper-shadow>
|
||||
<paper-shadow class="card characterCard ssWizard clickable"
|
||||
</paper-material>
|
||||
<paper-material class="card characterCard ssWizard clickable"
|
||||
z="2">
|
||||
<div class="top subhead deep-purple white-text">
|
||||
<div class="subhead" flex>
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom text">Chaotic Good High Elf</div>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template name="loading">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
</core-toolbar>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
</app-toolbar>
|
||||
<div fit layout vertical center center-justified>
|
||||
<paper-spinner class="bigSpinner" active></paper-spinner>
|
||||
<div class="subhead"
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template name="changeLog">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div flex>
|
||||
Change Log
|
||||
</div>
|
||||
</core-toolbar>
|
||||
</app-toolbar>
|
||||
<div class="changeLog scroll-y" fit>
|
||||
<div layout vertical center>
|
||||
<div layout vertical style="max-width: 800px; padding: 4px;">
|
||||
{{#each changeLogs}}
|
||||
<paper-shadow class="card"
|
||||
<paper-material class="card"
|
||||
style="margin: 4px;
|
||||
padding: 16px;"
|
||||
layout vertical>
|
||||
@@ -19,7 +19,7 @@
|
||||
<li>{{this}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template name="notFound">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
</core-toolbar>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
</app-toolbar>
|
||||
<div layout vertical center center-justified fit
|
||||
style="padding: 16px; text-align: center;">
|
||||
<h2 style="margin-bottom: 12px;">The data for the page you requested could not be found.</h2>
|
||||
|
||||
@@ -34,10 +34,10 @@
|
||||
}
|
||||
|
||||
.expand-menu {
|
||||
&::shadow core-icon {
|
||||
&::shadow iron-icon {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
&.active::shadow core-icon{
|
||||
&.active::shadow iron-icon{
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
}
|
||||
|
||||
3
rpg-docs/client/views/private/testContent.html
Normal file
3
rpg-docs/client/views/private/testContent.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<template name="testContent">
|
||||
<div class="layout horizontal center center-justified">Some content</div>
|
||||
</template>
|
||||
@@ -1,11 +1,11 @@
|
||||
<template name="profile">
|
||||
{{#with currentUser}}
|
||||
<core-toolbar class="blue-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<app-toolbar class="blue-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div id="username" class="clickable" flex>
|
||||
{{profileName}}
|
||||
</div>
|
||||
</core-toolbar>
|
||||
</app-toolbar>
|
||||
<div id="userProfile" class="padded">
|
||||
<div>
|
||||
<h2>Email</h2>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template name="titledAtForm">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div flex>
|
||||
|
||||
</div>
|
||||
</core-toolbar>
|
||||
</app-toolbar>
|
||||
<div class="scroll-y padded" fit layout vertical center center-justified>
|
||||
<paper-shadow class="white" style="max-width: 400px;">
|
||||
<paper-material class="white" style="max-width: 400px;">
|
||||
{{> atForm}}
|
||||
</paper-shadow>
|
||||
</paper-material>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user