Template:TvCOverview: Difference between revisions

Template page
No edit summary
(okay, top down movelist inspired by MvC2, here we...go)
Line 1: Line 1:
<!-- Wrapper div to enable horizontal scrolling if content overflows -->
<div style="overflow-x:auto;">
<div style="overflow-x:auto;">
<table class="wikitable" style="width:100%; border-collapse:collapse; border-spacing: 0; border:3px solid #4D4D4D; margin: 0;">
  <!-- Main table containing the move data -->
  <table class="wikitable" style="width:100%; border-collapse:collapse; border:3px solid #4D4D4D; margin: 0;">
 
    <!--
      Row displaying the "Move" title, spanning all columns.
      Colspan is set to 8 to match the total number of columns including the "Move" column.
    -->
    <tr>
      <th style="width:100%; min-width:100%; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; background-color:#4D4D4D; color:white; font-size:150%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;" colspan="8">
        Move
      </th>
    </tr>
 
    <!--
      Row containing the actual move content.
      Colspan is set to 7 because the "Move" column is excluded in data rows.
      Padding-right is adjusted to prevent embedded media from pushing content to the right.
    -->
    <tr>
      <td style="width:100%; padding-right:40%; min-width:100%; min-height:50px; margin:0px; border:3px solid #4D4D4D; text-align:center; background-color:#1c1e20; color:white; font-size:120%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;" colspan="7">
        {{{move}}}
      </td>
    </tr>
 
    <!-- Header row for the data table -->
    <tr>
      <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th>
      <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th>
      <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th>
      <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Block Adv</th>
      <th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Damage<br>(Billions)</th>
      <th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Properties</th>
      <th style="width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Notes</th>
    </tr>
 
    <!--
      Data row containing the move attributes.
      Cells alternate background colors for readability.
      Mouseover effects are added for interactivity.
    -->
    {{#tag:tr|
      {{#tag:td style="background: #1c1e20; width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{startup}}} }}
      {{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{active}}} }}
      {{#tag:td style="background: #1c1e20;width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{recovery}}} }}
      {{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{blockadv}}} }}
      {{#tag:td style="background: #1c1e20; width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{damage}}} }}
      {{#tag:td style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="background: #292929; this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{properties}}} }}
      {{#tag:td style="background: #1c1e20;width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{notes}}} }}
    }}
  </table>
</div>
 
<!-- Category for organizing content within the wiki -->
[[Category: Tatsunoko vs Capcom: Ultimate All Stars]]
 
<!--
  Important Notes:
 
  1. Padding Adjustment:
    - The 'padding-right:40%;' in the '{{{move}}}' content cell is crucial.
    - It prevents embedded media (like .webm videos) within '{{{move}}}' from being pushed to the right of the table.
    - This padding adjusts the available space, ensuring the media stays aligned within the table's layout.
 
  2. Colspan Consistency:
    - The "Move" header uses 'colspan="8"' because it spans across all columns, including the "Move" column that may be present in other sections.
    - The '{{{move}}}' content row uses 'colspan="7"' to align properly with the rest of the table, excluding the "Move" column in data rows.
    - Ensure colspan values match the actual number of columns to maintain table structure.
 
  3. Column Widths:
    - Column widths are specified in percentages to control the layout.
    - Be cautious when adjusting these values; they should sum up to approximately 100% to avoid layout issues.
    - The current widths are designed to balance the table aesthetically.
 
  4. Styling and Fonts:
    - Consistent styling is applied throughout for a uniform appearance.
    - Fonts like Impact and Haettenschweiler are used for their bold, impactful look.
    - Any changes to font or style should maintain readability and visual appeal.
 
  5. Interactivity:
    - Mouseover effects are included in data cells for better user experience.
    - These effects highlight cells when hovered over, providing visual feedback.
 
  6. Alternate Row Colors:
    - Background colors alternate in data rows to improve readability.
    - Maintain this pattern when adding or modifying rows to keep the table clear.
 
  7. Responsive Design:
    - The 'overflow-x:auto;' on the wrapper div allows the table to be scrollable horizontally on smaller screens.
    - Consider additional responsive design practices if the table will be viewed on various devices.
 
  8. Content in '{{{move}}}':
    - When including media or complex content in '{{{move}}}', ensure it doesn't exceed the cell's dimensions.
    - Test with different content types to confirm the layout remains intact.
    - If issues arise, adjust padding or consider resizing media elements.
 
  9. Future Modifications:
    - When editing, be cautious with padding, margins, and widths, as they can significantly affect the layout.
    - Always test changes across different browsers and screen sizes to ensure compatibility.
 
  10. Troubleshooting:
      - If content appears misaligned, check colspan values and ensure they match the number of columns.
      - Inspect for any conflicting styles or scripts that might override the table's CSS.
 
  By adhering to these guidelines, future edits should be more manageable, and the risk of introducing layout issues can be minimized.
-->
 
<!-- Also for records I have the only code which simply put the webm and move name to the side, for when I start to hate this new UX design and desperately want to go back, below -->
 
<!--
 
<includeonly>
== {{{header}}} ==
</includeonly>
 
<div style="width:100%; border:3px solid #4D4D4D; text-align: left; background: linear-gradient(to right, #211f1f, #4c4c4c); background-color: #4D4D4D; color: white; font-size: 225%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;">
''{{{header}}}''
</div>
 
<div style="overflow-x:auto;">
<table class="wikitable" style="width:100%; border-collapse:collapse; border:3px solid #4D4D4D; margin: 0;">
<tr>
<tr>
<th style="width:10%; min-width:80px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center;">Move</th>
<th style="width:10%; min-width:80px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center;">Move</th>
<th style="width:12%; min-width:100px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th>
<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th>
<th style="width:12%; min-width:100px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th>
<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th>
<th style="width:12%; min-width:100px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th>
<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th>
<th style="width:12%; min-width:100px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Block Adv</th>
<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Block Adv</th>
<th style="width:15%; min-width:120px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Damage<br>(Billions)</th>
<th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Damage<br>(Billions)</th>
<th style="width:15%; min-width:120px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Properties</th>
<th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Properties</th>
<th style="width:20%; min-width:150px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Notes</th>
<th style="width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Notes</th>
</tr>
</tr>
{{#tag:tr|
{{#tag:tr|
{{#tag:td style="width:10%; min-width:350px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='#e0e0e0';" | {{{move}}} }}
{{#tag:td style="width:10%; min-width:350px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='#e0e0e0';" | {{{move}}} }}
{{#tag:td style="background: #1c1e20; width:12%; min-width:100px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{startup}}} }}
{{#tag:td style="background: #1c1e20; width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{startup}}} }}
{{#tag:td style="width:12%; min-width:100px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{active}}} }}
{{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{active}}} }}
{{#tag:td style="background: #1c1e20;width:12%; min-width:100px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{recovery}}} }}
{{#tag:td style="background: #1c1e20;width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{recovery}}} }}
{{#tag:td style="width:12%; min-width:100px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{blockadv}}} }}
{{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{blockadv}}} }}
{{#tag:td style="background: #1c1e20; width:15%; min-width:120px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{damage}}} }}
{{#tag:td style="background: #1c1e20; width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{damage}}} }}
{{#tag:td style="width:15%; min-width:120px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="background: #292929; this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{properties}}} }}
{{#tag:td style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="background: #292929; this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{properties}}} }}
{{#tag:td style="background: #1c1e20;width:20%; min-width:150px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{notes}}} }}
{{#tag:td style="background: #1c1e20;width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{notes}}} }}
}}
}}
</table>
</table>
</div>
</div>
[[Category: Tatsunoko vs Capcom: Ultimate All Stars]]
[[Category: Tatsunoko vs Capcom: Ultimate All Stars]]
-->

Revision as of 22:21, 3 October 2024

       Move

       {{{move}}}
Startup Active Recovery Block Adv Damage
(Billions)		 Properties Notes
{{{startup}}} {{{active}}} {{{recovery}}} {{{blockadv}}} {{{damage}}} {{{properties}}} {{{notes}}}



Retrieved from "https://wiki.supercombo.gg/index.php?title=Template:TvCOverview&oldid=308332"