Rewrite all css to scss and refactor html
This commit is contained in:
@@ -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}} {{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>
|
||||
|
||||
@@ -3,16 +3,28 @@
|
||||
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
|
||||
<div class="prewrap">{{description}}</div>
|
||||
{{else}}
|
||||
<!--Name-->
|
||||
<div horizontal layout>
|
||||
<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
|
||||
</div>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="noteDescriptionInput" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
{{> noteDialogEdit}}
|
||||
{{/baseDialog}}
|
||||
{{/with}}
|
||||
</template>
|
||||
|
||||
<template name="noteDialogEdit">
|
||||
<!--Name-->
|
||||
<div horizontal layout>
|
||||
<paper-input id="noteNameInput"
|
||||
label="Name"
|
||||
floatinglabel
|
||||
value={{name}}
|
||||
flex>
|
||||
</paper-input>
|
||||
</div>
|
||||
<!--Description, formatting this nicely breaks it, leave it as is-->
|
||||
<paper-input-decorator label="Description"
|
||||
floatinglabel
|
||||
layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="noteDescriptionInput"
|
||||
value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
</template>
|
||||
@@ -1,5 +1,7 @@
|
||||
Template.noteDialog.onRendered(function(){
|
||||
updatePolymerInputs(this);
|
||||
Template.noteDialog.helpers({
|
||||
note: function(){
|
||||
return Notes.findOne(this.noteId);
|
||||
}
|
||||
});
|
||||
|
||||
Template.noteDialog.events({
|
||||
@@ -11,6 +13,13 @@ Template.noteDialog.events({
|
||||
GlobalUI.deletedToast(instance.data.noteId, "Notes", "Note");
|
||||
GlobalUI.closeDetail();
|
||||
},
|
||||
});
|
||||
|
||||
Template.noteDialogEdit.onRendered(function(){
|
||||
updatePolymerInputs(this);
|
||||
});
|
||||
|
||||
Template.noteDialogEdit.events({
|
||||
"change #noteNameInput, input #noteNameInput": function(event){
|
||||
var value = event.currentTarget.value;
|
||||
Notes.update(this._id, {$set: {name: value}});
|
||||
@@ -20,9 +29,3 @@ Template.noteDialog.events({
|
||||
Notes.update(this._id, {$set: {description: value}});
|
||||
},
|
||||
});
|
||||
|
||||
Template.noteDialog.helpers({
|
||||
note: function(){
|
||||
return Notes.findOne(this.noteId);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user