Difference between revisions of "Template:PC Panels"

From From The Ashes Wiki
Jump to: navigation, search
m
 
(67 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<includeonly>{{#css:
 
<includeonly>{{#css:
 +
#content * {
 +
    box-sizing: border-box;
 +
}
 
body,  
 
body,  
 
div#content,  
 
div#content,  
Line 6: Line 9:
 
body > *,  
 
body > *,  
 
#mw-navigation > * {
 
#mw-navigation > * {
−
     background-color: {{{background|inherit}}};
+
     background-color: {{{page_background|}}};
−
     color: {{{text|inherit}}};
+
     color: {{{page_text|}}};
 +
    box-sizing: border-box;
 
}
 
}
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
−
     color: {{{text|inherit}}};
+
     color: {{{page_text|}}};
 
}
 
}
 
div.vectorTabs,
 
div.vectorTabs,
Line 21: Line 25:
 
}
 
}
 
body a {
 
body a {
−
     color: {{{links|inherit}}} !important;
+
     color: {{{page_links|}}} !important;
 +
}
 +
body #panels a {
 +
    color: {{{box_links|}}} !important;
 
}
 
}
 
div#p-namespaces {
 
div#p-namespaces {
Line 34: Line 41:
 
     }
 
     }
 
}  
 
}  
 +
#wrapper {
 +
    border: {{{border_width|6px}}} {{{border_style|solid}}} {{{border|{{{page_text|black}}}}}};
 +
    border-radius: {{#ifeq:{{{corners|}}}|soft|15px|0}};
 +
    background-color: {{{box_background|white}}};
 +
    color: {{{box_text|}}};
 +
    margin: 0 auto 1em;
 +
    max-width: 1000px;
 +
    overflow: hidden;
 +
}
 +
#banner {
 +
    background-color: {{{banner_background|{{{border|black}}}}}};
 +
    color: {{{banner_text|{{{box_text|{{{page_background|white}}}}}}}}};
 +
    font-size: 2.5em;
 +
    font-weight: bold;
 +
    text-align: center;
 +
    width: 100%;
 +
}
 +
#banner img {
 +
    max-width: 100%;
 +
    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 {
 +
    {{#if:{{{banner|}}}|border-top: 2px {{{inner_border|solid}}} {{{border|}}};|}}
 
     display: flex;
 
     display: flex;
 
     flex-flow: row wrap;
 
     flex-flow: row wrap;
 
     justify-content: center;
 
     justify-content: center;
 
     align-content: flex-start;
 
     align-content: flex-start;
−
     border: 3px solid {{{border|{{{text|black}}}}}};
+
     {{#ifeq:{{{expand|}}}|scroll|min-height: {{{height|500px}}}|}};
−
    height: {{{height|500px}}};
+
     width: 100%;
−
}
 
−
#panels.top {
 
−
     padding: 1em;
 
 
}
 
}
 
#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;
 +
    align-content: start;
 +
     min-height: 100%;
 +
     grid-template-rows: {{#forargs: tab_
 +
| key
 +
| value
 +
| &#32;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 {
−
    min-height: 100%;
+
     border-left: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}};
−
     border-left: 3px solid {{{border|{{{text|black}}}}}};
 
 
     padding: 1em 1.5em;
 
     padding: 1em 1.5em;
−
     box-sizing: border-box;
+
     grid-column: 2/3;
 +
    grid-row: 1/-1;
 
}
 
}
 
#panels.top .panel {
 
#panels.top .panel {
−
     border-top: 3px solid {{{border|{{{text|black}}}}}};
+
     border-top: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}};
−
     padding-top: 1em;
+
     padding: 1em;
 
}
 
}
 
.tab {
 
.tab {
 
     font-weight: bold;
 
     font-weight: bold;
−
    margin-top: -4em;
 
 
     order: 1;
 
     order: 1;
−
     padding-top: 4em;
+
     margin: 1em 0 .5em;
 
}
 
}
 
#panels.side .tab {
 
#panels.side .tab {
−
     margin-top: 0;
+
     margin: .5em 0;
 
     padding-top: 0;
 
     padding-top: 0;
 
}
 
}
−
#panels.side .tab_1 {
+
.tab_1 {
−
     margin-top: 1em;
+
  order: -1;
 +
}
 +
#panels.side .tab_1.tab {
 +
     margin-top: 1.5em;
 
}
 
}
−
.tab_1 {
+
{{#vardefine:i|0}}
−
     order: 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 92: Line 151:
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
−
#tab_1-panel {
+
#content_1 {
 
     display: block;
 
     display: block;
 
}
 
}
−
:target ~ #tab_1-panel, .anchor {
+
:target ~ #content_1, .anchor {
 
     display: none;
 
     display: none;
 
}
 
}
Line 101: 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;
 +
}
 +
#foot {
 +
    border-top: 2px {{{inner_border|solid}}} {{{border|{{{page_text|black}}}}}};
 +
    display: flex;
 +
    flex-flow: row;
 +
    width: 100%;
 +
    justify-content: center;
 +
    align-items: center;
 
}
 
}
 
}}
 
}}
−
<div id="panels" class={{{menu|top}}}>{{#forargs: tab_
+
<div id="wrapper">
 +
{{#ifeq:{{{banner}}}|off||<div id="banner">{{{banner|{{PAGENAME}}}}}</div>}}
 +
<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_
 
  | key
 
  | key
 
  | value
 
  | value
Line 117: Line 188:
 
  | key
 
  | key
 
  | value
 
  | value
−
  | <div id="tab_{{#var: key}}-panel" class="panel">{{{content_{{#var: key}}}}}</div>
+
  | <div id="content_{{#var: key}}" class="panel">&#32;
 +
{{{content_{{#var: key}}}}}</div>
 
}}
 
}}
−
</div></includeonly><noinclude>
+
</div>{{#if:{{{footer|}}}|<div id="foot">{{{footer}}}</div>}}</div></includeonly><noinclude>
 
===Usage===
 
===Usage===
 
<pre>{{PC Panels
 
<pre>{{PC Panels
 
| --- Appearance ---
 
| --- Appearance ---
−
| menu         = top or side
+
| menu               = top or side
−
| background   = page colour (#ff0000, red, etc.)
+
| page_background   = full page colour (#ff0000, red, etc.)
−
| text         = text colour
+
| page_text         = text colour for full page
−
| links         = link colour
+
| page_links         = link colour
−
| border        = border colour
+
| box_background    = colour of the panels box
−
| height       = how tall you want your box to be if using 'side' menu (default 500px)
+
| 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 &mdash; 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 ---
 
| --- Content ---
−
| tab_1         = name of tab (i.e., Something)
+
| tab_1             = name of tab (i.e., Something)
−
| content_1     = contents of panel (i.e., Here's some content about something.)
+
| content_1         = contents of panel (i.e., Here's some content about something.)
−
| tab_2         = name of tab (i.e., Another Thing)
+
| tab_2             = name of tab (i.e., Another Thing)
−
| content_2     = contents of panel (i.e., Content about this other thing.)
+
| content_2         = contents of panel (i.e., Content about this other thing.)
 
[...]
 
[...]
−
| tab_N         = name of tab (i.e., Something Else)
+
| tab_N             = name of tab (i.e., Something Else)
−
| content_N     = contents of panel (i.e., Some information for this last thing too.)
+
| content_N         = contents of panel (i.e., Some information for this last thing too.)
 
}}</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 more 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:

  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.

Retrieved from "http://fta.procacious.com/wiki/index.php?title=Template:PC_Panels&oldid=5883"