Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
m
m
 
(34 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;
     min-height: {{{height|500px}}};
+
     {{#ifeq:{{{expand|}}}|scroll|min-height: {{{height|500px}}}|}};
 
     width: 100%;
 
     width: 100%;
 
}
 
}
 
#panels.side {
 
#panels.side {
     flex-flow: column wrap;
+
     display: grid;
     justify-content: flex-start;
+
    grid-template-columns: max-content auto;
     overflow-y: auto;
+
    grid-auto-flow: column;
     overflow-x: hidden;
+
     justify-content: stretch;
     display: table;
+
     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 {
    max-height: {{{height|500px}}};
 
    overflow-y: auto;
 
 
     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 99: Line 116:
 
}
 
}
 
#panels.side .tab {
 
#panels.side .tab {
     margin-top: 0;
+
     margin: .5em 0;
 
     padding-top: 0;
 
     padding-top: 0;
    display: table;
 
 
}
 
}
 
.tab_1 {
 
.tab_1 {
     order: 0;
+
  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;
 
}
 
}
#tab_1-panel {
+
#content_1 {
 
     display: block;
 
     display: block;
 
}
 
}
#panels.side #tab_1-panel {
+
:target ~ #content_1, .anchor {
    display: table-cell;
 
}
 
:target ~ #tab_1-panel, #panels.side :target ~ #tab_1-panel, .anchor {
 
 
     display: none;
 
     display: none;
 
}
 
}
Line 128: Line 160:
 
  | key
 
  | key
 
  | value
 
  | value
  | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #tab_{{#var: key}}-panel|.tab_1:target ~ #tab_1-panel}}
+
  | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #content_{{#var: key}}|.tab_1:target ~ #content_1}}
 
}}{
 
}}{
 
     display: block;
 
     display: block;
 
}
 
}
{{#forargs: tab_
+
#foot {
| key
+
    border-top: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}};
| value
+
     display: flex;
| {{#ifexpr:{{#var: key}}>1|, #panels.side .tab_{{#var: key}}:target ~ #tab_{{#var: key}}-panel|#panels.side .tab_1:target ~ #tab_1-panel}}
+
    flex-flow: row;
}}{
+
    width: 100%;
     display: table-cell;
+
    justify-content: center;
 +
    align-items: center;
 
}
 
}
 
}}
 
}}
Line 143: 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 154: Line 188:
 
  | key
 
  | key
 
  | value
 
  | value
  | <div id="tab_{{#var: key}}-panel" class="panel">&#32;
+
  | <div id="content_{{#var: key}}" class="panel">&#32;
 
{{{content_{{#var: key}}}}}</div>
 
{{{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 176: 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.)
                      If using 'side' menu, must be tall enough to hold all tab names!
+
| 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 188: 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. contents_# can be as complicated as you like, as long as nothing is left open.  
+
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 &mdash; 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]] &mdash; 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> &mdash; 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 22: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:

  1. Use Template:Table — instructions on that page, but it's fairly simple.
  2. Use html; i.e., <table><tr><td>First Cell</td><td>Second Cell</td></tr></table>, etc.
  3. 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.