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

Spell lists now expand horizontally if there is space.

Browse Source
This commit is contained in:
Thaum
2015-04-15 08:18:16 +00:00
parent ad43a1d331
commit 690eea4f29
2 changed files with 66 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
rpg-docs/client/views/character/spells/spells.css
View File

@@ -52,3 +52,38 @@
color: #cccccc;
color: rgba(0,0,0,0.26);
}
.spellsContainer{
padding: 4px;
}
.card.spellList {
min-width: 280px;
margin: 4px;
}
.card.spellSlotContainer {
width: initial;
margin: 4px;
}
.spellList .containerMain {
-ms-column-width: 300px;
-webkit-column-width: 300px;
-moz-column-width: 300px;
column-width: 300px;
-ms-column-gap: 8px;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
-moz-column-fill: balance;
column-fill: balance;
}
.spellLevel {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

62
rpg-docs/client/views/character/spells/spells.html
View File

@@ -1,9 +1,9 @@
<template name="spells">
<div fit>
<div id="spells" class="scroll-y" fit>
<div class="containers">
<div class="spellsContainer" layout horizontal start wrap>
{{#if hasSlots}}
<paper-shadow class="card container" hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
<paper-shadow class="card container spellSlotContainer" hero-id="main" {{detailHero}}>
<div class="containerTop {{colorClass}}" layout horizontal center>
<div class="containerName subhead" hero-id="title" flex>Spell Slots</div>
</div>
@@ -26,7 +26,7 @@
</paper-shadow>
{{/if}}
{{#each spellLists}}
<paper-shadow class="card container" hero-id="main" {{detailHero}} style="order: {{order}};">
<paper-shadow class="card container spellList" hero-id="main" {{detailHero}} flex>
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div flex>
<div class="containerName subhead">{{name}}</div>
@@ -53,36 +53,36 @@
</div>
<div class="containerMain">
{{#each levels}}
{{#if spellCount .. ../../_id}}
<div class="list-subhead" layout horizontal center>
{{name}}
</div>
{{/if}}
{{#each spells ../_id ../../_id}}
{{#if showSpell ../../settings.showUnprepared}}
<div class="itemSlot">
<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}}
layout horizontal center>
<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
<core-icon icon="social:whatshot"
style="color: {{hexColor color}};"
></core-icon>
<div flex layout vertical>
<div>{{name}}</div>
<div class="caption">
{{school}} {{castingTime}}
{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
</div>
</div>
{{#if ../../settings.showUnprepared}}
<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
{{else}}
<!--<paper-icon-button class="castButton" icon="send"></paper-icon-button>-->
{{/if}}
</paper-item>
<div class="spellLevel">
{{#if spellCount .. ../../_id}}
<div class="list-subhead" layout horizontal center>
{{name}}
</div>
{{/if}}
{{/each}}
{{#each spells ../_id ../../_id}}
{{#if showSpell ../../settings.showUnprepared}}
<div class="itemSlot">
<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}}
layout horizontal center>
<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
<core-icon icon="social:whatshot"
style="color: {{hexColor color}};"
></core-icon>
<div flex layout vertical>
<div>{{name}}</div>
<div class="caption">
{{school}} {{castingTime}}
{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
</div>
</div>
{{#if ../../settings.showUnprepared}}
<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
{{/if}}
</paper-item>
</div>
{{/if}}
{{/each}}
</div>
{{/each}}
</div>
</paper-shadow>