From 83d0bad21f4d500ebaa44ef09d129e165884cd97 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Tue, 19 Mar 2024 23:30:58 -0600 Subject: [PATCH] Get the material items finished --- styles/root.scss | 2 +- .../actor/char-sheet/v2/material/inputs.scss | 15 +++++ .../char-sheet/{ => v2}/pages/inventory.scss | 62 ++++++++++++++++++- .../char-sheet/{ => v2}/pages/stats.scss | 0 .../char-sheet/{ => v2}/themes/dark.scss | 10 +++ .../{ => v2}/themes/material-design.scss | 0 .../sheets/actor/char-sheet/{ => v2}/v2.scss | 4 +- .../inventory/items/material.v2.pc.hbs | 62 +++++++++++++++++-- 8 files changed, 146 insertions(+), 9 deletions(-) create mode 100644 styles/sheets/actor/char-sheet/v2/material/inputs.scss rename styles/sheets/actor/char-sheet/{ => v2}/pages/inventory.scss (56%) rename styles/sheets/actor/char-sheet/{ => v2}/pages/stats.scss (100%) rename styles/sheets/actor/char-sheet/{ => v2}/themes/dark.scss (85%) rename styles/sheets/actor/char-sheet/{ => v2}/themes/material-design.scss (100%) rename styles/sheets/actor/char-sheet/{ => v2}/v2.scss (93%) diff --git a/styles/root.scss b/styles/root.scss index cc4fcbe..2d2dd72 100644 --- a/styles/root.scss +++ b/styles/root.scss @@ -15,7 +15,7 @@ @use "./sheets/partials/panel.scss"; @use "./sheets/actor/mvp.scss"; -@use "./sheets/actor/char-sheet/v2.scss"; +@use "./sheets/actor/char-sheet/v2/v2.scss"; @use "./sheets/actor/mob/mob.scss"; @use "./sheets/actor/sync/basic.scss"; @use "./sheets/items/custom.scss"; diff --git a/styles/sheets/actor/char-sheet/v2/material/inputs.scss b/styles/sheets/actor/char-sheet/v2/material/inputs.scss new file mode 100644 index 0000000..5726307 --- /dev/null +++ b/styles/sheets/actor/char-sheet/v2/material/inputs.scss @@ -0,0 +1,15 @@ +.dotdungeon.material { + button { + padding: 8px 16px; + + &.outline { + border-style: solid; + border-color: var(--outline-button-border); + } + + &:disabled { + opacity: 37%; + cursor: default; + } + } +} \ No newline at end of file diff --git a/styles/sheets/actor/char-sheet/pages/inventory.scss b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss similarity index 56% rename from styles/sheets/actor/char-sheet/pages/inventory.scss rename to styles/sheets/actor/char-sheet/v2/pages/inventory.scss index 3429e31..822b31f 100644 --- a/styles/sheets/actor/char-sheet/pages/inventory.scss +++ b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss @@ -1,4 +1,4 @@ -@use "../../../../mixins/material" as material; +@use "../../../../../mixins/material" as material; .dotdungeon .actor--pc-v2 .active.inventory-page { padding-bottom: 50px; @@ -93,4 +93,64 @@ margin: 0; } } + + .item-list { + .material-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + } + } + + .material { + @include material.elevate(1); + padding: 8px; + gap: 8px; + display: grid; + grid-template-columns: 1fr min-content 50px min-content; + align-items: center; + border-radius: 4px; + + &__label { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + justify-self: left; + max-width: 100%; + } + + &__button { + --size: 28px; + @include material.elevate(2); + transition: all 400ms ease-in-out; + color: var(--inventory-material-color); + border-width: 0; + width: var(--size); + height: var(--size); + + &:hover { + @include material.elevate(4); + color: var(--inventory-material-hover-color); + } + } + + &__input { + @include material.elevate(2); + font-family: var(--input-font); + text-align: center; + border-radius: 4px; + transition: all 400ms ease-in-out; + color: var(--inventory-material-color); + + &:hover { + @include material.elevate(4); + color: var(--inventory-material-hover-color); + } + + &:focus { + @include material.elevate(8); + color: var(--inventory-material-focus-color); + } + } + } } \ No newline at end of file diff --git a/styles/sheets/actor/char-sheet/pages/stats.scss b/styles/sheets/actor/char-sheet/v2/pages/stats.scss similarity index 100% rename from styles/sheets/actor/char-sheet/pages/stats.scss rename to styles/sheets/actor/char-sheet/v2/pages/stats.scss diff --git a/styles/sheets/actor/char-sheet/themes/dark.scss b/styles/sheets/actor/char-sheet/v2/themes/dark.scss similarity index 85% rename from styles/sheets/actor/char-sheet/themes/dark.scss rename to styles/sheets/actor/char-sheet/v2/themes/dark.scss index 9690fb8..a71d3ff 100644 --- a/styles/sheets/actor/char-sheet/themes/dark.scss +++ b/styles/sheets/actor/char-sheet/v2/themes/dark.scss @@ -9,11 +9,17 @@ $on-surface: white; $on-primary: $t; $on-secondary: $t; +$title-font: 'Pixelify Sans', sans-serif; +$body-font: sans-serif; + .actor--pc-v2 { --sheet-bg: #{$background}; --nav-bg: #{$surface}; --nav-button-text: #{$on-surface}; + --tab-font: #{$title-font}; + --input-font: #{$body-font}; + /* Elevation backgrounds to following Material design */ --elevation-0dp-bg: #{$surface}; --elevation-1dp-bg: color-mix(in lab, transparent, white 5%); @@ -36,4 +42,8 @@ $on-secondary: $t; --skill-training-select-bg: #{$surface}; --skill-training-select-text-color: #{$on-surface}; --skill-roll-button-text-color: #{$on-surface}; + + --inventory-material-color: white; + --inventory-material-hover-color: white; + --inventory-material-focus-color: white; } diff --git a/styles/sheets/actor/char-sheet/themes/material-design.scss b/styles/sheets/actor/char-sheet/v2/themes/material-design.scss similarity index 100% rename from styles/sheets/actor/char-sheet/themes/material-design.scss rename to styles/sheets/actor/char-sheet/v2/themes/material-design.scss diff --git a/styles/sheets/actor/char-sheet/v2.scss b/styles/sheets/actor/char-sheet/v2/v2.scss similarity index 93% rename from styles/sheets/actor/char-sheet/v2.scss rename to styles/sheets/actor/char-sheet/v2/v2.scss index 5a6d0a0..aacb042 100644 --- a/styles/sheets/actor/char-sheet/v2.scss +++ b/styles/sheets/actor/char-sheet/v2/v2.scss @@ -1,6 +1,6 @@ @use "./themes/dark.scss"; -@use "../../../mixins/material" as material; -@use "../../../mixins/partials" as partials; +@use "../../../../mixins/material" as material; +@use "../../../../mixins/partials" as partials; @use "./pages/stats.scss"; @use "./pages/inventory.scss"; diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs index 9dc7a0d..d355ddf 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs @@ -1,6 +1,58 @@
- Material Name - - X - -
\ No newline at end of file + + {{#if (eq item.system.quantity 0)}} + + {{else}} + + {{/if}} + + +