Skip to content

Commit

Permalink
Revorked Item Header
Browse files Browse the repository at this point in the history
Revorked the item header and implemented the feedback :)
  • Loading branch information
Batziy committed Nov 3, 2021
1 parent 5e4148b commit 9496881
Show file tree
Hide file tree
Showing 14 changed files with 247 additions and 266 deletions.
1 change: 1 addition & 0 deletions lang/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"WITCHER.Armor.Reliable": "Rel.",
"WITCHER.Armor.EncumbranceValue": "Encumbrance",
"WITCHER.Armor.Resistances": "Resistances",
"WITCHER.Armor.Res": "Res",
"WITCHER.Armor.Bludgeoning": "Bludgeoning",
"WITCHER.Armor.Slashing": "Slashing",
"WITCHER.Armor.Percing": "Percing",
Expand Down
3 changes: 2 additions & 1 deletion scripts/TheWitcherTRPG.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ async function preloadHandlebarsTemplates(){
"systems/TheWitcherTRPG/templates/partials/monster-inventory-tab.html",
"systems/TheWitcherTRPG/templates/partials/monster-details-tab.html",
"systems/TheWitcherTRPG/templates/partials/monster-spell-tab.html",
"systems/TheWitcherTRPG/templates/partials/skill-display.html"
"systems/TheWitcherTRPG/templates/partials/skill-display.html",
"systems/TheWitcherTRPG/templates/partials/item-header.html"
];
return loadTemplates(templatePath);
}
Expand Down
84 changes: 76 additions & 8 deletions styles/item-sheets.css
Original file line number Diff line number Diff line change
@@ -1,22 +1,90 @@
.item-collum {
.item-header {
display: flex;
}

.item-header img{
height: 100px;
max-width: 200px;
}

.itemname {
margin-left: 5px;
}

.item-header-row {
display: table;
margin: 0 auto;
}

.item-header-first-collum {
width: 400px;
}

.item-header-second-collum {
display: table-cell;
text-align: center;
width: 100px;
}

.item-header-second-collum input {
width: 75px;
height: 27px;
}

.item-header-second-collum label {
display: block;
}

.item-header-spell {
width: 33.33%;
}

.item-options {
display: flex;
width: 501px;
height: 54px;
}

.item-option-tickbox {
height: 27px;
}

.item-option-tickbox label {
float: left;
margin-top: 5px;
}

.item-option-tickbox input {
float: right;
}

.item-collum {
text-align: center;
width: 33.33%;
}

.item-collum label{
display: block;
}

.item-row {
display: table;
display: flex;
text-align: center;
}

.item-collum input {
width: 75px;
height: 27px;
margin-right: 5px;
margin-left: 5px;
.item-second-collum{
text-align: center;
width: 50%;
}

.item-second-collum label{
display: block;
width: 100%;
}

.item-selector select{
.----item-collum input {
width: 75px;
height: 27px;
margin-right: 5px;
margin-left: 5px;
}
76 changes: 76 additions & 0 deletions templates/partials/item-header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<header class="item-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<div class="item-header-first-collum">
<h1 class="itemname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
<div class="item-header-row">
{{#unless data.isSpell}}
<div class="item-header-second-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
</div>
<div class="item-header-second-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-header-second-collum">
{{#if data.isMutagen}}
<label>{{localize "WITCHER.Type"}}</label>
<select name="data.type" id="type-select">
{{#select data.type}}
<option value="red">{{localize "WITCHER.Mutagen.Red"}}</option>
<option value="green">{{localize "WITCHER.Mutagen.Green"}}</option>
<option value="blue">{{localize "WITCHER.Mutagen.Blue"}}</option>
{{/select}}
</select>
{{/if}}
{{#unless data.isMutagen}}
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
{{/unless}}
</div>
{{/unless}}
{{#if data.isSpell}}
<div class="item-header-second-collum item-header-spell">
<label>{{localize "WITCHER.Spell.type"}}</label>
<select name="data.class" id="profession-select">
{{#select data.class}}
<option value="Spells">{{localize "WITCHER.Spell.Spells"}}</option>
<option value="Invocations">{{localize "WITCHER.Spell.Invocations"}}</option>
<option value="Witcher">{{localize "WITCHER.Spell.Witcher"}}</option>
<option value="Rituals">{{localize "WITCHER.Spell.Rituals"}}</option>
<option value="Hexes">{{localize "WITCHER.Spell.Hexes"}}</option>
{{/select}}
</select>
</div>
<div class="item-header-second-collum item-header-spell">
{{#if (eq data.class "Hexes")}}
<label>{{localize "WITCHER.Spell.Danger"}}</label>
<select name="data.danger" id="level-select">
{{#select data.danger}}
<option value="Low">{{localize "WITCHER.Spell.DangerLow"}}</option>
<option value="Medium">{{localize "WITCHER.Spell.DangerMedium"}}</option>
<option value="High">{{localize "WITCHER.Spell.DangerHigh"}}</option>
{{/select}}
</select>
{{/if}}
{{#unless (eq data.class "Hexes")}}
<label>{{localize "WITCHER.Actor.Profession.Level"}}</label>
<select name="data.level" id="level-select">
{{#select data.level}}
<option value="novice">{{localize "WITCHER.Spell.Novice"}}</option>
<option value="journeyman">{{localize "WITCHER.Spell.Journeyman"}}</option>
<option value="master">{{localize "WITCHER.Spell.Master"}}</option>
{{/select}}
</select>
{{/unless}}
</div>
<div class="item-header-second-collum item-header-spell">
{{#unless (eq data.staminaIsVar true)}}
<label>{{localize "WITCHER.Spell.StaCost"}}</label>
<input class="sta-input" name="data.stamina" type="text" value="{{data.stamina}}"/>
{{/unless}}
</div>
{{/if}}
</div>
</div>
</header>
20 changes: 1 addition & 19 deletions templates/sheets/alchemical-sheet.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,5 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
</header>
<div class="item-row">
<div class="item-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
</div>
</div>
</header>
{{>"systems/TheWitcherTRPG/templates/partials/item-header.html"}}

{{!-- Attributes Tab --}}
<table>
Expand Down
37 changes: 16 additions & 21 deletions templates/sheets/armor-sheet.html
Original file line number Diff line number Diff line change
@@ -1,28 +1,23 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
</header>
<div class="item-row">
<div class="item-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
{{>"systems/TheWitcherTRPG/templates/partials/item-header.html"}}
<div class="item-options">
<div class="item-collum">
<div class="item-option-tickbox">
<label>{{localize "WITCHER.Armor.Bludgeoning" }} {{localize "WITCHER.Armor.Res"}}</label>
<input type="checkbox" name="data.bludgeoning" {{checked data.bludgeoning}}/>
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
</div>
<div class="item-collum">
<div class="item-option-tickbox">
<label>{{localize "WITCHER.Armor.Slashing"}} {{localize "WITCHER.Armor.Res"}}</label>
<input type="checkbox" name="data.slashing" {{checked data.slashing}} />
</div>
</div>
<div>
<div>
<label>{{localize "WITCHER.Armor.Resistances"}}:</label>
<label>{{localize "WITCHER.Armor.Bludgeoning"}}</label><input type="checkbox" name="data.bludgeoning" {{checked data.bludgeoning}}/>
<label>{{localize "WITCHER.Armor.Slashing"}}</label><input type="checkbox" name="data.slashing" {{checked data.slashing}} />
<label>{{localize "WITCHER.Armor.Percing"}}</label><input type="checkbox" name="data.percing" {{checked data.percing}} />
<div class="item-collum">
<div class="item-option-tickbox">
<label>{{localize "WITCHER.Armor.Percing"}} {{localize "WITCHER.Armor.Res"}}</label>
<input type="checkbox" name="data.percing" {{checked data.percing}} />
</div>
</div>
</div>
{{!-- Attributes Tab --}}
Expand Down
21 changes: 3 additions & 18 deletions templates/sheets/component-sheet.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,7 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
</header>
<div class="item-row">
{{>"systems/TheWitcherTRPG/templates/partials/item-header.html"}}
<div class="item-options">
<div class="item-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
</div>
<div class="item-collum item-selector">
<label>{{localize "WITCHER.Type"}}</label>
<select name="data.type" id="type-select">
{{#select data.type}}
Expand All @@ -28,7 +13,7 @@ <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeh
{{/select}}
</select>
</div>
<div class="item-collum item-selector">
<div class="item-collum">
{{#if (eq data.type "substances")}}
<label>{{localize "WITCHER.Inventory.Substance"}}:</label>
<select name="data.substanceType" id="substanceType-select">
Expand Down
25 changes: 6 additions & 19 deletions templates/sheets/diagrams-sheet.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,13 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
</header>
<div class="item-row">
{{>"systems/TheWitcherTRPG/templates/partials/item-header.html"}}
<div class="item-options">
<div class="item-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
<div class="item-option-tickbox">
<label>{{localize "WITCHER.Diagram.Formulae"}} </label>
<input type="checkbox" name="data.isFormulae" {{checked data.isFormulae}}/>
</div>
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
</div>
<div class="item-collum item-selector">
<label>{{localize "WITCHER.Type"}}</label>
<select name="data.type" id="type-select">
{{#select data.type}}
Expand All @@ -39,10 +30,6 @@ <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeh
{{/select}}
</select>
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Diagram.Formulae"}} </label>
<input type="checkbox" name="data.isFormulae" {{checked data.isFormulae}}/>
</div>
</div>
<table>
<tr>
Expand Down
19 changes: 2 additions & 17 deletions templates/sheets/enhancement-sheet.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,6 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
</header>
<div class="item-row">
<div class="item-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
</div>
{{>"systems/TheWitcherTRPG/templates/partials/item-header.html"}}
<div class="item-options">
<div class="item-collum">
<label>{{localize "WITCHER.Type"}}:</label>
<select name="data.type" id="type-select">
Expand Down
19 changes: 1 addition & 18 deletions templates/sheets/mount-sheet.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
<form class="{{cssClass}}" autocomplete="off">
<header class="sheet-header">
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
</header>
<div class="item-row">
<div class="item-collum">
<label>{{localize "WITCHER.Item.Quantity"}}</label>
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Weight"}}</label>
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
</div>
<div class="item-collum">
<label>{{localize "WITCHER.Item.Cost"}}</label>
<input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
</div>
</div>
{{>"systems/TheWitcherTRPG/templates/partials/item-header.html"}}
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">{{localize "WITCHER.Item.Description"}}</a>
Expand Down
Loading

0 comments on commit 9496881

Please sign in to comment.