Added Polymer

rpg-docs/client/views/character/characterSheet.css

@@ -1,11 +1,35 @@
-#characterSheetTabs {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: flex-start;
+paper-tabs, core-toolbar {
+	background-color: #795548;
+	color: #fff;
+	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
 }
 
-.characterTab {
-	flex-grow: 1;
-	min-width: 100px;
+core-toolbar paper-tabs {
+	box-shadow: none;
+}
+
+paper-tabs[noink][nobar] paper-tab.core-selected {
+	color: #fff;
+}
+
+::shadow #selectionBar, #onRadio  {
+	background-color: #d50000;
+}
+
+::shadow #ink {
+	color: #d50000 !important;
+}
+
+paper-tabs.transparent-brown {
+	background-color: transparent;
+	color: #795548;
+	box-shadow: none;
+}
+
+paper-tabs.transparent-brown::shadow #selectionBar {
+	background-color: #795548;
+}
+
+paper-tabs.transparent-brown paper-tab::shadow #ink {
+	color: #795548;
 }

rpg-docs/client/views/character/characterSheet.html

@@ -1,4 +1,5 @@
 <template name="characterSheet">
+	<!--
 	<div id="characterHeader">
 		{{> characterName}}
 		{{> healthBar}}
@@ -16,4 +17,22 @@
 	<div id="characterDetails">
 		{{Template.dynamic template=getTab}}
 	</div>
+-->
+	<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
+		<paper-tab>Stats</paper-tab>
+		<paper-tab>Features</paper-tab>
+		<paper-tab>Persona</paper-tab>
+		<paper-tab>Inventory</paper-tab>
+		<paper-tab>Spellbook</paper-tab>
+		<paper-tab>Journal</paper-tab>
+	</paper-tabs>
+
+	<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
+		<div>Stats</div>
+		<div>Features</div>
+		<div>Persona</div>
+		<div>Inventory</div>
+		<div>Spellbook</div>
+		<div>Journal</div>
+	</core-animated-pages>
 </template>

rpg-docs/client/views/character/characterSheet.js

@@ -1,34 +1,35 @@
 Template.characterSheet.created = function(){
-	Template.instance().tab = new ReactiveVar("characterStats")
+	Template.instance().selectedTab = new ReactiveVar(0)
+}
+
+Template.characterSheet.rendered = function(){
+	var observer = new ObjectObserver(document.querySelector('#characterSheetTabs'));
+	var instance = Template.instance();
+	observer.open(function(added, removed, changed, getOldValueFn) {
+		Object.keys(changed).forEach(function(property) {
+			if(property === "selected"){
+				var selected = changed[property];
+				instance.selectedTab.set(selected);
+			}
+		})
+	});
 }
 
 Template.characterSheet.helpers({
-	getTab: function(){
-		return Template.instance().tab.get();
+	selectedTab: function(){
+		return Template.instance().selectedTab.get();
 	},
 });
 
-var setTab = function(value){
-	Template.instance().tab.set(value);
-}
-
 Template.characterSheet.events({
-	"click #statsTab": function(){
-		setTab("stats");
-	},
-	"click #featuresTab": function(){
-		setTab("features");
-	},
-	"click #personaTab": function(){
-		setTab("persona");
-	},
-	"click #inventoryTab": function(){
-		setTab("inventory");
-	},
-	"click #spellsTab": function(){
-		setTab("spellbook");
-	},
-	"click #journalTab": function(){
-		setTab("journal");
-	},
-})
+	
+})
+
+/* requires the following templates
+stats
+features
+persona
+inventory
+spellbook
+journal
+*/

rpg-docs/client/views/general.css

@@ -3,13 +3,17 @@ root {
 }
 
 body {
-	font-family: sans-serif;
-	background: #201500;
+	font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+	margin: 0;
+	color: #333;
 	overflow-x: hidden;
-	margin: 0px;
 	box-sizing: border-box;
 }
 
+body.core-narrow {
+	padding: 8px;
+}
+
 .calculatedValue {
 	color: #021C33;
 	font-weight: bold;
@@ -21,4 +25,9 @@ body {
 
 h2 {
 	margin: 0;
+}
+
+h3 {
+	font-size: 16px;
+	font-weight: 400;
 }

rpg-docs/client/views/home/home.html

@@ -2,7 +2,7 @@
 	{{>loginButtons}}
 	<div>
 		{{# each characters}}
-		<li><a href="{{ pathFor 'character' }} ">{{_id}}</a> <button id="deleteChar">delete</button></li>
+		<li><a href="{{ pathFor 'characterSheet' }} ">{{_id}}</a> <button id="deleteChar">delete</button></li>
 		{{/each}}
 	</div>
 	<input id="addCharacter" type="button" value="Add Character">

rpg-docs/client/views/index.html

@@ -1,4 +1,8 @@
 <head>
 	<title>RPG Docs</title>
 	<meta name="viewport" content="width=device-width initial-scale=1.0, user-scalable=no">
+	<link rel="import" href="bower_components/polymer/polymer.html">
+	<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
+	<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
+	<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
 </head>