Make a unique ArmourSheet so that it can have a better UX for indicating protection locations
This commit is contained in:
Oliver-Akins
parent
2b88bcc2ef
commit
94942c8eab
9 changed files with 407 additions and 6 deletions
109
templates/Apps/ArmourSheet/content.hbs
Normal file
109
templates/Apps/ArmourSheet/content.hbs
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<div class="contents">
|
||||
<div class="contents__left">
|
||||
<label for="">
|
||||
{{ rc-i18n "RipCrypt.common.access" }}
|
||||
</label>
|
||||
<select name="system.access" id="">
|
||||
{{ rc-options system.access accesses localize=true }}
|
||||
</select>
|
||||
<label for="">
|
||||
{{ rc-i18n "RipCrypt.common.weightRating" }}
|
||||
</label>
|
||||
<select name="system.weight" id="">
|
||||
{{ rc-options system.weight weights localize=true }}
|
||||
</select>
|
||||
<rc-border
|
||||
var:border-color="var(--accent-1)"
|
||||
>
|
||||
<span slot="title">Cost</span>
|
||||
<div slot="content" class="content">
|
||||
<label
|
||||
for="{{ meta.idp }}"
|
||||
>
|
||||
Gold
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="{{ meta.idp }}"
|
||||
name="system.cost.gold"
|
||||
value="{{ system.cost.gold }}"
|
||||
>
|
||||
<label
|
||||
for="{{ meta.idp }}"
|
||||
>
|
||||
Silver
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="{{ meta.idp }}"
|
||||
name="system.cost.silver"
|
||||
value="{{ system.cost.silver }}"
|
||||
>
|
||||
<label
|
||||
for="{{ meta.idp }}"
|
||||
>
|
||||
Copper
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="{{ meta.idp }}"
|
||||
name="system.cost.copper"
|
||||
value="{{ system.cost.copper }}"
|
||||
>
|
||||
</div>
|
||||
</rc-border>
|
||||
</div>
|
||||
<hr class="vertical">
|
||||
<div class="contents__right">
|
||||
<span class="section-pill">Location</span>
|
||||
<armour-summary
|
||||
var:row-gap="8px"
|
||||
>
|
||||
<div slot="head">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label=""
|
||||
value="head"
|
||||
{{ checked protects.head }}
|
||||
name="system.location"
|
||||
>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label=""
|
||||
value="body"
|
||||
{{ checked protects.body }}
|
||||
name="system.location"
|
||||
>
|
||||
</div>
|
||||
<div slot="arms">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label=""
|
||||
value="arms"
|
||||
{{ checked protects.arms }}
|
||||
name="system.location"
|
||||
>
|
||||
</div>
|
||||
<div slot="legs">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label=""
|
||||
value="legs"
|
||||
{{ checked protects.legs }}
|
||||
name="system.location"
|
||||
>
|
||||
</div>
|
||||
</armour-summary>
|
||||
<input
|
||||
type="number"
|
||||
class="center"
|
||||
aria-label="Damage reduction"
|
||||
data-tooltip="Damage reduction"
|
||||
min="0"
|
||||
name="system.protection"
|
||||
value="{{ system.protection }}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
131
templates/Apps/ArmourSheet/style.css
Normal file
131
templates/Apps/ArmourSheet/style.css
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
.ripcrypt.ArmourSheet > .window-content {
|
||||
--input-height: 1rem;
|
||||
--input-underline: none;
|
||||
--col-gap: 8px;
|
||||
--row-gap: 8px;
|
||||
|
||||
--string-tags-tag-text: var(--header-text);
|
||||
--string-tags-tag-background: var(--header-background);
|
||||
--string-tags-add-text: white;
|
||||
--string-tags-add-background: var(--accent-1);
|
||||
--string-tags-input-text: white;
|
||||
--string-tags-input-background: var(--accent-2);
|
||||
|
||||
--input-text: white;
|
||||
--input-background: var(--accent-2);
|
||||
--button-text: white;
|
||||
--button-background: var(--accent-2);
|
||||
|
||||
--pill-width: 100%;
|
||||
--pill-border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
padding: 8px;
|
||||
background: var(--base-background);
|
||||
color: var(--base-text);
|
||||
|
||||
hr {
|
||||
background: var(--accent-1);
|
||||
grid-column: 1 / -1;
|
||||
height: 1px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
|
||||
&.vertical {
|
||||
grid-column: unset;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
label, .label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 2px 4px;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-size-14);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button, input, select, .value {
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.value {
|
||||
border: 2px solid var(--accent-2);
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1px 118px;
|
||||
gap: 8px;
|
||||
|
||||
> .contents__left {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
||||
column-gap: var(--col-gap);
|
||||
row-gap: var(--row-gap);
|
||||
}
|
||||
|
||||
> .contents__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-pill {
|
||||
background: var(--section-header-background);
|
||||
color: var(--section-header-text);
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
rc-border {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
> .content {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
||||
column-gap: var(--col-gap);
|
||||
row-gap: var(--row-gap);
|
||||
}
|
||||
|
||||
.label {
|
||||
background: purple;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.compass {
|
||||
--size: 35px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px solid var(--accent-1);
|
||||
border-radius: 50%;
|
||||
font-size: 1.1rem;
|
||||
position: relative;
|
||||
background: var(--base-background);
|
||||
|
||||
> .value {
|
||||
background: none;
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
@import url("./StatsCardV1/style.css");
|
||||
@import url("./SkillsCardV1/style.css");
|
||||
@import url("./RichEditor/style.css");
|
||||
@import url("./ArmourSheet/style.css");
|
||||
|
||||
@import url("./popover.css");
|
||||
@import url("./popovers/AmmoTracker/style.css");
|
||||
|
|
|
|||
27
templates/Apps/partials/item-header.hbs
Normal file
27
templates/Apps/partials/item-header.hbs
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{{!--
|
||||
Required parameters:
|
||||
"name" : the name of the item
|
||||
"system.quantity" : the quantity of the item
|
||||
"meta.idp" : the ID Prefix for the application
|
||||
--}}
|
||||
<header class="item-header">
|
||||
<div class="name-row">
|
||||
<input
|
||||
type="text"
|
||||
class="name"
|
||||
aria-label="{{ rc-i18n "Name" }}"
|
||||
name="name"
|
||||
value="{{item.name}}"
|
||||
{{disabled limited}}
|
||||
>
|
||||
<span aria-hidden="true">x</span>
|
||||
<input
|
||||
type="number"
|
||||
class="quantity"
|
||||
aria-label="{{ rc-i18n "RipCrypt.common.quantity" }}"
|
||||
data-tooltip="{{ rc-i18n "RipCrypt.common.quantity" }}"
|
||||
name="system.quantity"
|
||||
value="{{system.quantity}}"
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
all: revert-layer;
|
||||
--checkbox-checked-color: var(--accent-3);
|
||||
--checkbox-background-color: var(--accent-2);
|
||||
--checkbox-checkmark-color: black;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@layer resets, themes, elements, components, apps, exceptions;
|
||||
@layer resets, themes, elements, partials, apps, exceptions;
|
||||
|
||||
/* Resets */
|
||||
@import url("./resets/inputs.css") layer(resets);
|
||||
|
|
@ -19,6 +19,9 @@
|
|||
@import url("./elements/string-tags.css") layer(elements);
|
||||
@import url("./elements/table.css") layer(elements);
|
||||
|
||||
/* Partials */
|
||||
@import url("./partials/item-header.css") layer(partials);
|
||||
|
||||
/* Applications */
|
||||
@import url("../Apps/apps.css") layer(apps);
|
||||
|
||||
|
|
|
|||
11
templates/css/partials/item-header.css
Normal file
11
templates/css/partials/item-header.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.item-header {
|
||||
.name-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) min-content 50px;
|
||||
gap: 4px;
|
||||
|
||||
.quantity {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue