Deadlock Wiki

Template:Ability card v2/Card: Difference between revisions

Browse history interactively
← Older edit
VisualWikitext
fixed header attrs on mobile
Replaced header attribute page links with a tooltip
 
(55 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<includeonly>{{anchor|{{{name}}}}}<div style="font-size: 16px; font-family: 'PT Serif', 'Palatino', 'Georgia'; color: #FFEFD7; display:flex; flex-direction:column;   background: rgb(52,52,52);
<includeonly>{{anchor|{{{name}}}}}<div style="font-size: 0.9rem; line-height: 1.4; font-family: 'Retail Demo Regular', 'PT Serif', serif; color: #FFEFD7; display:flex; flex-direction:column; background: rgb(52,52,52); background: linear-gradient(90deg, rgba(52,52,52,1) 0%, rgba(66,66,66,1) 14%, rgba(77,77,77,1) 100%); align-items: center; width: 100%; max-width: 500px; border-radius: 4px;">
background: linear-gradient(90deg, rgba(52,52,52,1) 0%, rgba(66,66,66,1) 14%, rgba(77,77,77,1) 100%);   align-items: center; max-width: 700px">


   <!-- HEADER -->
   <!-- HEADER -->
   <div style="display:flex; flex-direction:row; justify-content: space-between; width: 100%; background: #121212; font-size: 14px;">     
   <div style="width: 100%">
    <div style="display:flex; flex-direction:column; padding: 20px 0 20px 20px">
    <div style="display:flex; flex-direction:row; justify-content: space-between; background: #121212; font-size: calc(1em - 2px); border-radius: 13px; padding: 0 8px 14px 8px">     
      <div style="font-size: 26px">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{{name}}}}}</div>
      <div style="display:flex; flex-direction:column;">
      <div style="display:flex; flex-direction:row; margin-left: 10px;">
        <div style="font-size: 1.3rem;">
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{range|}}}|uom=m|icon=CastRange.png}}
<span style="filter: brightness(0) saturate(100%) invert(98%) sepia(19%) saturate(1458%) hue-rotate(301deg) brightness(102%) contrast(109%); padding: 0 5px 0 7px">[[File:{{{icon}}}|45px|link=]]</span><span style="font-family:Retail Demo bold;">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{{name}}}}}</span>
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{radius|}}}|uom=m|icon=AttributeIconTechRange.png}}
    </div>
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{ability_width|}}}|uom=m|icon=AttributeIconTechRange.png}}
        <div style="display:flex; flex-direction:row; margin-left: 10px;">
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{duration|}}}|uom=s|icon=AttributeIconMaxChargesIncrease.png}}
          {{Ability_card_v2/HeaderAttr|{{{channel_time|}}}|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}}
          {{Ability_card_v2/HeaderAttr|{{{range|}}}|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}}
          {{Ability_card_v2/HeaderAttr|{{{radius|}}}|ss={{{radius_ss|}}}|uom=m|icon=[[File:AttributeIconTechRange.png|Radius|20px|link=]]}}
          {{Ability_card_v2/HeaderAttr|{{{ability_width|}}}|uom=m|icon=[[File:AttributeIconTechRange.png|Width|20px|link=]]}}
          {{Ability_card_v2/HeaderAttr|{{{duration|}}}|uom=s|ss={{{duration_ss|}}}|icon=[[File:AttributeIconTechDuration.png|Duration|20px|link=]]}}
        </div>
       </div>
       </div>
    </div>
      <div style="display:flex; flex-direction:column; align-items: end; justify-content: flex-end;">
    <div style="display:flex; flex-direction:column; align-items: end; padding: 20px 0 20px 0">
        <div style="display:flex; flex-direction:row; justify-content: flex-end; margin-bottom: 5px; margin-right: 20px;">
      <div style="display:flex; flex-direction:row; justify-content: flex-end; margin-bottom: 5px; margin-right: 20px;">
          {{Ability_card_v2/HeaderAttr|{{{num_of_charges|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}}
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{num_of_charges|}}}|icon=AttributeIconMaxChargesIncrease.png|style=margin-right: 0;}}
          {{Ability_card_v2/HeaderAttr|{{{charge_cooldown|}}}|ss={{{charge_cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldownBetweenChargeUses.png|Charge Cooldown|16px|link=]]|style=margin-left: 1px; margin-right: 0}}
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{charge_cooldown|}}}|uom=s|icon=AttributeIconTechCooldownBetweenChargeUses.png|style=font-size: 12px; background-color: #242424; margin-right: 0;|icon_size=15px}}
        </div>
          {{Ability_card_v2/HeaderAttr|{{{cooldown|}}}|ss={{{cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldown.png|Cooldown|20px|link=]]}}
       </div>
       </div>
        {{User:Saag/Sandbox/AbilityCard/HeaderAttr|{{{cooldown|}}}|uom=s|icon=AttributeIconTechCooldown.png}}
     </div>
     </div>
   </div>
   </div>
    
    
  <!-- INFO SECTIONS -->
<!-- INFO SECTIONS -->
   <div style="display:flex; flex-direction:column; align-items: center; margin: 5px 10px 20px 10px; width: calc(100% - 18px);">
<div style="margin: 5px 10px 0px 10px; padding: 3px 0 5px 0; width: calc(100% - 18px);">
     <div style="padding: 20px 10px 20px 10px">{{{description}}}</div>
  <!-- Info Section #1 -->
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(90% - 5px); min-width: 280px;">
   <div style="display:flex; flex-direction:column; align-items: center; width: 100%">
         {{#invoke: AbilityData|get_info_main|{{{hero_name}}}|{{{ability_num}}}|1}}
     <div style="padding: 0 10px 0 10px">{{{info1_desc|}}}</div>
      <!-- Main Info -->
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
         {{{info1_mainbox1|}}}{{{info1_mainbox2|}}}{{{info1_mainbox3|}}}
       </div>
       </div>
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; background-color: #2A2A2A; width: calc(90% - 11px); min-width: 280px;">
 
         {{#invoke: AbilityData|get_info_alt|{{{hero_name}}}|{{{ability_num}}}|1}}
      <!-- Alt Info -->
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
         {{{info1_altbox1|}}}{{{info1_altbox2|}}}{{{info1_altbox3|}}}{{{info1_altbox4|}}}{{{info1_altbox5|}}}{{{info1_altbox6|}}}
       </div>
       </div>
   </div>
   </div>
    
    
  <!-- Info Section #2 -->
  <div style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px">
    <div style="padding: 0 10px 0 10px">{{{info2_desc|}}}</div>
      <!-- Main Info -->
      <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
        {{{info2_mainbox1|}}}{{{info2_mainbox2|}}}{{{info2_mainbox3|}}}
      </div>
      <!-- Alt Info -->
      <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
        {{{info2_altbox1|}}}{{{info2_altbox2|}}}{{{info2_altbox3|}}}{{{info2_altbox4|}}}{{{info2_altbox5|}}}{{{info2_altbox6|}}}
      </div>
  </div>
</div>
   <!-- UPGRADES -->
   <!-- UPGRADES -->
   <div style="display:flex; flex-direction:row; flex-wrap: wrap; margin-bottom: 10px; justify-content: center; width: calc(90% - 16px); min-width: 280px;>
   <div style="display:flex; flex-direction:row; flex-wrap: wrap; margin-bottom: 5px; justify-content: center; width: calc(97% - 16px); min-width: 280px;>
     {{#invoke: AbilityData|get_upgrades|{{{hero_name}}}|{{{ability_num}}}}}
     {{{upgrade1}}}{{{upgrade2}}}{{{upgrade3}}}
   </div>
   </div>
    
    
   <!-- NOTES -->
   <!-- NOTES -->
   {{#if: {{{notes|}}}|
   {{#if: {{{notes|}}}|
   <div style="align-self: flex-start; margin: 10px 0 10px 20px">
   <div style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
     <div style="font-size:20px"> Notes </div>
     <div><span style="font-size:1.15rem;"> {{#if: {{{name_link|}}}|
    <div>{{{notes}}}</div>
    {{#vardefine:notes_localized|{{#invoke:Dictionary|translate|Notes|show_needs_translation=false}}}}
  </div>}}
[[{{{name_link}}}/{{#var:notes_localized}}|{{#var:notes_localized}}]]
 
|
</div></includeonly><noinclude>
{{#invoke:Dictionary|translate|Notes}}
{{#invoke:AbilityData|get_ability_card|Wraith|1|true}}
}}</span>
{{#if:{{{notes_source_page|}}}
|  <span style="font-size:.7rem;">[[{{{notes_source_page}}}|{{#invoke:Dictionary|translate|edit}}]]</span>}}</div>
</div>
<div class="mw-collapsible mw-collapsed" style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
<div>
{{{notes}}}
</div>
</div>}}</div></includeonly><noinclude>
{{Documentation}}
</noinclude>
</noinclude>
Retrieved from "https://deadlock.wiki/Template:Ability_card_v2/Card"