Difference between revisions of "User:DustyFB/Sandbox/Templates/Template:DeviceInfobox"
Jump to navigation
Jump to search
(125 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
Gallery mode can be utilized in the image field with: | |||
<pre>|image=<gallery mode="slideshow"> | |||
Image:Memory_relay.png|"Caption" | |||
Image:Logo_of_empire.png|"Caption" | |||
</gallery></pre> | |||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
<div class="Device-Info" style="top: -35px;position: relative;"> | <div class="Device-Info" style="top: -35px;position: relative;"> | ||
<div class="Device-Info-Header"> | <div class="Device-Info-Header">{{{image}}}<span class="Device-Info-Header-Caption"> {{#if:{{{caption|}}}|{{{caption}}}|}} </span></div> | ||
<div class="Device-Info-Name">{{#if:{{{name|}}}|{{{name}}}|Name not submitted.}}</div> | <div class="Device-Info-Name">{{#if:{{{name|}}}|{{{name}}}|Name not submitted.}}</div> | ||
<div class="Device-Info-Data-Wrap"> | <div class="Device-Info-Data-Wrap"> | ||
Line 12: | Line 16: | ||
{{#if:{{{function|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Function</span> <span class="Device-Info-Data-Cell-Body">{{{function}}}</span></div>}} | {{#if:{{{function|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Function</span> <span class="Device-Info-Data-Cell-Body">{{{function}}}</span></div>}} | ||
{{#if:{{{availability|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Availability</span> <span class="Device-Info-Data-Cell-Body">{{{availability}}}</span></div>}} | {{#if:{{{availability|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Availability</span> <span class="Device-Info-Data-Cell-Body">{{{availability}}}</span></div>}} | ||
{{#if:{{{size|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Size | {{#if:{{{size|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Size</span> <span class="Device-Info-Data-Cell-Body">{{{size}}}</span></div>}} | ||
</div> | </div> | ||
<div class="Device-Info-Data-Section-Header">Input / Output</div> | <div class="Device-Info-Data-Section-Header">Input / Output</div> | ||
<div class="Device-Info-Data-Section"> | <div class="Device-Info-Data-Section"> | ||
{{#if:{{{ | {{#if:{{{electricIn|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Electric Input</span> <span class="Device-Info-Data-Cell-Body">{{{electricIn}}}</span></div>}}{{#if:{{{electricOut|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Electric Output</span> <span class="Device-Info-Data-Cell-Body">{{{electricOut}}}</span></div>}}{{#if:{{{coolantIn|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Coolant Input</span> <span class="Device-Info-Data-Cell-Body">{{{coolantInput}}}</span></div>}}{{#if:{{{coolantOutput|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Coolant Output</span> <span class="Device-Info-Data-Cell-Body">{{{coolantOutput}}}</span></div>}}{{#if:{{{propellantIn|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Propellant Input</span> <span class="Device-Info-Data-Cell-Body">{{{propellantIn}}}</span></div>}}{{#if:{{{propellantOut|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Propellant Output</span> <span class="Device-Info-Data-Cell-Body">{{{propellantOut}}}</span></div>}}{{#if:{{{fuelIn|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Fuel Input</span> <span class="Device-Info-Data-Cell-Body">{{{fuelIn}}}</span></div>}}{{#if:{{{fuelOutput|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Fuel Output</span> <span class="Device-Info-Data-Cell-Body">{{{fuelOutput}}}</span></div>}}{{#if:{{{sockets|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Sockets</span> <span class="Device-Info-Data-Cell-Body">{{{sockets}}}</span></div>}}{{#if:{{{YOLOLchips|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Chip Slots</span> <span class="Device-Info-Data-Cell-Body">{{{YOLOLchips}}}</span></div>}}{{#if:{{{modInterfaces|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Modular Interfaces</span> <span class="Device-Info-Data-Cell-Body">{{{modInterfaces}}}</span></div>}}{{#if:{{{deviceInterfaces|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Device Interfaces</span> <span class="Device-Info-Data-Cell-Body">{{{deviceInterfaces}}}</span></div>}} | ||
</div> | </div> | ||
<div class="Device-Info-Data-Section-Header">Construction</div><div class="Device-Info-Data-Construction>{{#if:{{{weight|}}}|<span><b>Weight</b>: {{{weight}}}</span>}}{{#if:{{{volume|}}}|<span><b>Volume</b>: {{{volume}}}</span>}}{{#if:{{{corrosionResistance|}}}|<span><b> | <div class="Device-Info-Data-Section-Header">Construction</div><div class="Device-Info-Data-Construction>{{#if:{{{weight|}}}|<span><b>Weight</b>: {{{weight}}}</span>}}{{#if:{{{volume|}}}|<span><b>Volume</b>: {{{volume}}}</span>}}{{#if:{{{corrosionResistance|}}}|<span><b>CRSV Resist</b>: {{{corrosionResistance}}}</span>}}</div> | ||
<div class="Device-Info-Data-Section" style="grid-template-columns: repeat(auto-fit, minmax( | <div class="Device-Info-Data-Section" style="grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));display:grid;column-gap:1em;padding:0 0.4em;"> | ||
{{#if:{{{aegisium|}}}| <div class=" | {{#if:{{{aegisium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Aegisium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{aegisium}}}</span></div>}}{{#if:{{{ajatite|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Ajatite]]</span> <span class="Construction-Info-Data-Cell-Body">{{{ajatite}}}</span></div>}}{{#if:{{{arkanium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Arkanium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{arkanium}}}</span></div>}}{{#if:{{{bastium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Bastium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{bastium}}}</span></div>}}{{#if:{{{charodium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Charodium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{charodium}}}</span></div>}}{{#if:{{{corazium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Corazium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{corazium}}}</span></div>}}{{#if:{{{exorium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Exorium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{exorium}}}</span></div>}}{{#if:{{{haderite|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Haderite]]</span> <span class="Construction-Info-Data-Cell-Body">{{{haderite}}}</span></div>}}{{#if:{{{ice|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Ice]]</span> <span class="Construction-Info-Data-Cell-Body">{{{ice}}}</span></div>}}{{#if:{{{ilmatrium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Ilmatrium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{ilmatrium}}}</span></div>}}{{#if:{{{karnite|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Karnite]]</span> <span class="Construction-Info-Data-Cell-Body">{{{karnite}}}</span></div>}}{{#if:{{{kutonium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Kutonium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{kutonium}}}</span></div>}}{{#if:{{{lukium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Lukium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{lukium}}}</span></div>}}{{#if:{{{merkerium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Merkerium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{merkerium}}}</span></div>}}{{#if:{{{nhurgite|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Nhurgite]]</span> <span class="Construction-Info-Data-Cell-Body">{{{nhurgite}}}</span></div>}}{{#if:{{{oninum|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Oninum]]</span> <span class="Construction-Info-Data-Cell-Body">{{{oninum}}}</span></div>}}{{#if:{{{surtrite|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Surtrite]]</span> <span class="Construction-Info-Data-Cell-Body">{{{surtrite}}}</span></div>}}{{#if:{{{tengium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Tengium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{tengium}}}</span></div>}}{{#if:{{{ukonium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Ukonium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{ukonium}}}</span></div>}}{{#if:{{{valkite|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Valkite]]</span> <span class="Construction-Info-Data-Cell-Body">{{{valkite}}}</span></div>}}{{#if:{{{vokarium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Vokarium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{vokarium}}}</span></div>}}{{#if:{{{xhalium|}}}| <div class="Construction-Info-Data-Cell"><span class="Construction-Info-Data-Cell-Header">[[Xhalium]]</span> <span class="Construction-Info-Data-Cell-Body">{{{xhalium}}}</span></div>}} | ||
</div> | </div> | ||
</div> | </div> | ||
Line 31: | Line 32: | ||
.Device-Info { | .Device-Info { | ||
border:2px solid #304344; | border:2px solid #304344; | ||
width: | width:25vw; | ||
max-width:40em; | |||
float:right; | float:right; | ||
clear:right; | |||
margin: 10px 10px; | margin: 10px 10px; | ||
padding: 10px 10px; | padding: 10px 10px; | ||
background:rgba(49, 68, 77, 0. | background:rgba(49, 68, 77, 0.15); | ||
} | } | ||
.Device-Info-Header { | .Device-Info-Header { | ||
text-align: center; | text-align: center; | ||
margin: | margin-bottom: 0.25em; | ||
} | } | ||
.Device-Info-Header img { | .Device-Info-Header img { | ||
max-width:100%; | max-width:100%; | ||
height:auto; | height: auto; | ||
width: auto; | |||
background: linear-gradient(transparent, #3a808045); | |||
} | } | ||
.Device-Info-Header-Caption { | .Device-Info-Header-Caption { | ||
display: block; | display: block; | ||
font-style: italic; | font-style: italic; | ||
margin-top: .25em | margin-top: 0.25em; | ||
} | } | ||
.Device-Info-Name { | .Device-Info-Name { | ||
font-family: | font-family: KenneyFuture; | ||
font-size:1.8em; | font-size:1.8em; | ||
color:#edcd50; | color:#edcd50; | ||
text-align: center; | text-align: center; | ||
background: #38586082; | background: #38586082; | ||
} | } | ||
.Device-Info-Data-Section-Header { | .Device-Info-Data-Section-Header { | ||
Line 67: | Line 67: | ||
margin: auto; | margin: auto; | ||
background: #2b42488c; | background: #2b42488c; | ||
font-family: | font-family: KenneyFuture; | ||
font-size: | font-size: 1.4em; | ||
margin-top: 1em; | margin-top: 1em; | ||
} | } | ||
/* Traditional table styling */ | |||
.Device-Info-Data-Cell { | |||
display:flex; | |||
text-align:left; | |||
padding:0 0.4em; | |||
} | |||
.Device-Info-Data-Cell-Header { | |||
flex:48%; | |||
min-width:min-content; | |||
margin-right:4%; | |||
} | |||
.Device-Info-Data-Cell-Body { | |||
flex:50%; | |||
white-space:pre; | |||
margin: auto; | |||
} | |||
.Construction-Info-Data-Cell-Header { | |||
flex: 50%; | |||
text-align: left; | |||
display: inline-block; | |||
} | |||
.Construction-Info-Data-Cell { | |||
display: flex; | |||
} | |||
/* Side-by-side/grid formatting | |||
.Device-Info-Data-Section { | .Device-Info-Data-Section { | ||
display: grid; | display: grid; | ||
grid-template-columns: 50% 50%; | grid-template-columns: 50% 50%; | ||
} | } | ||
. | .Construction-Info-Data-Cell-Header, .Construction-Info-Data-Cell-Body, .Device-Info-Data-Cell-Header, .Device-Info-Data-Cell-Body { | ||
.Device-Info-Data-Cell-Header, .Device-Info-Data-Cell-Body { | |||
display:block; | display:block; | ||
}*/ | |||
/* General styling */ | |||
.Device-Info-Data-Section { | |||
border-bottom: 1px solid #394442; | |||
text-align: center; | |||
} | } | ||
.Device-Info-Data-Cell- | .Device-Info-Data-Cell, .Construction-Info-Data-Cell { | ||
font-size:1.25em; | font-size:1.25em; | ||
} | |||
.Device-Info-Data-Cell-Header, .Construction-Info-Data-Cell-Header { | |||
font-weight:bold; | |||
} | } | ||
.Device-Info-Data-Cell-Body { | .Device-Info-Data-Cell-Body { | ||
} | } | ||
.Device-Info-Data-Construction { | |||
grid-template-columns: auto auto auto; | |||
grid-gap: 2%; | |||
display: grid; | |||
text-align: center; | |||
padding: 4px 2px; | |||
border-bottom: 1px solid #394442; | |||
} | |||
/* Gallery specific support */ | |||
.Device-Info .mw-gallery-slideshow-buttons, .oo-ui-layout oo-ui-panelLayout { | |||
padding: 0 !important; | |||
margin: 0 auto !important; | |||
width:100%; | |||
position: absolute!important; | |||
bottom: 0!important; | |||
} | |||
.Device-Info .mw-gallery-slideshow-caption { | |||
line-height: 1em!important; | |||
margin-bottom: 3em!important; | |||
} | |||
.Device-Info .mw-gallery-slideshow { | |||
margin:0!important; | |||
} | |||
/* Supporting mobile mode without flexbox = :'( */ | |||
/* Portrait orientation. Also, low-res viewports */ | |||
@media | |||
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), | |||
only screen and ( min--moz-device-pixel-ratio: 2) and (orientation: portrait), | |||
only screen and ( -o-min-device-pixel-ratio: 2/1) and (orientation: portrait), | |||
only screen and ( min-device-pixel-ratio: 2) and (orientation: portrait), | |||
only screen and ( min-resolution: 192dpi) and (orientation: portrait), | |||
only screen and ( min-resolution: 2dppx) and (orientation: portrait), | |||
only screen and (max-width: 800px) and (orientation: portrait) { | |||
.Device-Info { | |||
width:auto; | |||
float:none; | |||
clear:none; | |||
font-size:1.5em; | |||
} | |||
} | |||
/* Landscape orientation. Also, low-res viewports */ | |||
@media | |||
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), | |||
only screen and ( min--moz-device-pixel-ratio: 2) and (orientation: landscape), | |||
only screen and ( -o-min-device-pixel-ratio: 2/1) and (orientation: landscape), | |||
only screen and ( min-device-pixel-ratio: 2) and (orientation: landscape), | |||
only screen and ( min-resolution: 192dpi) and (orientation: landscape), | |||
only screen and ( min-resolution: 2dppx) and (orientation: landscape) | |||
{ | |||
.Device-Info { | |||
width:40%; | |||
font-size:0.9em; | |||
} | |||
} | |||
/* Possibly trash | |||
.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell { | |||
width: 45%; | |||
display:inline-flex; | |||
padding: 0 2%; | |||
margin:0; | |||
} | |||
.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell:nth-child(odd) { | |||
border-right: 1px solid #424242; | |||
} | |||
.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell .Device-Info-Data-Cell-Body { | |||
flex:0; | |||
}*/ | |||
}} | }} | ||
</includeonly> | </includeonly> |
Latest revision as of 09:18, 14 May 2021
Gallery mode can be utilized in the image field with:
|image=<gallery mode="slideshow"> Image:Memory_relay.png|"Caption" Image:Logo_of_empire.png|"Caption" </gallery>