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 color: base color (the background/"border" between cells, also visible if a cell is skipped), dark (the outer border), and light (the header background).
| Category | Move Gauge | MP | Base Power | Max Power |
|---|---|---|---|---|
| Physical | 1 | — | 25 | 30 |
| Physical | 1 | 25 | 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.)
| Category | Move Gauge | MP | Base Power | Max Power |
|---|---|---|---|---|
| Physical | 1 | — | 25 | 30 |
| Physical | 1 | — | 25 | 30 |
| 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 color: base color (outer border) and light (the cells headers and inner border/background).
|
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 mw-collapsible. 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)
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
| 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.
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
| 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.
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
- Divs
And you can apply this to divs as well.
Text to hide
- Bonus
You can also change the text in the show/hide buttons.
Text to hide
If you use mw-collapsible-content (along with mw-collapsible), 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.
I don't get hidden.
Table A1
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
Table A2
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
- Custom button
This also makes it possible to specify another element as the show/hide button using mw-collapsible-toggle.
Click me!
Table B1
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
Table B2
| Col A | Col B | Col C |
|---|---|---|
| 1 | 2 | 3 |
| ! | @ | # |
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 mw-collapsible[1]. 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.
Hide me!
Hide me!
You can make the content (targets) start off hidden by adding display: none;. For more, see User:Tiddlywinks/MakeHideButton.