From 874692ed5ceb889e89646432b0f23cb65cecc431 Mon Sep 17 00:00:00 2001
From: Gesina Schwalbe <gesina.schwalbe@pheerai.de>
Date: Wed, 6 Jan 2021 15:25:55 +0100
Subject: [PATCH] moved basic talent properties in talent-sheet head
- a little bit better gridding of side-properties
(still needs a rewrite)
- common SCSS mixin for input field marking
---
src/scss/components/_basic_property.scss | 11 +++++++++--
src/scss/components/_description.scss | 11 ++++-------
src/scss/components/_items.scss | 5 ++---
src/scss/utils/_mixins.scss | 9 +++++++++
src/templates/item/talent-sheet.hbs | 16 +++++++++-------
5 files changed, 33 insertions(+), 19 deletions(-)
diff --git a/src/scss/components/_basic_property.scss b/src/scss/components/_basic_property.scss
index 6f725dad..813bf9b7 100644
--- a/src/scss/components/_basic_property.scss
+++ b/src/scss/components/_basic_property.scss
@@ -1,13 +1,20 @@
.basic-properties {
flex: 0 0 100%;
.basic-property {
- .basic-property-label {
+ display: grid;
+ align-content: end;
+
+ .basic-property-label,
+ & > label {
font-weight: bold;
}
- .basic-property-select {
+ .basic-property-select,
+ & > select {
display: block;
width: 100%;
}
+
+ @include mark-invalid-or-disabled-input;
}
}
diff --git a/src/scss/components/_description.scss b/src/scss/components/_description.scss
index 72080381..084b1796 100644
--- a/src/scss/components/_description.scss
+++ b/src/scss/components/_description.scss
@@ -9,7 +9,7 @@
.side-property {
margin: 2px 0;
display: grid;
- grid-template-columns: 40% auto;
+ grid-template-columns: minmax(30%, auto) auto;
justify-content: left;
label {
@@ -22,12 +22,9 @@
text-align: left;
width: calc(100% - 2px);
}
- input:invalid {
- background-color: $c-invalid-input;
- }
- input:disabled {
- background-color: transparent;
- }
+
+ @include mark-invalid-or-disabled-input;
+
input[type="checkbox"] {
width: auto;
height: 100%;
diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss
index fea61e0c..6382c587 100644
--- a/src/scss/components/_items.scss
+++ b/src/scss/components/_items.scss
@@ -39,9 +39,8 @@
height: 100%;
margin: 0px;
}
- input:invalid {
- background-color: $c-invalid-input;
- }
+
+ @include mark-invalid-or-disabled-input;
}
.item-name {
diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss
index 7e028c29..adc2e69a 100644
--- a/src/scss/utils/_mixins.scss
+++ b/src/scss/utils/_mixins.scss
@@ -19,3 +19,12 @@
display: grid;
place-items: center;
}
+
+@mixin mark-invalid-or-disabled-input {
+ input:invalid {
+ background-color: $c-invalid-input;
+ }
+ input:disabled {
+ background-color: transparent;
+ }
+}
diff --git a/src/templates/item/talent-sheet.hbs b/src/templates/item/talent-sheet.hbs
index 0c987467..d68f66c2 100644
--- a/src/templates/item/talent-sheet.hbs
+++ b/src/templates/item/talent-sheet.hbs
@@ -3,9 +3,9 @@
{{!-- ======================================================================== --}}
-{{#*inline "talentRankSideProperty" }}
-<div class="side-property">
- <label for="data.rank.{{property}}">{{localize localizeString}}</label>
+{{#*inline "talentRankBasicProperty" }}
+<div class="basic-property">
+ <label class="basic-property-label" for="data.rank.{{property}}">{{localize localizeString}}</label>
<input type="number" min="0" step="1" data-dtype="Number" {{disabled}}
{{#if (eq property 'base') }}max="{{data.rank.max}}"{{/if}}
name="data.rank.{{property}}" value="{{lookup data.rank property}}" />
@@ -22,6 +22,12 @@
<div class="header-fields flexrow">
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
<h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
+ <div class="grid grid-4col basic-properties">
+ {{> talentRankBasicProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
+ {{> talentRankBasicProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
+ {{> talentRankBasicProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
+ {{> talentRankBasicProperty data=data property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
+ </div>
</div>
</header>
@@ -52,10 +58,6 @@
{{else}}
<span>{{localize "DS4.NotOwned"}}</span>
{{/if}}
- {{> talentRankSideProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
- {{> talentRankSideProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
- {{> talentRankSideProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
- {{> talentRankSideProperty data=data property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
</div>
<div class="description" title="{{localize 'DS4.HeadingDescription'}}">
{{editor content=data.description target="data.description" button=true owner=owner editable=editable}}