jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite all css to scss and refactor html

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

152
rpg-docs/client/views/character/inventory/inventory.css
View File

@@ -1,152 +0,0 @@
div#stats {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.containers {
-webkit-column-width: 300px;
-moz-column-width: 300px;
column-width: 300px;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
-moz-column-fill: balance;
column-fill: balance;
padding: 8px;
}
.containerLeft {
padding: 16px 16px 16px 24px;
display: flex;
justify-content: center;
flex-direction: row;
border-radius: 2px 0 0 2px;
/* same style as display-1 */
font-size: 34px;
font-weight: 400;
color: #ffffff;
color: rgba(255,255,255,0.54);
letter-spacing: 0;
}
.statCard .containerLeft {
padding: 16px;
}
.containerRight {
padding: 16px;
/* same style as subhead */
font-size: 16px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.resourceValue {
display: inline-block;
}
.resourceMax {
display: inline-block;
align-self: flex-end;
/* same style as subhead */
font-size: 16px;
font-weight: 400;
margin: 0;
color: #fff;
color: rgba(255,255,255,0.54);
letter-spacing: 0.010em;
}
.resourceMax:before {
content: "/";
}
.resourceButtons {
margin: -16px 8px -16px -16px;
align-self: center;
}
.resourceButtons paper-icon-button{
width: 32px;
height: 32px;
padding: 0;
display: block;
}
.resourceButtons paper-icon-button[disabled]{
color: rgba(255, 255, 255, 0.26);
}
.resourceButtons /deep/ core-icon {
width: 32px;
height: 32px;
}
.containerTop {
cursor: pointer;
padding: 16px;
position: relative;
border-radius: 2px 2px 0 0;
}
.equipmentTop {
padding: 16px;
border-bottom: rgba(0,0,0,0.12) solid 1px;
}
.containerMain {
padding: 16px;
}
.equipmentMain {
padding-bottom: 16px;
}
.inventoryItem {
background: white;
transition: box-shadow 0.3s ease,
opacity 0.5s ease-in-out;
height: 40px;
margin: 1px 0 1px 0;
font-size: 16px;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.inventoryItem core-icon, .inventoryItem paper-icon-button {
color: rgba(0,0,0,0.54);
}
.inventoryItem core-icon {
margin-right: 16px;
}
.inventoryItem /deep/ .button-content {
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
}
.inventoryItem[hero] {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
}
.itemSlot {
background-color: rgb(232, 232, 232);
background-color: rgba(0, 0, 0, 0.1);
}
#inventory .containerMain {
padding: 0 0 16px 0;
}

102
rpg-docs/client/views/character/inventory/inventory.html
View File

@@ -1,73 +1,95 @@
<template name="inventory">
<div fit>
<div id="inventory" class="scroll-y" fit>
<div class="containers">
<div class="column-container">
<!--Net Worth-->
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
<div class="indigo white-text subhead padded leftRound" layout horizontal center>
<paper-shadow class="card" layout horizontal>
<div class="indigo white-text subhead left">
Net Worth
</div>
<div class="padded" layout horizontal center>
<div class="right" flex>
{{valueString netWorth}}
</div>
</paper-shadow>
<!--Weight Carried-->
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
<div class="green white-text subhead padded leftRound" layout horizontal center>
<paper-shadow class="card" layout horizontal>
<div class="green white-text subhead left">
Weight Carried
</div>
<div class="padded" layout horizontal center>
<div class="right" flex>
{{round weightCarried}}lbs
</div>
</paper-shadow>
<!--Equipment-->
<paper-shadow class="card container equipmentContainer">
<div class="equipmentTop" layout horizontal center>
<div class="containerName subhead" flex>
<paper-shadow class="card equipmentContainer">
<div class="white top" layout horizontal center>
<div class="subhead" flex>
Equipment
</div>
<div class="caption" style="margin-right: 8px">{{valueString equipmentValue}}</div>
<div class="caption">{{round equipmentWeight}}lbs</div>
<div class="caption" style="margin-right: 8px">
{{valueString equipmentValue}}
</div>
<div class="caption">
{{round equipmentWeight}}lbs
</div>
</div>
<div flex class="equipmentMain">
<div flex class="bottom list">
{{#if attuned.count}}
<div class="list-subhead" layout horizontal center>Attuned</div>
<div class="subhead">Attuned</div>
{{/if}}
{{#each attuned}}
{{>inventoryItem}}
{{/each}}
{{#if attuned.count}}<div class="list-subhead" layout horizontal center>Equipment</div>{{/if}}
{{#if attuned.count}}
<div class="subhead">Equipment</div>
{{/if}}
{{#each equipment}}
{{>inventoryItem}}
{{/each}}
</div>
</paper-shadow>
<!--Carried Items-->
<paper-shadow class="card container carriedContainer">
<div class="equipmentTop" layout horizontal center>
<div class="containerName subhead" flex>
<paper-shadow class="card carriedContainer">
<div class="white top" layout horizontal center>
<div class="subhead">
Carried
</div>
<div class="caption" style="margin-right: 8px">{{valueString carriedValue}}</div>
<div class="caption">{{round carriedWeight}}lbs</div>
<div class="caption" style="margin-right: 8px">
{{valueString carriedValue}}
</div>
<div class="caption">
{{round carriedWeight}}lbs
</div>
</div>
<div flex class="containerMain">
<div flex class="bottom list">
{{#each carriedItems}}
{{>inventoryItem}}
{{/each}}
</div>
</paper-shadow>
{{#each containers}}
<paper-shadow class="card container itemContainer" hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
<div class="caption" style="margin-right: 8px">{{round totalWeight}}lbs</div>
<paper-shadow class="card itemContainer"
hero-id="main" {{detailHero}}>
<div class="top {{colorClass}}"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div class="subhead" flex
hero-id="title" {{detailHero}}>
{{name}}
</div>
<div class="caption" style="margin-right: 8px">
{{valueString totalValue}}
</div>
<div class="caption" style="margin-right: 8px">
{{round totalWeight}}lbs
</div>
<core-tooltip label="Container carried" position="left">
<paper-checkbox class="carriedCheckbox" checked={{isCarried}}></paper-checkbox>
<paper-checkbox class="carriedCheckbox"
checked={{isCarried}}>
</paper-checkbox>
</core-tooltip>
</div>
<div flex class="containerMain">
<div class="bottom list">
{{#each items ../_id _id}}
{{>inventoryItem}}
{{/each}}
@@ -78,17 +100,31 @@
<div class="fab-buffer"></div>
</div>
{{#if canEditCharacter _id}}
<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>
<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
<paper-fab-menu id="inventoryAddMenu"
icon="add"
closeIcon="close"
duration="0.3">
<paper-fab-menu-item id="addItem"
icon="note-add"
color="#d23f31"
tooltip="Item">
</paper-fab-menu-item>
<paper-fab-menu-item id="addContainer"
icon="work"
color="#d23f31"
tooltip="Container">
</paper-fab-menu-item>
</paper-fab-menu>
{{/if}}
</div>
</template>
<template name="inventoryItem">
<div class="itemSlot">
<paper-item class="inventoryItem {{hidden}}" hero-id="main" noink {{detailHero}} layout horizontal draggable="true">
<div class="item-slot">
<paper-item class="item inventoryItem {{hidden}}" noink
hero-id="main" {{detailHero}}
layout horizontal
draggable="true">
{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
</paper-item>
</div>

2
rpg-docs/client/views/character/inventory/inventory.js
View File

@@ -145,7 +145,7 @@ Template.inventory.events({
heroId: itemId,
});
},
"tap .containerTop": function(event){
"tap .itemContainer .top": function(event){
GlobalUI.setDetail({
template: "containerDialog",
data: {containerId: this._id, charId: this.charId},