Template:ItemBox: Difference between revisions

Jump to navigation Jump to search
Jannepg (talk | contribs)
mNo edit summary
Vergir (talk | contribs)
Add |size= param (scales the whole card via em base); apply name font-size in em so it scales; request larger icon for crisp scaling; drop resolved TODO (with help from vergir-bot LLM)
Line 1: Line 1:
<templatestyles src="Template:ItemBox/styles.css" /><includeonly><!--
<templatestyles src="Template:ItemBox/styles.css" /><includeonly><!--
TODO: text scaling with js
vars:
vars:
   itemName
   itemName
   showTierTag
   showTierTag
  size


   overrideDisplayName
   overrideDisplayName
Line 40: Line 39:
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-->
-->
<div class="CitadelShopMod {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}}">
<div class="CitadelShopMod {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
   <div class="ModBackground">
   <div class="ModBackground">
       <div class="ModCard">
       <div class="ModCard">
           <div class="modIconContainer">
           <div class="modIconContainer">
               <div class="ModIconImage">[[File:{{#var:linkImage}}.png|80px|link=]]</div>
               <div class="ModIconImage">[[File:{{#var:linkImage}}.png|160px|link=]]</div>
               <div class="TierContainer">
               <div class="TierContainer">
                   <div class="tier_bg_shadow"></div>
                   <div class="tier_bg_shadow"></div>
Line 53: Line 52:
           </div>
           </div>
           <div class="mod_name_area">
           <div class="mod_name_area">
               <p class="modName" style="font-size:{{#var:fontSize}}px;">{{#var:displayName}}</p>
               <p class="modName" style="font-size:{{#var:fontSize}}em;">{{#var:displayName}}</p>
           </div>
           </div>
           <div class="paperWear"></div>
           <div class="paperWear"></div>