Make the read-only state of untyped items usable (closes #162 and #159)

This commit is contained in:
Oliver-Akins 2024-04-04 23:02:43 -06:00
parent 1c2ced321b
commit 24d31aad30
4 changed files with 50 additions and 44 deletions

View file

@ -1,43 +1,46 @@
@use "../mixins/material" as material; @use "../mixins/material" as material;
.dotdungeon.style-v3 > .window-content button { .dotdungeon.style-v3 > .window-content {
@include material.elevate(2); button, a.button {
align-items: center; @include material.elevate(2);
border-radius: 4px; align-items: center;
border: none; border-radius: 4px;
box-sizing: border-box; border: none;
color: inherit; box-sizing: border-box;
cursor: pointer; color: inherit;
display: inline-flex; cursor: pointer;
font-family: sans-serif; display: inline-flex;
gap: 4px; font-family: sans-serif;
justify-content: center; gap: 4px;
margin: 0; justify-content: center;
outline: none; margin: 0;
padding: 4px 8px; outline: none;
transition: all 200ms ease-in-out; padding: 4px 8px;
width: initial; transition: all 200ms ease-in-out;
width: initial;
&:hover, &:focus-visible { &:hover, &:focus-visible {
@include material.elevate(4); @include material.elevate(4);
} text-shadow: none;
&:active { }
@include material.elevate(6); &:active {
} @include material.elevate(6);
}
&:disabled { &:disabled {
opacity: 50%; opacity: 50%;
cursor: default; cursor: default;
} }
/* Icon buttons don't use Material styling */ /* Icon buttons don't use Material styling */
&.icon { &.icon {
@include material.undo;
padding: 4px;
&:focus-visible {
@include material.undo; @include material.undo;
// TODO : Accessible focus state padding: 4px;
&:focus-visible {
@include material.undo;
// TODO : Accessible focus state
}
} }
} }
} }

View file

@ -6,4 +6,7 @@
.text-center { .text-center {
text-align: center; text-align: center;
} }
.text-right {
text-align: right;
}
} }

View file

@ -10,11 +10,11 @@
<div class="nav-bar"> <div class="nav-bar">
<nav data-group="page" class="page" aria-label=""> <nav data-group="page" class="page" aria-label="">
<button type="button" data-group="page" data-tab="general">General</button> <a class="button" data-group="page" data-tab="general">General</a>
<button type="button" data-group="page" data-tab="details">Details</button> <a class="button" data-group="page" data-tab="details">Details</a>
<button type="button" data-group="page" data-tab="effects">Effects</button> <a class="button" data-group="page" data-tab="effects">Effects</a>
{{#if meta.showSettingsTab}} {{#if meta.showSettingsTab}}
<button type="button" data-group="page" data-tab="settings">Settings</button> <a class="button" data-group="page" data-tab="settings">Settings</a>
{{/if}} {{/if}}
</nav> </nav>
</div> </div>

View file

@ -15,8 +15,8 @@
id="{{meta.idp}}-purchase-cost" id="{{meta.idp}}-purchase-cost"
> >
{{else}} {{else}}
Purchase Cost <span>Purchase Cost</span>
{{dd-empty-state system.buy}} <span class="text-right">{{dd-empty-state system.buy}}</span>
{{/if}} {{/if}}
</div> </div>
<div class="number panel"> <div class="number panel">
@ -35,12 +35,12 @@
id="{{meta.idp}}-usage-cost" id="{{meta.idp}}-usage-cost"
> >
{{else}} {{else}}
Usage Cost <span>Usage Cost</span>
{{dd-empty-state system.usage_cost}} <span class="text-right">{{dd-empty-state system.usage_cost}}</span>
{{/if}} {{/if}}
</div> </div>
<div class="detail panel--row space-between"> <div class="detail panel--row space-between">
Rarity <span>Rarity</span>
{{#if meta.isEditable}} {{#if meta.isEditable}}
<select <select
class="text-center" class="text-center"
@ -50,7 +50,7 @@
{{{ dd-options system.tier config.itemTiers localize=true }}} {{{ dd-options system.tier config.itemTiers localize=true }}}
</select> </select>
{{else}} {{else}}
{{dd-i18n (concat "dotdungeon.rarity." system.tier)}} <span>{{dd-i18n (concat "dotdungeon.rarity." system.tier)}}</span>
{{/if}} {{/if}}
</div> </div>
{{#if meta.isEmbedded}} {{#if meta.isEmbedded}}