Template:ItemBox: Difference between revisionsGive feedback
Use per-item paper for the lowGraphics blend rather than forcing one, now that the blend caches regardless of variety (with help from vergir-bot LLM) |
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM) |
||
| (10 intermediate revisions by one other user not shown) | |||
| Line 8: | Line 8: | ||
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | -->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | ||
Measured name size ( | Measured name size (cqw) and stable per-item texture variety. | ||
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!-- | -->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!-- | ||
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!-- | -->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!-- | ||
| Line 21: | Line 21: | ||
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | -->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | ||
lowGraphics=true is | lowGraphics=true is for callers that place dozens of cards on one page (the | ||
card navboxes). It swaps the paper texture from the normal-mode multiply, | |||
the paper texture | which blends two images and so is re-rasterised every scrolled frame, to a | ||
transparent-paper overlay that is a single cacheable image. On the profiled | |||
navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and | |||
roughly doubled the frame rate. The wear and icon masks are clips of a | |||
single image, not blends, so they cache once rasterised and stay at full | |||
detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and | |||
keyed off the same per-item texture-vN class, so a card keeps its paper | |||
across both modes. | |||
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!-- | |||
-->{{#vardefine: | |||
Links. | Links. | ||
| Line 50: | Line 38: | ||
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!-- | -->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!-- | ||
--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics | --><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;"> | ||
<div class="itembox-background"> | <div class="itembox-background"> | ||
<div class="itembox-card"> | <div class="itembox-card"> | ||
| Line 62: | Line 50: | ||
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div> | <div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div> | ||
</div> | </div> | ||
<div class="itembox-name-area"> | <!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. --> | ||
<p class="itembox-name" style="font-size:{{#var:fontSize}} | <div class="itembox-name-area" style="container-type: inline-size;"> | ||
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p> | |||
</div> | </div> | ||
<div class="itembox-wear"></div> | <div class="itembox-wear"></div> | ||