Difference between revisions of "Template:PC Panels"
From From The Ashes Wiki
m |
|||
(40 intermediate revisions by the same user not shown) | |||
Line 44: | Line 44: | ||
border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}}; | border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}}; | ||
border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}}; | border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}}; | ||
− | background-color: {{{box_background|}}}; | + | background-color: {{{box_background|white}}}; |
color: {{{box_text|}}}; | color: {{{box_text|}}}; | ||
margin: 0 auto 1em; | margin: 0 auto 1em; | ||
Line 51: | Line 51: | ||
} | } | ||
#banner { | #banner { | ||
− | background-color: {{{banner_background|{{{border|}}}}}}; | + | background-color: {{{banner_background|{{{border|black}}}}}}; |
color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}}; | color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}}; | ||
font-size: 2.5em; | font-size: 2.5em; | ||
Line 61: | Line 61: | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
+ | } | ||
+ | div#portrait { | ||
+ | order: -2; | ||
+ | grid-row: 1/2; | ||
+ | grid-column: 1/2; | ||
+ | margin: .5em .5em 0; | ||
+ | border: 1px solid {{{border|black}}}; | ||
+ | } | ||
+ | #panels.top div#portrait { | ||
+ | display: none; | ||
} | } | ||
#panels { | #panels { | ||
Line 68: | Line 78: | ||
justify-content: center; | justify-content: center; | ||
align-content: flex-start; | align-content: flex-start; | ||
− | height: {{{height|500px}}}; | + | {{#ifeq:{{{expand|}}}|scroll|min-height: {{{height|500px}}}|}}; |
width: 100%; | width: 100%; | ||
} | } | ||
#panels.side { | #panels.side { | ||
− | + | display: grid; | |
− | justify-content: | + | grid-template-columns: max-content auto; |
− | + | grid-auto-flow: column; | |
− | + | justify-content: stretch; | |
+ | align-content: start; | ||
+ | min-height: 100%; | ||
+ | grid-template-rows: {{#forargs: tab_ | ||
+ | | key | ||
+ | | value | ||
+ | |  max-content }} min-content auto; | ||
} | } | ||
.panel { | .panel { | ||
display: none; | display: none; | ||
+ | {{#ifeq:{{{expand|}}}|scroll|height: {{{height|500px}}}|}}; | ||
order: 2; | order: 2; | ||
+ | overflow-y: auto; | ||
width: 100%; | width: 100%; | ||
} | } | ||
#panels.side .panel { | #panels.side .panel { | ||
− | |||
border-left: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}}; | border-left: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}}; | ||
padding: 1em 1.5em; | padding: 1em 1.5em; | ||
+ | grid-column: 2/3; | ||
+ | grid-row: 1/-1; | ||
} | } | ||
#panels.top .panel { | #panels.top .panel { | ||
Line 97: | Line 116: | ||
} | } | ||
#panels.side .tab { | #panels.side .tab { | ||
− | margin | + | margin: .5em 0; |
padding-top: 0; | padding-top: 0; | ||
} | } | ||
− | #panels.side .tab_1 { | + | .tab_1 { |
− | margin-top: | + | order: -1; |
+ | } | ||
+ | #panels.side .tab_1.tab { | ||
+ | margin-top: 1.5em; | ||
+ | } | ||
+ | {{#vardefine:i|0}} | ||
+ | #panels.side .tab_{{#forargs: tab_ | ||
+ | | key | ||
+ | | value | ||
+ | | {{#vardefine:i|{{#expr:{{#var:i}}+1}}}} | ||
+ | }}{{#var:i}}.tab { | ||
+ | margin-bottom: 1.5em; | ||
} | } | ||
− | . | + | {{#forargs: tab_ |
− | + | | key | |
+ | | value | ||
+ | | .tab_{{#var: key}} { | ||
+ | grid-column: 1/2; | ||
+ | grid-row: {{#expr:{{#var: key}}{{#ifeq:{{{portrait|}}}|off||+1}}}}/{{#expr:{{#var: key}}+{{#ifeq:{{{portrait|}}}|off|1|2}}}}; | ||
} | } | ||
+ | }} | ||
.tab a, *:target ~ .tab_1.tab a { | .tab a, *:target ~ .tab_1.tab a { | ||
border-bottom: medium none; | border-bottom: medium none; | ||
Line 116: | Line 151: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | # | + | #content_1 { |
display: block; | display: block; | ||
} | } | ||
− | :target ~ # | + | :target ~ #content_1, .anchor { |
display: none; | display: none; | ||
} | } | ||
Line 125: | Line 160: | ||
| key | | key | ||
| value | | value | ||
− | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ # | + | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #content_{{#var: key}}|.tab_1:target ~ #content_1}} |
}}{ | }}{ | ||
display: block; | display: block; | ||
+ | } | ||
+ | #foot { | ||
+ | border-top: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}}; | ||
+ | display: flex; | ||
+ | flex-flow: row; | ||
+ | width: 100%; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
} | } | ||
}} | }} | ||
Line 133: | Line 176: | ||
{{#ifeq:{{{banner}}}|off||<div id="banner">{{{banner|{{PAGENAME}}}}}</div>}} | {{#ifeq:{{{banner}}}|off||<div id="banner">{{{banner|{{PAGENAME}}}}}</div>}} | ||
<div id="panels" class={{{menu|top}}}> | <div id="panels" class={{{menu|top}}}> | ||
+ | {{#ifeq:{{{portrait|}}}|off||<div id="portrait">{{{portrait|[[File:{{PAGENAME}}{{#ifexist:File:{{PAGENAME}}.png|.png|{{#ifexist:File:{{PAGENAME}}.jpg|.jpg|{{#ifexist:File:{{PAGENAME}}.gif|.gif|.png}}}}}}|200px]]}}}</div>}} | ||
{{#forargs: tab_ | {{#forargs: tab_ | ||
| key | | key | ||
Line 144: | Line 188: | ||
| key | | key | ||
| value | | value | ||
− | | <div id=" | + | | <div id="content_{{#var: key}}" class="panel">  |
+ | {{{content_{{#var: key}}}}}</div> | ||
}} | }} | ||
− | </div></div></includeonly><noinclude> | + | </div>{{#if:{{{footer|}}}|<div id="foot">{{{footer}}}</div>}}</div></includeonly><noinclude> |
===Usage=== | ===Usage=== | ||
<pre>{{PC Panels | <pre>{{PC Panels | ||
Line 165: | Line 210: | ||
| banner_background = colour of the banner's background | | banner_background = colour of the banner's background | ||
| banner_text = colour of the banner's text | | banner_text = colour of the banner's text | ||
− | | height = how tall you want your box to be (default 500px) | + | | portrait = image link or off (side menu only. if left out completely, will try to guess an image.) |
− | + | | footer = what you want in your footer, if you want one | |
+ | | expand = stretch or scroll | ||
+ | | height = how tall you want your box to be (default 500px) if using 'scroll' | ||
+ | Must be tall enough to hold all tab names if using side menu! | ||
| --- Content --- | | --- Content --- | ||
| tab_1 = name of tab (i.e., Something) | | tab_1 = name of tab (i.e., Something) | ||
Line 177: | Line 225: | ||
}}</pre> | }}</pre> | ||
− | You can have as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste. | + | You can have as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste. |
+ | |||
+ | content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options: | ||
+ | |||
+ | # Use [[Template:Table]] — instructions on that page, but it's fairly simple. | ||
+ | # Use html; i.e., <nowiki><table><tr><td>First Cell</td><td>Second Cell</td></tr></table></nowiki>, etc. | ||
+ | # In the content slot you want, call a subpage, such as <nowiki>{{:{{PAGENAME}}/Contacts}}</nowiki> — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: <nowiki>{{PAGENAME}}</nowiki> there is not a placeholder.) | ||
− | The appearance can be adjusted further by writing custom css. | + | The appearance of nearly everything can be adjusted further by writing custom css. |
[[Category: Template]] | [[Category: Template]] | ||
</noinclude> | </noinclude> |
Latest revision as of 21:24, 19 March 2018
Usage
{{PC Panels | --- Appearance --- | menu = top or side | page_background = full page colour (#ff0000, red, etc.) | page_text = text colour for full page | page_links = link colour | box_background = colour of the panels box | box_text = colour of text in the panels box | box_links = links within the panels box | border = border colour | border_width = how thick the outer border is | border_style = solid, dotted, dashed, double, groove, ridge, inset, outset, or none | corners = hard (90 degree) or soft (rounded) | inner_border = style for the inner lines — see border_style | banner = image link, text, or off | banner_background = colour of the banner's background | banner_text = colour of the banner's text | portrait = image link or off (side menu only. if left out completely, will try to guess an image.) | footer = what you want in your footer, if you want one | expand = stretch or scroll | height = how tall you want your box to be (default 500px) if using 'scroll' Must be tall enough to hold all tab names if using side menu! | --- Content --- | tab_1 = name of tab (i.e., Something) | content_1 = contents of panel (i.e., Here's some content about something.) | tab_2 = name of tab (i.e., Another Thing) | content_2 = contents of panel (i.e., Content about this other thing.) [...] | tab_N = name of tab (i.e., Something Else) | content_N = contents of panel (i.e., Some information for this last thing too.) }}
You can have as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste.
content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options:
- Use Template:Table — instructions on that page, but it's fairly simple.
- Use html; i.e., <table><tr><td>First Cell</td><td>Second Cell</td></tr></table>, etc.
- In the content slot you want, call a subpage, such as {{:{{PAGENAME}}/Contacts}} — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: {{PAGENAME}} there is not a placeholder.)
The appearance of nearly everything can be adjusted further by writing custom css.