Template talk:Seats

From eRepublik Official Wiki
Jump to: navigation, search

Code Breakdown

Since the code for this template is really long, I'll break it down for you guys.

The Code

<div style="width: {{#if: {{{width|}}}|{{{width|}}}|800}}px; margin: 5px;"><p style="width: {{{p1percent|}}}%; {{#if: {{{p1color|}}} | background: {{{p1color|}}} | background: rgb(255, 201, 14)}}; {{#ifexpr: {{{p2percent|}}} = 0|border-radius: 5px|border-radius: 5px 0 0 5px}}; margin: 0; padding: 5px 0 5px 0; text-align: center; font-weight: bold; display: inline-block;">{{#ifexpr: {{{p1percent|}}} > 0|{{{p1percent|}}}%}}</p><p style="width: {{{p2percent|}}}%; {{#if: {{{p2color|}}} | background: {{{p2color|}}} | background: rgb(239, 228, 176)}}; {{#ifexpr: {{{p3percent|}}} = 0|border-radius: 0 5px 5px 0;}} padding: 5px 0 5px 0; margin: 0; text-align: center; font-weight: bold; display: inline-block;">{{#ifexpr: {{{p2percent|}}} > 0|{{{p2percent|}}}%}}</p><p style="width: {{{p3percent|}}}%; {{#if: {{{p3color|}}} | background: {{{p3color|}}} | background: rgb(181, 230, 29)}}; {{#ifexpr: {{{p4percent|}}} = 0|border-radius: 0 5px 5px 0;}} padding: 5px 0 5px 0; margin: 0; text-align: center; font-weight: bold; display: inline-block;">{{#ifexpr: {{{p3percent|}}} > 0|{{{p3percent|}}}%}}</p><p style="width: {{{p4percent|}}}%; {{#if: {{{p4color|}}} | background: {{{p4color|}}} | background: rgb(153, 217, 234)}}; {{#ifexpr: {{{p5percent|}}} = 0|border-radius: 0 5px 5px 0;}} padding: 5px 0 5px 0; margin: 0; text-align: center; font-weight: bold; display: inline-block;">{{#ifexpr: {{{p4percent|}}} > 0|{{{p4percent|}}}%}}</p><p style="width: {{{p5percent|}}}%; {{#if: {{{p5color|}}} | background: {{{p5color|}}} | background: rgb(112, 146, 190)}}; border-radius: 0 5px 5px 0; padding: 5px 0 5px 0; margin: 0; text-align: center; font-weight: bold; display: inline-block;">{{#ifexpr: {{{p5percent|}}} > 0|{{{p5percent|}}}%}}</p> {{#ifeq: {{{key|}}}|1|{{Template:Seats/Key|p1color={{{p1color|}}}|p2color={{{p2color|}}}|p3color={{{p3color|}}}|p4color={{{p4color|}}}|p5color={{{p5color|}}}|p1={{{p1|}}}|p2={{{p2|}}}|p3={{{p3|}}}|p4={{{p4|}}}|p5={{{p5|}}}|seats={{{seats|}}}}}}} {{#ifexpr: {{{p5percent|}}} = 0|{{Template:Seats/NoSeat}}}}</div>

What it Means

  • This is the container for the graph. Whatever the width the divider element is set to, that is how wide the graph will be.
    • width: {{#if: {{{width|}}}|{{{width|}}}|800}}px -- If the width attribute is set, then the divider will be as wide as specified, otherwise it will be 800px.
  • This paragraph tag forms the main visual element of the graph (the colored "blocks"). Most of the template is basically this paragraph repeated five times.
    • width: {{{p1percent|}}}%; -- The percentages that the user fills out in the template are used to set the width. If a party gets 20% of the vote, then their "block" with be as wide as 20% of the graph.
    • {{#if: {{{p1color|}}} | background: {{{p1color|}}} | background: rgb(255, 201, 14)}}; -- This is used to determine the color of the block. If there is a color specified for that party, it is used. Otherwise, it uses the default color.
    • {{#ifexpr: {{{p2percent|}}} = 0|border-radius: 5px|border-radius: 5px 0 0 5px}}; -- This controls the "border-radius" property, which is basically what makes the blocks round or not. Different blocks will get different border-radius properties. Furthermore, the border-radius properties can change depending if a party gets votes or not. With this code, the first party block gets "border-radius: 5px 0 0 5px", or in other words, round the top-left and bottom-left corners. If the second party gets no votes, which means that only the first party gets votes (rare occurrence, but this template is prepared for that) then it gets "border-radius: 5px", or in other words, round all corners.
    • margin: 0; padding: 5px 0 5px 0; text-align: center; font-weight: bold; display: inline-block; -- These are just basic attributes for the blocks. Nothing special here, except for one crucial part, "display: inline-block". "display: inline-block" is what gets the blocks to go next to each other instead of displaying themselves on separate lines. Note for those who know CSS: The difference between inline-block and inline is that in inline-block, the padding and margins are used, while in inline, those are dropped.
  • {{#ifexpr: {{{p1percent|}}} > 0|{{{p1percent|}}}%}} -- Determines if the text displaying the percentage will show up. If the party gets zero percent, then the text showing what percent the party got will be hidden to avoid problems. (The problem is that the width of the "blocks" is set according to what percentage the party got. If a party gets 0% of the vote, and its block is set to 0% width, but there's text in it, this can cause problems.)
  • This is basically the same code as mentioned above in the red text.
    • {{#ifexpr: {{{p3percent|}}} = 0|border-radius: 0 5px 5px 0;}} -- There is one small difference. In the second party block, by default, its corners are not rounded. The top and bottom right corners are only rounded when the third party gets no votes.
  • Tells the Template:Seats/Key template to handle some code. The code that is handled includes colors associated with each party and the amount of total seats in the election (if specified).
    • {{#ifeq: {{{key|}}}|1| ... ...lots of code... ... }} -- If the "key" attribute is set to "1", then the key will be display. Otherwise, it will be hidden.
  • {{#ifexpr: {{{p5percent|}}} = 0|{{Template:Seats/NoSeat}}}} -- If the 5th party gets no votes, then a message saying that one or more parties received no votes is displayed. This is only done for the 5th party because it assumes the user arranged the party from most votes to least votes. Otherwise, there would be a lot of extra code needed.

Other Notes

  • If you haven't noticed already, this code works best when the user orders the parties from highest number of votes to lowest number of votes. Otherwise, this could cause issues with rounding the borders and such.
  • "border-radius: top right bottom left"
    • "border-radius: 5px 0 0 5px" -- Round the top-left and bottom-left corners.
    • "border-radius: 0 5px 5px 0" -- Round the top-right and bottom-right corners.
    • "border-radius: 5px" -- Round all corners.
Retrieved from "https://wiki.erepublik.com/index.php?title=Template_talk:Seats&oldid=464874"