RC-36 | Abilities | Guts Input
This commit is contained in:
parent
9c967aa354
commit
23cad8fcc3
4 changed files with 72 additions and 7 deletions
|
|
@ -71,6 +71,7 @@
|
|||
class="value"
|
||||
value="{{ability.value}}"
|
||||
name="system.ability.{{ability.id}}"
|
||||
min=0
|
||||
>
|
||||
{{else}}
|
||||
<span>{{ability.value}}</span>
|
||||
|
|
@ -92,7 +93,44 @@
|
|||
{{/each}}
|
||||
|
||||
{{!-- Health --}}
|
||||
<div></div>
|
||||
<div class="ability">
|
||||
<div class="compass dual">
|
||||
{{#if meta.editable}}
|
||||
<input
|
||||
type="number"
|
||||
id="{{meta.idp}}-guts-value"
|
||||
class="value"
|
||||
name="system.guts.value"
|
||||
value="{{guts.value}}"
|
||||
min="0"
|
||||
>
|
||||
{{else}}
|
||||
<span
|
||||
class="value"
|
||||
aria-describedby="{{meta.idp}}-guts-value-label"
|
||||
{{!-- TODO: aria-label="{{ rc-i18n "RipCrypt.Apps.a11y.guts-value-readonly" }}" --}}
|
||||
>
|
||||
{{ guts.value }}
|
||||
</span>
|
||||
{{/if}}
|
||||
<span
|
||||
class="max"
|
||||
aria-hidden="true"
|
||||
{{!-- TODO: aria-label="{{ rc-i18n "RipCrypt.Apps.a11y.guts-max-readonly" }}" --}}
|
||||
>
|
||||
{{ guts.max }}
|
||||
</span>
|
||||
</div>
|
||||
{{#if meta.editable}}
|
||||
<label class="col-header" for="{{meta.idp}}-guts-value">
|
||||
{{ rc-i18n "RipCrypt.common.guts" }}
|
||||
</label>
|
||||
{{else}}
|
||||
<div class="col-header label" id="{{meta.idp}}-guts-value-label">
|
||||
{{ rc-i18n "RipCrypt.common.guts" }}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{!-- Move & Run --}}
|
||||
<div class="ability">
|
||||
|
|
|
|||
|
|
@ -115,8 +115,8 @@
|
|||
|
||||
&.dual {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
--distance-from-edge: 3px;
|
||||
font-size: var(--font-size-14);
|
||||
--distance-from-edge: 4px;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
|
|
@ -132,11 +132,13 @@
|
|||
width: 50%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
/* border-bottom: none; */
|
||||
}
|
||||
|
||||
> .value {
|
||||
top: var(--distance-from-edge);
|
||||
left: var(--distance-from-edge);
|
||||
clip-path: polygon(100% 0, 100% 60%, 60% 100%, 0 100%, 0 0);
|
||||
}
|
||||
> .max {
|
||||
bottom: var(--distance-from-edge);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue