View source for User:Tiddlywinks/ref/Layouts

Just a page of references for myself so I don't have to keep looking around to different pages to refresh myself.

;TBD
* Roundy vs roundtable, someone said something...

==Table types==
;Standard table
This uses all shades of a {{cat|color templates|color}}: base color (the background/"border" between cells, also visible if a cell is skipped), dark (the outer border), and light (the header background).
{| class="roundy" style="margin: auto; text-align: center; background-color: #{{bulba color}}; border: 3px solid #{{bulba color dark}};"
|-
! style="background-color: #{{bulba color light}}; {{roundytl|5px}}" | Category
! style="background-color: #{{bulba color light}};" | Move Gauge
! style="background-color: #{{bulba color light}};" | MP
! style="background-color: #{{bulba color light}};" | Base Power
! style="background-color: #{{bulba color light}}; {{roundytr|5px}}" | Max Power
|- style="background-color: #FFF;"
| Physical
| 1
| —
| 25
| 30
|-
| style="background-color: #FFF; {{roundybl|5px}}" | Physical
| style="background-color: #FFF;" | 1
|
| style="background-color: #FFF;" | 25
| style="background-color: #FFF; {{roundybr|5px}}" | 30
|}

As an alternative to specifying the background color for each cell in the last row, sometimes an empty final row is used. (Or sometimes if your table needs notes, you can put them there as a footer.)
{| class="roundy" style="margin: auto; text-align: center; background-color: #{{bulba color}}; border: 3px solid #{{bulba color dark}};"
|-
! style="background-color: #{{bulba color light}}; {{roundytl|5px}}" | Category
! style="background-color: #{{bulba color light}};" | Move Gauge
! style="background-color: #{{bulba color light}};" | MP
! style="background-color: #{{bulba color light}};" | Base Power
! style="background-color: #{{bulba color light}}; {{roundytr|5px}}" | Max Power
|- style="background-color: #FFF;"
| Physical
| 1
| —
| 25
| 30
|- style="background-color: #FFF;"
| Physical
| 1
| —
| 25
| 30
|- style="background-color: #FFF;"
| Physical
| 1
| —
| 25
| 30
|-
!
|}

There are ups and downs either way. The latter format may look a bit awkward, but it's much easier to add rows at the end (so it may be useful if a table might be updated frequently). The former format can look more natural, but if you add rows, you have to change the former last row so it set its color from the row instead (so it may be best if you don't expect to change the table often). The above format can also have issues when a table is sortable, with the rounded row moving to the middle of the table.

;Nested table
This uses nested tables to imitate a single table. Its cell borders are black lines, and the effect of nesting the tables adds a buffer against sharp corners in the first and last rows so that the "background" still shows a proper curve, with no corners cutting into it (while keeping the convenience of setting the background color once for the whole row). This only uses two shades of a {{cat|color templates|color}}: base color (outer border) and light (the cells headers and inner border/background).

{| class="roundy" style="margin: auto; background-color: #{{kanto color light}}; border: 5px solid #{{kanto color}}"
|-
|
{| class="sortable" border=1 style="width: 100%; background-color: #FFF; border: 1px solid #{{kanto color light}}; border-collapse: collapse;"
|- style="background-color: #{{kanto color light}}"
! [[List of Pokémon by National Pokédex number|#]]
! class="unsortable" |
! Pokémon
! Ability 1
! Ability 2
! Hidden
! Generations
|- style="text-align: center"
| rowspan="2" style="font-family: monospace,monospace" | 0094
| rowspan="2" | {{ArtP|0094|Gengar|form=|size=70x70px}}
| rowspan="2" style="text-align: left" | {{p|Gengar}}
| {{a|Levitate}}
|
|
| III-VI
|- style="text-align: center"
| {{a|Cursed Body}}
|
|
| VII+
|}
|}

==Div layouts==
Grid, flexbox... (How basic divs work/can be useful without any additions.)

==Collapsibles==
Mediawiki has built-in functions to show/hide content, based on <code>mw-collapsible</code>. There's a few ways to use this.
* See also: https://www.mediawiki.org/wiki/Manual:Collapsible_elements
* For a plethora of examples: https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Advanced

===Basic===
;Apply to a table (header visible)
{| class="wikitable mw-collapsible"
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}

{| class="wikitable mw-collapsible mw-collapsed"
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}
{{-}}

;Apply to a table (header hidden)
If you add an empty table caption, the show/hide button will be outside the table and the entire table will be hidden. But in this case, the show/hide button can change positions making it inconvenient to click again.
{| class="wikitable mw-collapsible"
|+ style="display: table-caption; text-align: center" | 
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}

{| class="wikitable mw-collapsible mw-collapsed"
|+ style="display: table-caption; text-align: center" | Caption
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}

But if the table has a fixed/reliable width, the show/hide button will stay in place when you click it. Also, if you use non-wikitable stylings, a "ghost" of the table will be visible below the button.
{| class="roundtable mw-collapsible mw-collapsed" style="width: 200px; background-color: red; border: 5px solid black;"
|+ style="display: table-caption; text-align: center" | 
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}

;Divs
And you can apply this to divs as well.
<div class="mw-collapsible" style="width: 200px; background-color: yellow;">
Text to hide
</div>

;Bonus
You can also change the text in the show/hide buttons.
<div class="mw-collapsible" data-expandtext="ABRACADABRA" data-collapsetext="HIDEANDSEEK" style="width: 200px; background-color: yellow;">
Text to hide
</div>
{{-}}

===Controlling what's hidden===
If you use <code>mw-collapsible-content</code> (along with <code>mw-collapsible</code>), then only the elements tagged as collapsible content will show/hide when the button is pressed. This can make it easier to frame the collapsed content or make it possible to show/hide multiple things at once.

<div class="mw-collapsible mw-collapsed" style="clear:both;">
''I don't get hidden.''
====Table A1====
{| class="wikitable mw-collapsible-content"
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}

====Table A2====
{| class="wikitable mw-collapsible-content"
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}
</div>

;Custom button
This also makes it possible to specify another element as the show/hide button using <code>mw-collapsible-toggle</code>.
<div class="mw-collapsible mw-collapsed" style="clear:both;">
<div class="mw-collapsible-toggle" style="background-color: yellow;">
Click me!
[[File:0001Bulbasaur.png|100px]]
<!--
The MW talk page has someone talking about this in 2011...idk what we're missing that this won't work.
<span class="up">Show</span><span class="down">Hide</span>
-->
</div>
====Table B1====
{| class="wikitable mw-collapsible-content"
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}

====Table B2====
{| class="wikitable mw-collapsible-content"
|-
! Col A || Col B || Col C
|-
| 1 || 2 || 3
|-
| ! || @ || #
|}
</div>

Note: if we add this CSS https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Advanced/styles.css, we could have more customizable toggles. Very cool. But maybe I'll wait for a use case to strike.

===Alternatives===
Our mobile skin disables <code>mw-collapsible</code>[https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/includes/Skins/SkinMinerva.php#L954]. I'm not sure if there's a way to force it to work (short of editing the skin directly, including every time it's updated), but we do currently have an alternative method to achieve much the same effect, called ClickToggle (courtesy [[:de:User:Buoysel]]).

I'll touch on the simple replication of mw-collapsible here, but for more, see [[User:Tiddlywinks/MakeHideButton]].

This is a simple application of a button that can show/hide specified content.
<div
{{User:Tiddlywinks/MakeHideButton|hideSpoilers|SV-DLC-epilogue|type=toggle|start=off
|common=text-align: center; border: 1px solid #000; width: 128px;
|off=background-color: white
| on=background-color: orange
}}>Click me!</div>
<div {{User:Tiddlywinks/MakeHideTarget|hideSpoilers|SV-DLC-epilogue}} style="width: fit-content; background-color: yellow;">
Hide me!
[[File:0001Bulbasaur.png|100px]]
</div>
<div>I'm not hidden.</div>
<div {{User:Tiddlywinks/MakeHideTarget|hideSpoilers|SV-DLC-epilogue}} style="width: fit-content; background-color: yellow;">
Hide me!
[[File:0001Bulbasaur.png|100px]]
</div>
<div>I'm not hidden.</div>
You can make the content (targets) start off hidden by adding <code>display: none;</code>. For more, see [[User:Tiddlywinks/MakeHideButton]].