diff --git a/app/assets/javascripts/items/show.js b/app/assets/javascripts/items/show.js index e9d8aaab..43f88160 100644 --- a/app/assets/javascripts/items/show.js +++ b/app/assets/javascripts/items/show.js @@ -81,6 +81,25 @@ class SpeciesFacePickerOptions extends HTMLElement { } } +class MeasuredContent extends HTMLElement { + connectedCallback() { + setTimeout(() => this.#measure(), 0); + } + + #measure() { + // Find our `` parent, and set our natural width + // as `var(--natural-width)` in the context of its CSS styles. + const container = this.closest("measured-container"); + if (container == null) { + throw new Error( + ` must be in a `, + ); + } + container.style.setProperty("--natural-width", this.offsetWidth + "px"); + } +} + customElements.define("species-color-picker", SpeciesColorPicker); customElements.define("species-face-picker", SpeciesFacePicker); customElements.define("species-face-picker-options", SpeciesFacePickerOptions); +customElements.define("measured-content", MeasuredContent); diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index ea2ea066..8c06325d 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -55,12 +55,25 @@ body.items-show text-decoration: none background: #EDF2F7 - padding: .75em + padding-inline: .75em border-radius: .375em min-height: 2rem min-width: 2rem box-sizing: border-box + .customize-more-label + width: 0 + overflow: hidden + transition: width .25s + white-space: nowrap + + measured-content + padding-right: .5em + + &:hover, &:focus + .customize-more-label + width: var(--natural-width) + outfit-viewer display: block position: relative diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index acd75df9..d8171b46 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -22,6 +22,9 @@ = link_to wardrobe_path(params: @preview_outfit.wardrobe_params), class: "customize-more", target: "_blank", title: "Customize more", "aria-label": "Customize more" do + %measured-container.customize-more-label + %measured-content + Customize more = edit_icon %species-color-picker