alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-08-18 17:53:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix padding on preview button

Browse Source
This commit is contained in:
Ryan Barlow
2026-05-28 21:53:58 +01:00
parent a5e504c3e9
commit 3f4161814d
1 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/CosmeticButton.ts
+35 -29
View File
@@ -221,39 +221,45 @@ export class CosmeticButton extends LitElement {
: undefined} : undefined}
.name=${this.displayName} .name=${this.displayName}
> >
<button <div
class="group relative flex flex-col items-center w-full ${isPattern || class="flex flex-col items-center w-full ${isPattern || isSkin
isSkin
? "gap-2" ? "gap-2"
: "gap-1"} rounded-lg cursor-pointer transition-all duration-200 flex-1" : "gap-1"}"
@click=${() => this.handleClick()}
> >
${(c?.product ?? priceHard ?? priceSoft) <button
? html`<cosmetic-info class="group relative flex flex-col items-center w-full ${isPattern ||
.artist=${artist} isSkin
.rarity=${c!.rarity} ? "gap-2"
.colorPalette=${this.resolved.colorPalette?.name} : "gap-1"} rounded-lg cursor-pointer transition-all duration-200"
.showAdFree=${isPurchasable} @click=${() => this.handleClick()}
></cosmetic-info>`
: nothing}
<div
class="w-full aspect-square flex items-center justify-center bg-white/5 rounded-lg p-2 border border-white/10 group-hover:border-white/20 transition-colors duration-200 overflow-hidden"
> >
${this.renderPreview()} ${(c?.product ?? priceHard ?? priceSoft)
</div> ? html`<cosmetic-info
</button> .artist=${artist}
${(isPattern || isSkin) && this.onPreview .rarity=${c!.rarity}
? html`<button .colorPalette=${this.resolved.colorPalette?.name}
class="w-full px-3 py-2 bg-white/10 hover:bg-white/20 text-white border border-white/20 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors duration-200 cursor-pointer" .showAdFree=${isPurchasable}
@click=${(e: Event) => { ></cosmetic-info>`
e.stopPropagation(); : nothing}
this.onPreview?.(this.resolved);
}} <div
class="w-full aspect-square flex items-center justify-center bg-white/5 rounded-lg p-2 border border-white/10 group-hover:border-white/20 transition-colors duration-200 overflow-hidden"
> >
${translateText("store.preview_skin")} ${this.renderPreview()}
</button>` </div>
: nothing} </button>
${(isPattern || isSkin) && this.onPreview
? html`<button
class="w-full px-3 py-2 bg-white/10 hover:bg-white/20 text-white border border-white/20 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors duration-200 cursor-pointer"
@click=${(e: Event) => {
e.stopPropagation();
this.onPreview?.(this.resolved);
}}
>
${translateText("store.preview_skin")}
</button>`
: nothing}
</div>
${isOwnedSubscription ${isOwnedSubscription
? html`<div ? html`<div
class="w-full mt-2 px-4 py-2 bg-amber-500/20 text-amber-300 border border-amber-500/40 rounded-lg text-xs font-bold uppercase tracking-wider text-center" class="w-full mt-2 px-4 py-2 bg-amber-500/20 text-amber-300 border border-amber-500/40 rounded-lg text-xs font-bold uppercase tracking-wider text-center"