Difference between revisions of "Template:PortalBox"

From Paradise Station Wiki
Jump to navigation Jump to search
(Tests programmatic scrollbar for mobile users.)
(Mobile testing.)
Line 1: Line 1:
<div style="height: 7em; display: flex;">
<div style="height: 7em; display: flex;">
<div style="border-radius: {{{border-radius|0 0 0 0}}}; background: {{{colour dark}}}; box-shadow: 0 0 .1em #999; min-width: 13em; height: 7em; flex-direction: column; margin: 0 0.5em 0 0; outline: #999f solid .1em; padding: .2em 0 0 0;">[[file:{{{image}}}]]<br>'''[[{{{role|Chief Engineer}}}]]'''</div>
<div style="border-radius: {{{border-radius|0 0 0 0}}}; background: {{{colour dark}}}; box-shadow: 0 0 .1em #999; min-width: 13em; height: 7em; flex-direction: column; margin: 0 0.5em 0 0; outline: #999f solid .1em; padding: .2em 0 0 0;">[[file:{{{image}}}]]<br>'''[[{{{role|Chief Engineer}}}]]'''</div>
<div style="border-radius: {{{border-radius|0 0 0 0}}}; background: {{{colour light}}}; box-shadow: 0 0 .1em #999; width: 100%; flex-direction: row; max-height: 7em; display: flex; overflow: scroll; align-items: center; padding: 2em 2em 2em 2em;">{{{description|role description}}}</div>
<div style="border-radius: {{{border-radius|0 0 0 0}}}; background: {{{colour light}}}; box-shadow: 0 0 .1em #999; width: 100%; flex-direction: row; max-height: 7em; display: flex; flex-wrap: wrap; align-items: center; padding: 2em 2em 2em 2em;">{{{description|role description}}}</div>
</div>
</div>



Revision as of 03:00, 6 April 2022

[[file:{{{image}}}]]
Chief Engineer
role description

This is the middle element for PortalBox templates. When using this template, ensure it's contained in an appropriate div (text-align: center; as property) otherwise it won't render as an appropriate flexbox/will lack centred text.

Parameters are as follows:

border-radius: - This is the 'edges' of the PortalBox. For the top, the value should be "1em 1em 0 0" and should be "0 0 1em 1em" for the bottom. Middle segments require no definition.
colour dark:   - This is the colour of the left-most bounding box (image columns).
colour light:  - This is the colour of the right-most bounding box (text rows).
image:         - This is the file image. It should be rendered as the plain file name (no brackets), followed by any special links.
role           - This is the role text. Put the name of the object/role here.
description    - This defines the contents of the right-most bounding box (the text row).