Template:ShipBoxTooltip: Difference between revisions

← Older edit

VisualWikitext

Latest revision as of 13:35, 27 March 2023

Template documentation (for the above template, sometimes hidden or invisible)

Description: Creates a tooltip with a subset of the ships stats.; This template is a part of the Ship Database template set and designed to be used in conjunction with the templates on that category and is not meant to be used or called directly!.
If you're looking on how to use the Ship template please see this page instead.

DO NOT EDIT THE CONTENTS OF THIS TEMPLATE IF YOU ARE NOT SURE ON WHAT YOU ARE DOING.

Dependencies

Uses: {{Tooltip}}; {{Imageserver}} When no local image of ship is available and shipid is known.; Part of the parameter set of {{ShipArticle}}

Syntax: ShipBoxTooltip is not to be used on its own. It is to be called by using the wrapper template {{Ship}}

Template set

Sample

Some text {{Ship|Megathron Navy Issue}} more text.

gives...

Some text more text.

Bug:

There is a problem with the presentation of the result. See Template talk:ShipBoxTooltip

Visit Template:ShipBoxTooltip/doc to edit this text! (How does this work?) (Refresh this text - why?)

@@ Line 1: / Line 1: @@
-{{#css:
+<includeonly><onlyinclude>{{#css:
-	.tooltip-frame{
-    position:relative; /*this is the key*/
-    z-index:24; background-color:transparent;
-    color:orange;
-    text-decoration:none}
-	.tooltip-frame:hover{z-index:25; color:white;}
+.sbtt {
+  width: 100%;
+ }
-	.tooltip-frame .inner-snippet{display: none}
+.sbtt td.sbtt-image {
+  position: relative;
-	.tooltip-frame:hover .inner-snippet,.tooltip-frame.hover .inner-snippet
+  padding-right: 5px;
-	{
+  vertical-align: top;
-		background-color: transparent;
+ }
-		border: medium none;
-		display: block;
+.sbtt sbtt-image a img {
-		left: 1em;
+  border: 1px solid #272727;
-		position: absolute;
+ }
-		top: 1.2em;
-	}
+.sbtt .techcornersmall {
+  position: absolute;
-	.tooltip-frame .inner-snippet span
+  top: 0;
-	{
+  left: 2px;
-		display: block;
+ }
-	}
+/* header */
-	.tooltip-frame .inner-snippet .left, .tooltip-frame .inner-snippet .right
+.sbtt .sbtt-header {
-	{
+  margin-bottom: 5px;
-		float:left;
+  border-bottom: 1px solid #272727;
-	}
+  padding-bottom: 5px;
-	.tooltip-frame .inner-snippet .l1
+  text-align: center;
-	{
+ }
-		float: left;
-		font-family: trebuchet MS;
+.sbtt .sbtt-ship-name {
-		line-height: 22px;
+  height: 20px;
-		margin-bottom: 3px;
+  white-space: nowrap;
-		width: 325px;
+  color: white;
-	}
+  font: small-caps 16px/15px trebuchet MS;
-	.tooltip-frame .inner-snippet .l2
+ }
-	{
-		border: 1px solid #525751;
+.sbtt .sbtt-ship-category {
-		color: #CCCCCC;
+  font-size: 11px;
-		float: left;
+  line-height: 11px;
-		font-family: trebuchet MS;
+ }
-		font-size: 11px;
-		line-height: 20px;
+.sbtt .sbtt-ship-group {
-		padding: 2px;
+  white-space: nowrap;
-		width: 321px;
+  color: orange;
-	}
+ }
-	.tooltip-frame .inner-snippet .l2 span
-	{
+.sbtt .sbtt-ship-hull {
-		float:left;
+  white-space: nowrap;
-	}
+ }
-	.tooltip-frame .inner-snippet .l2 .att-line
-	{
+/* Highlights */
-		background-color: #1D1C23;
+.sbtt .sbtt-highlights {
-		width: 100%;
+  padding-bottom: 5px;
-	}
+ }
-	.tooltip-frame .inner-snippet .l2 .att-line .att-item
-	{
+.sbtt .sbtt-highlights div {
-		border-right: 2px solid black;
+  height: 10px;
-		margin-right: 2px;
+  color: khaki;
-		padding: 0 3px 0 2px;
+  font-size: 10px;
-	}
+  line-height: 12px;
+ }
-	.tooltip-frame .inner-snippet .att-value
-	{
+/* *** Ship attributes *** */
-		color: white;
+.sbtt .sbtt-attributes {
-		padding: 0 2px 0 4px;
+  width: 180px;
-		text-align: right;
+ }
-	}
-	.tooltip-frame .inner-snippet .att-label { color: darkgrey; }
+.sbtt .sbtt-attributes div {
+  float: left;
-	.tooltip-frame .suppresslink
+  margin-right: 3px;
-	{
+  padding-right: 3px;
-		height: 73px;
+  height: 13px;
-		left: 4px;
+  white-space: nowrap;
-		position: absolute;
+  color: #9E8F75;
-		top: 4px;
+  font-size: 10px;
-		width: 73px;
+  line-height: 15px;
-		z-index: 100;
+ }
-	}
-}}{{#switch: {{{mode}}}
+}}
-|nodata=no data available
+{{Tooltip
-|<span class='tooltip-frame'>{{#if:{{{shipname}}}|{{{shipname|Unknown Ship}}}|Unknown Ship}}<span style='margin-left: 3px; font-size: 60%; color: yellow;'>&#8595;</span>
+| 1={{#if: {{{shipname|}}} |[[{{{shipname}}}]] |{{Co|red|! parameter shipname missing !}} }}
-	<span class='inner-snippet ship-info' style='width: 410px;'>
+| 2=<table class="sbtt">
-		<span class='left' style='background-color: black; padding: 4px 0pt 4px 4px; width: 73px;'><span class='att-img'>{{#ifexist: File:{{{shipimg}}}|[[Image:{{{shipimg}}}|73px|middle|{{#if:{{{shipname}}}|{{{shipname}}}|Unknown Ship}}]]|[[Image:no-image.png|73px|middle|{{#if:{{{shipname}}}|{{{shipname}}}|Unknown Ship}}]]}}</span><span class='suppresslink'>&nbsp;</span></span>
+ <tr>
-		<span class='right' style='margin-right: 4px; width: 327px;'>
+  <td class="sbtt-image">{{#if: {{{shipimg|}}}
-			<span style='background-color: black; float: left; padding: 4px; width: 100%;'>
+     | [[Image:{{{shipimg}}}|128x128px|link=]]
-				<span class='l1'>
+     |  {{#if: {{{shipid|}}}
-					<span style='color: #F1EFCA;float: left;font-size: 18px;font-weight: bold;'>{{#if:{{{shipname}}}|{{{shipname|Unknown Ship}}}|Unknown Ship}}<span style='display: {{#ifexist: Template:Ship.{{{shipname}}} | inline | none }}; font-size: 10px; line-height: 10px; padding-left: 3px;'>[[Template:Ship.{{{shipname}}}|goto article &#8250;]]</span></span>
+         | {{Imageserver|types|{{{shipid}}}|render|size=128}}
-					<span style='color: #CCCCCC;float: right;font-size: 11px;'>{{{roles|}}}</span>
+         | [[Image:No-image.png|128x128px|link=]]
-				</span>
+        }}
-				<span class='l2'>
+     }}
-					<span class='att-line' style='margin-bottom:2px;'>
+    {{#if:{{{tech|}}} |<div class="techcornersmall">[[Image:CornerT{{{tech}}}s.png|link=]]</div> }}
-						<span class='att-item' style='border-right:medium none;'>
+  </td>
-							<span class='att-value'>{{#if:{{{highs}}}|{{{highs|0}}}|0}}</span><span class='att-img'>[[Image:icon_hi_slot.png|15px|middle|high slots]]</span><span class='att-label' style='color: #9A7535;'>high</span>
+  <td>
-						</span>
+   <div class="sbtt-header">
-						<span class='att-item' style='border-right:medium none;'>
+    <div class="sbtt-ship-name">{{{shipname}}}</div>
-							<span class='att-value'>{{#if:{{{launchers}}}|{{{launchers|0}}}|0}}</span><span class='att-img'>[[Image:icon_launcher_hp.png|15px|middle|launcher slots]]</span><span class='att-label'>launchers</span>
+    <div class="sbtt-ship-category"><span class="sbtt-ship-group">{{{grouping|}}}</span> <span class="sbtt-ship-hull">{{{hulltype|}}}</span></div>
-						</span>
+   </div>
-						<span class='att-item'>
+   {{#if: {{{highlights1|}}} {{{highlights2|}}} {{{highlights3|}}} {{{highlights4|}}}
-							<span class='att-value'>{{#if:{{{turrets}}}|{{{turrets|0}}}|0}}</span><span class='att-img'>[[Image:icon_turret_hp.png|15px|middle|turret slots]]</span><span class='att-label'>turrets</span>
+    |<div class="sbtt-highlights"><!--
-						</span>
+-->  {{#if: {{{highlights1|}}}|<div>[[Image:Icon_highlights.png|10x10px]]{{{highlights1|}}}</div>}}<!--
-						<span class='att-item'>
+-->  {{#if: {{{highlights2|}}}|<div>[[Image:Icon_highlights.png|10x10px]]{{{highlights2|}}}</div>}}<!--
-							<span class='att-value'>{{#if:{{{mediums}}}|{{{mediums|0}}}|0}}</span><span class='att-img'>[[Image:icon_mid_slot.png|15px|middle|middle slots]]</span><span class='att-label' style='color: #9A7535;'>mid</span>
+-->  {{#if: {{{highlights3|}}}|<div>[[Image:Icon_highlights.png|10x10px]]{{{highlights3|}}}</div>}}<!--
-						</span>
+-->  {{#if: {{{highlights4|}}}|<div>[[Image:Icon_highlights.png|10x10px]]{{{highlights4|}}}</div>}}
-						<span class='att-item'>
+    </div>
-							<span class='att-value'>{{#if:{{{lows}}}|{{{lows|0}}}|0}}</span><span class='att-img'>[[Image:icon_low_slot.png|15px|middle|low slots]]</span><span class='att-label' style='color: #9A7535;'>low</span>
+   }}
-						</span>
+   <div class="sbtt-attributes">
-					</span>
+    <div>[[Image:icon_hi_slot.png|15x15px|link=]]{{#if: {{{highs|}}}
-					<span class='att-line'>
+        | {{{highs}}} ({{#if: {{{launchers|}}} |{{{launchers}}} |0 }}/{{#if: {{{turrets|}}} |{{{turrets}}} |0 }})
-						<span class='att-item'>
+        | 0 }} [[Image:icon_mid_slot.png|15x15px|link=]]{{#if: {{{mediums|}}} |{{{mediums}}} |0 }} [[Image:icon_low_slot.png|15x15px|link=]]{{#if: {{{lows|}}} |{{{lows}}} |0 }}
-							<span class='att-value' style='width:40px'>{{#if:{{{dronebay}}}|{{{dronebay|0 m3}}}|0 m3}}</span><span class='att-img'>[[Image:icon_drone_capacity.png|15px|middle|drone capacity]]</span><span class='att-label'>drones</span>
+    </div>
-						</span>
+    <div>[[Image:icon_powergrid.png|15x15px|link=]]{{#if: {{{powergrid|}}} |{{{powergrid}}} |0 MW }} [[Image:icon_cpu.png|15x15px|link=]]{{#if: {{{cpu|}}} |{{{cpu}}} |0 tf }}</div>
-						<span class='att-item'>
+    <div>[[Image:Icon_velocity.png|15x15px|link=]]{{#if: {{{maxvelocity|}}} |{{{maxvelocity}}} |0 m/s }}</div>
-							<span class='att-value' style='width:70px'>{{#if:{{{bandwidth}}}|{{{bandwidth|0 Mbit/sec}}}|0 Mbit/sec}}</span><span class='att-img'>[[Image:icon_drone_bandwith.png|15px|middle|drone bandwith]]</span><span class='att-label'>b/w</span>
+    <div>[[Image:Icon_capacity.png|15x15px|link=]]{{#if: {{{cargohold|}}} |{{{cargohold}}} |0 m&#179; }}</div>
-						</span>
+   </div>
-						<span class='att-item' style='border-right:medium none;'>
+  </td>
-							<span class='att-value' style='width:40px'>{{#if:{{{cargohold}}}|{{{cargohold|0 m3}}}|0 m3}}</span><span class='att-img'>[[Image:Icon_capacity.png|15px|middle|cargo capacity]]</span><span class='att-label'>cargo</span>
+ </tr>
-						</span>
+</table>
-					</span>
+}}</onlyinclude></includeonly><noinclude>{{documentation}}</noinclude>
-				</span>
-			</span>
-		</span>
-	</span>
-</span>}}