Rewrite all css to scss and refactor html

This commit is contained in:
Stefan Zermatten
2015-05-15 16:55:05 +02:00
parent e40dd196e6
commit 061f1fd0a5
43 changed files with 748 additions and 841 deletions

View File

@@ -1,67 +1,91 @@
<template name="journal">
<div fit>
<div id="journal" class="scroll-y" fit>
<div class="containers">
<div class="column-container">
<!--Experience Table-->
<paper-shadow class="card container experiencesCard" hero-id="main" {{detailHero}}>
<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div class="containerName subhead" flex>Experience</div>
<div class="subhead">{{experience}} XP</div>
<paper-shadow class="card experiencesCard"
hero-id="main" {{detailHero}}>
<div class="top white subhead"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div flex>Experience</div>
<div >{{experience}} XP</div>
<paper-icon-button class="black54" id="addXP" icon="add"></paper-icon-button>
</div>
<div class="containerMain experiences">
<div class="bottom list">
{{#each experiences}}
<div class="itemSlot">
<paper-item class="inventoryItem experience" hero-id="main" {{detailHero}} layout horizontal>
<div flex>{{name}}</div><div class="xpValue">{{value}}</div>
</paper-item>
<div class="item-slot">
<div class="item experience"
hero-id="main" {{detailHero}}
layout horizontal center>
<div flex>{{name}}</div>
<div class="xpValue">{{value}}</div>
</div>
</div>
{{/each}}
</div>
{{#if moreExperiencesOrCollapse}}
<div class="containerFoot" layout="" horizontal="" center="" end-justified="">
<paper-button id="moreExperiences" disabled={{notMoreExperiences}}>Load More</paper-button>
<paper-button id="lessExperiences" disabled={{cantCollapse}}>Collapse</paper-button>
<div layout horizontal center end-justified>
<paper-button id="moreExperiences"
disabled={{notMoreExperiences}}>
Load More
</paper-button>
<paper-button id="lessExperiences"
disabled={{cantCollapse}}>
Collapse
</paper-button>
</div>
{{/if}}
</paper-shadow>
<!--Class Table-->
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<paper-shadow class="card"
hero-id="main" {{detailHero}}>
<div class="white top"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div flex>
<div class="containerName subhead">Level {{level}}</div>
<div class="containerName subhead">
Level {{level}}
</div>
{{#if nextLevelXP}}
<div class="caption">
Next Level: {{nextLevelXP}}XP
</div>
{{/if}}
</div>
<paper-icon-button class="black54" id="addClassButton" icon="add"></paper-icon-button>
<paper-icon-button class="black54"
id="addClassButton"
icon="add">
</paper-icon-button>
</div>
<div class="containerMain experiences">
<div class="itemSlot">
<paper-item class="inventoryItem race" hero-id="main" {{detailHero "race" _id}} layout horizontal>
<div class="bottom list">
<div class="item-slot">
<div class="item race"
hero-id="main" {{detailHero "race" _id}}
layout horizontal center>
{{race}}
</paper-item>
</div>
</div>
{{#each classes}}
<div class="itemSlot">
<paper-item class="inventoryItem class" hero-id="main" {{detailHero}} layout horizontal>
<div class="item-slot">
<div class="item class"
hero-id="main" {{detailHero}}
layout horizontal center>
{{name}}&nbsp;{{level}}
</paper-item>
</div>
</div>
{{/each}}
</div>
</paper-shadow>
<!--Notes-->
{{#each notes}}
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<div class="containerTop {{colorClass}} noteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div flex>
<div class="containerName subhead">{{name}}</div>
</div>
<paper-shadow class="card" hero-id="main" {{detailHero}}>
<div class="top {{colorClass}} noteTop subhead"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
{{name}}
</div>
<div class="containerMain preline">{{description}}</div>
<div class="bottom text">{{description}}</div>
</paper-shadow>
{{/each}}
</div>