Template:Responsive Character Page: Difference between revisions

From Holocron - Star Wars Combine
Jump to navigation Jump to search
← Older edit
Alani Myrtel (talk | contribs)
Members
373 edits
Alani Myrtel (talk | contribs)
Members
373 edits
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<div class="resp-body"  
<div class="resp-body"  
     style="display: flex;  
     style="display: flex;
            flex-direction: column;
            align-items: center;
             justify-content: center;
             justify-content: center;
             background-color: {{#if:{{{backdrop-color|}}}|{{{backdrop-color}}}|none}};
             background-color: {{#if:{{{backdrop-color|}}}|{{{backdrop-color}}}|none}};
             padding: .9em;">
             padding: .9em;
<div class="resp-container"
            gap: .5em;">
<div class="resp-intro-container"
     style="display: flex;
     style="display: flex;
             width: clamp({{{character-infobox-width}}}, 75%, 75%);
             width: clamp({{{character-infobox-width}}}, 75%, 75%);
             flex-wrap: wrap-reverse;
             flex-wrap: wrap-reverse;
             gap: .5em;">
             gap: .5em;">
<div class="resp-content-left"
<div class="resp-intro-left"
     style="display: flex;
     style="display: flex;
             flex-direction: column;
             flex-direction: column;
Line 16: Line 19:
             background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};
             background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};
             padding: .5em;">
             padding: .5em;">
{{#if:{{{main-content|}}}|<div>{{{main-content}}}</div>}}
{{#if:{{{intro|}}}|{{{intro}}}}}
</div <!--resp-content-left-->>
</div <!--resp-intro-left-->>
<div class="resp-content-right"
<div class="resp-intro-right"
     style="display: flex;
     style="display: flex;
             flex-direction: column;
             flex-direction: column;
Line 25: Line 28:
<div class="resp-content-right-character-infobox">
<div class="resp-content-right-character-infobox">
{{{character-infobox}}}
{{{character-infobox}}}
</div <!--resp-content-right-character-infobox-->>
</div <!--resp-intro-right-->>
<div class="resp-content-right-filler"
<div class="resp-content-right-filler"
     style="display: flex;
     style="display: flex;
             flex-grow: 1;
             flex-grow: 1;
             background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};">
             background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};
            padding: .5em;">
{{#if:{{{filler-content|}}}|{{{filler-content}}}}}
{{#if:{{{filler-content|}}}|{{{filler-content}}}}}
</div <!--resp-content-right-filler-->>
</div <!--resp-content-right-filler-->>
</div <!--resp-content-right-->>
</div <!--resp-content-right-->>
</div <!--resp-container-->>
</div <!--resp-intro-container-->>
<div class="resp-main-container"
    style="display: flex;
            flex-direction: column;
            width: clamp(calc({{{character-infobox-width}}} - 1em), calc(75% - 1em), calc(75% - 1em));
            background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};
            padding: .5em;">
{{#if:{{{main-content|}}}|{{{main-content}}}}}
</div <!--resp-main-container-->>
</div <!--resp-body-->>
</div <!--resp-body-->>
</includeonly>
</includeonly>
<noinclude>
<noinclude>
{{Template:Under Construction}}
__TOC__
__TOC__
=Usage=
=Usage=
This [[Template:Responsive Character Page|responsive character page template]] is best used together with the [[Template:Responsive Character Infobox|responsive character infobox template]] as its infobox template.
<pre>
<pre>
{{Template:Responsive Character Page
{{Template:Responsive Character Page
| backdrop-color = optional, defaults to 'none'.
| backdrop-color = This defaults to 'none'.
| background-color = optional, defaults to 'rgba(#000000, .2)'.
| background-color = This defaults to 'rgba(#000000, .2)'.
| character-infobox-width = required, preferably in pixels (since character images are sized in pixels, account for table margins, paddings and/or borders!). Works best with infoboxes flexed to 100% width.
| character-infobox-width = required, preferably in pixels (character images are sized in pixels).
| main-content = optional, defaults to an empty string. This is the content shown left of the character infobox (or below on mobile).
| intro =
| character-infobox = required
| main-content =  
| filler-content = optional, defaults to an empty string. This is a filler box mainly meant for desktop view. This is the content shown below the character infobox (both on mobile and on desktop).
| character-infobox = required, works best with the responsive character infobox template.
| filler-content = This is shown below the infobox box, regardless of the platform (desktop/mobile)!
}}
}}
</pre>
</pre>


It is recommended to place the <code><nowiki>__TOC__</nowiki></code> magic word <i>inside</i> the main-content field to force the Table of Contents of the page to render inside the template. Otherwise, it will most likely render above the template. Use the <code><nowiki>__NOTOC__</nowiki></code> magic word if you want to stop the Table of Contents to render altogether.
==Table of Contents Usage==
It is recommended to place the <code><nowiki>__TOC__</nowiki></code> magic word <i>inside</i> the intro field to force the Table of Contents of the page to render inside the template. Otherwise, it will most likely render above the template. Use the <code><nowiki>__NOTOC__</nowiki></code> magic word if you want to stop the Table of Contents from rendering altogether.


==Known Issues==
=Known Issues=
===Wikitable Rendering===
===Wikitable Rendering===
It is known that wikitables do not go well included with template parameters. Therefore, you need to escape the pipe <code>|</code> characters of wikitables with <code><nowiki>{{!}}</nowiki></code>. For more information, see [https://web.archive.org/web/20230730164505/https://www.mediawiki.org/wiki/Help:Templates#Tables_in_parameters the official MediaWiki documentation] (archived on July 30th 2023).
It is known that wikitables do not go well included with template parameters. Therefore, you need to escape the pipe <code>|</code> characters of wikitables with <code><nowiki>{{!}}</nowiki></code>. For more information, see [https://web.archive.org/web/20230730164505/https://www.mediawiki.org/wiki/Help:Templates#Tables_in_parameters the official MediaWiki documentation] (archived on July 30th 2023).
Line 64: Line 79:
{{Template:Responsive Character Page
{{Template:Responsive Character Page
| character-infobox-width = 375px
| character-infobox-width = 375px
| intro = This is the intro.
| main-content =  
| main-content =  
This is the main content without any specified background color.
This is the main content without any specified background color.
| character-infobox = {{Infobox Character-Alani Myrtel}}
| character-infobox =  
{{Template:Responsive Character Infobox}}
}}
}}
===No background color specified and with filler content===
===No background color specified and with filler content===
{{Template:Responsive Character Page
{{Template:Responsive Character Page
| character-infobox-width = 375px
| character-infobox-width = 375px
| intro = This is the intro.
| main-content =  
| main-content =  
This is the main content with extra filler.
This is the main content with extra filler.
| character-infobox =  
| character-infobox =  
{{Infobox Character-Alani Myrtel
{{Template:Responsive Character Infobox}}
| name = Alani Myrtel
}}
| filler-content = This is some optional filler content.
| filler-content = This is some optional filler content.
}}
}}
Line 83: Line 99:
| background-color = rgba(50, 0, 0, .5)
| background-color = rgba(50, 0, 0, .5)
| character-infobox-width = 375px
| character-infobox-width = 375px
| intro = This is the intro.
| main-content =  
| main-content =  
This is the main content with extra filler. The <code>background-color</code> parameter is set to <code>rgba(50, 0, 0, .5)</code>.
This is the main content with extra filler. The <code>background-color</code> parameter is set to <code>rgba(50, 0, 0, .5)</code>.
| character-infobox = {{Infobox Character-Alani Myrtel}}
| character-infobox =  
{{Template:Responsive Character Infobox}}
| filler-content = This is some optional filler content.
| filler-content = This is some optional filler content.
}}
}}
Line 92: Line 110:
| backdrop-color = rgba(0, 0, 0, .2)
| backdrop-color = rgba(0, 0, 0, .2)
| character-infobox-width = 375px
| character-infobox-width = 375px
| intro = This is the intro.
| main-content =  
| main-content =  
This is the main content with extra filler. The <code>backdrop-color</code> parameter is set to <code>rgba(0, 0, 0, .2)</code>.
This is the main content with extra filler. The <code>backdrop-color</code> parameter is set to <code>rgba(0, 0, 0, .2)</code>.
| character-infobox = {{Infobox Character-Alani Myrtel}}
| character-infobox =  
{{Template:Responsive Character Infobox}}
| filler-content = This is some optional filler content.
| filler-content = This is some optional filler content.
}}
}}
[[Category:Page Templates]]
[[Category:Page Templates]]
[[Category:Responsive Templates]]
</noinclude>
</noinclude>

Latest revision as of 20:52, 31 August 2023


Usage

This responsive character page template is best used together with the responsive character infobox template as its infobox template. 

{{Template:Responsive Character Page
| backdrop-color = This defaults to 'none'.
| background-color = This defaults to 'rgba(#000000, .2)'.
| character-infobox-width = required, preferably in pixels (character images are sized in pixels).
| intro = 
| main-content = 
| character-infobox = required, works best with the responsive character infobox template.
| filler-content = This is shown below the infobox box, regardless of the platform (desktop/mobile)!
}}

Table of Contents Usage

It is recommended to place the __TOC__ magic word inside the intro field to force the Table of Contents of the page to render inside the template. Otherwise, it will most likely render above the template. Use the __NOTOC__ magic word if you want to stop the Table of Contents from rendering altogether.

Known Issues

Wikitable Rendering

It is known that wikitables do not go well included with template parameters. Therefore, you need to escape the pipe | characters of wikitables with {{!}}. For more information, see the official MediaWiki documentation (archived on July 30th 2023).

A workaround would be to make a template of those tables, and using HTML table syntax instead of a wikitable.

Examples

Try and view these examples both on mobile and desktop view via the F12 menu. See here (archived on March 24th 2023) to see how to.

No background color specified

This is the intro.

{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is the main content without any specified background color.


No background color specified and with filler content

This is the intro.

{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is some optional filler content.

This is the main content with extra filler.


Background color specified

This is the intro.

{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is some optional filler content.

This is the main content with extra filler. The background-color parameter is set to rgba(50, 0, 0, .5).


Backdrop color specified

This is the intro.

{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is some optional filler content.

This is the main content with extra filler. The backdrop-color parameter is set to rgba(0, 0, 0, .2).

Retrieved from "http://holocron.swcombine.com/index.php?title=Template:Responsive_Character_Page&oldid=106104"