Difference between revisions of "User:DustyFB/Sandbox/Templates/Template:DeviceInfobox"

Latest revision as of 10: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>

Difference between revisions of "User:DustyFB/Sandbox/Templates/Template:DeviceInfobox"

Latest revision as of 10:18, 14 May 2021

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Starbase

Collections

Endoskeleton

Networks

Guides and Tutorial

Wiki Tools

@@ Line 1: / Line 1: @@
 <noinclude>
-hello
+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>
 <includeonly>
 <div class="Device-Info" style="top: -35px;position: relative;">
-   <div class="Device-Info-Header">{{#if:{{{image|}}}|[[File:{{{image}}}|caption]]|No image submitted.}}<span class="Device-Info-Header-Caption"> {{#if:{{{caption|}}}|{{{caption}}}|}} </span></div>
+   <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-Data-Wrap">
@@ Line 16: / Line 20: @@
        <div class="Device-Info-Data-Section-Header">Input / Output</div>
        <div class="Device-Info-Data-Section">
-         {{#if:{{{electricity|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Electricity</span> <span class="Device-Info-Data-Cell-Body">{{{electricity}}}</span></div>}}
+         {{#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>}}
-        {{#if:{{{propellant|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Propellant</span> <span class="Device-Info-Data-Cell-Body">{{{propellant}}}</span></div>}}
-        {{#if:{{{sockets|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Cable Sockets</span> <span class="Device-Info-Data-Cell-Body">{{{sockets}}}</span></div>}}
-        {{#if:{{{socketsYOLOL|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">YOLOL Sockets</span> <span class="Device-Info-Data-Cell-Body">{{{socketsYOLOL}}}</span></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>Corrosion Resistance</b>: {{{corrosionResistance}}}</span>}}</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>CRSV Resist</b>: {{{corrosionResistance}}}</span>}}</div>
-       <div class="Device-Info-Data-Section" style="grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));">
+       <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="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Aegisium]]</span> <span class="Device-Info-Data-Cell-Body">{{{aegisium}}}</span></div>}}{{#if:{{{ajatite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ajatite]]</span> <span class="Device-Info-Data-Cell-Body">{{{ajatite}}}</span></div>}}{{#if:{{{arkanium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Arkanium]]</span> <span class="Device-Info-Data-Cell-Body">{{{arkanium}}}</span></div>}}{{#if:{{{bastium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Bastium]]</span> <span class="Device-Info-Data-Cell-Body">{{{bastium}}}</span></div>}}{{#if:{{{charodium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Charodium]]</span> <span class="Device-Info-Data-Cell-Body">{{{charodium}}}</span></div>}}{{#if:{{{corazium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Corazium]]</span> <span class="Device-Info-Data-Cell-Body">{{{corazium}}}</span></div>}}{{#if:{{{exorium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Exorium]]</span> <span class="Device-Info-Data-Cell-Body">{{{exorium}}}</span></div>}}{{#if:{{{haderite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Haderite]]</span> <span class="Device-Info-Data-Cell-Body">{{{haderite}}}</span></div>}}{{#if:{{{ice|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ice]]</span> <span class="Device-Info-Data-Cell-Body">{{{ice}}}</span></div>}}{{#if:{{{ilmatrium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ilmatrium]]</span> <span class="Device-Info-Data-Cell-Body">{{{ilmatrium}}}</span></div>}}{{#if:{{{karnite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Karnite]]</span> <span class="Device-Info-Data-Cell-Body">{{{karnite}}}</span></div>}}{{#if:{{{kutonium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Kutonium]]</span> <span class="Device-Info-Data-Cell-Body">{{{kutonium}}}</span></div>}}{{#if:{{{lukium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Lukium]]</span> <span class="Device-Info-Data-Cell-Body">{{{lukium}}}</span></div>}}{{#if:{{{merkerium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Merkerium]]</span> <span class="Device-Info-Data-Cell-Body">{{{merkerium}}}</span></div>}}{{#if:{{{nhurgite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Nhurgite]]</span> <span class="Device-Info-Data-Cell-Body">{{{nhurgite}}}</span></div>}}{{#if:{{{oninum|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Oninum]]</span> <span class="Device-Info-Data-Cell-Body">{{{oninum}}}</span></div>}}{{#if:{{{surtrite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Surtrite]]</span> <span class="Device-Info-Data-Cell-Body">{{{surtrite}}}</span></div>}}{{#if:{{{tengium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Tengium]]</span> <span class="Device-Info-Data-Cell-Body">{{{tengium}}}</span></div>}}{{#if:{{{ukonium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ukonium]]</span> <span class="Device-Info-Data-Cell-Body">{{{ukonium}}}</span></div>}}{{#if:{{{valkite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Valkite]]</span> <span class="Device-Info-Data-Cell-Body">{{{valkite}}}</span></div>}}{{#if:{{{vokarium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Vokarium]]</span> <span class="Device-Info-Data-Cell-Body">{{{vokarium}}}</span></div>}}{{#if:{{{xhalium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Xhalium]]</span> <span class="Device-Info-Data-Cell-Body">{{{xhalium}}}</span></div>}}
+       {{#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>
@@ Line 31: / Line 32: @@
 .Device-Info {
    border:2px solid #304344;
-   width:25%;
+   width:25vw;
+  max-width:40em;
    float:right;
+  clear:right;
    margin: 10px 10px;
    padding: 10px 10px;
-   background:rgba(49, 68, 77, 0.33);
+   background:rgba(49, 68, 77, 0.15);
 }
 .Device-Info-Header {
    text-align: center;
-   margin: 1em 0;
+   margin-bottom: 0.25em;
 }
 .Device-Info-Header img {
    max-width:100%;
-   height:auto;
+   height: auto;
+  width: auto;
+  background: linear-gradient(transparent, #3a808045);
 }
 .Device-Info-Header-Caption {
    display: block;
    font-style: italic;
-   margin-top: .25em;
+   margin-top: 0.25em;
-}
-.Device-Info-Header img:before {
-  border:1px solid red;
-  display: block;
 }
 .Device-Info-Name {
-   font-family: Kenney Future Narrow;
+   font-family: KenneyFuture;
    font-size:1.8em;
    color:#edcd50;
    text-align: center;
    background: #38586082;
-  font-variant: ;
 }
 .Device-Info-Data-Section-Header {
@@ Line 67: / Line 67: @@
    margin: auto;
    background: #2b42488c;
-   font-family: kenney future narrow;
+   font-family: KenneyFuture;
-   font-size: 16px;
+   font-size: 1.4em;
    margin-top: 1em;
-  /*! font-weight: 200; */
 }
+/* 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 {
-  /*! padding: 1.8em 0; */
    display: grid;
    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 {
+  display:block;
+}*/
+/* General styling */
+.Device-Info-Data-Section {
    border-bottom: 1px solid #394442;
    text-align: center;
 }
+.Device-Info-Data-Cell, .Construction-Info-Data-Cell {
+  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-Construction {
      grid-template-columns: auto auto auto;
@@ Line 84: / Line 125: @@
      display: grid;
      text-align: center;
-     padding: 4px 10px;
+     padding: 4px 2px;
-    margin: 0px 10px;
      border-bottom: 1px solid #394442;
 }
-.Device-Info-Data-Cell {
+/* Gallery specific support */
-   /*! display:grid; */
+.Device-Info .mw-gallery-slideshow-buttons, .oo-ui-layout oo-ui-panelLayout {
-   margin:1em;
+  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;
 }
-.Device-Info-Data-Cell-Header, .Device-Info-Data-Cell-Body {
-  display:block;
 }
-.Device-Info-Data-Cell-Header {
-   font-size:1.25em;
+/* 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-Cell-Body {
+.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell:nth-child(odd) {
-   font-size:1.25em;
+   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>