User:Horblegorble/Sandbox/CollapsibleRow: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Latest revision as of 15:35, 27 September 2023

Original

copied from https://www.mediawiki.org/wiki/Manual:Collapsible_elements ('translate' elements removed)

Inside another element

You can also use collapsible elements in other elements, such as a table.

My table with collapsible info

Title

Sample

Lorem

Ipsum

More info

Number	Letter
1	A
2	B
3	C

Horblegorble's Loot Experiment

Templated

Item

Quantity

Rarity

Apple

1

40%

Scale Armor
Scale Chestpiece		3.33%
Scale Shoulderguards		3.33%
Scale Leggings		3.33%

Scale Armor	1	10%
Scale Chestpiece		3.33%
Scale Shoulderguards		3.33%
Scale Leggings		3.33%

Armor

40%

Steel Armor	01-01	20.00%
Steel Cuirass		6.67%
Steel Shoulders		6.67%
Steel Chausses		6.67%

Silken Armor	01-01	20.00%
Silken Robe		6.67%
Silken Shoulders		6.67%
Silken Skirt		6.67%

Coconut

2-4

10%

Manual

Item

Quantity

Rarity

Apple

1

60%

Scale Armor	1	10%
Scale Chestpiece		3.33%
Scale Shoulderguards		3.33%
Scale Leggings		3.33%

Armor

40.00%

Steel Armor	01-01	20.00%
Steel Cuirass		6.67%
Steel Shoulders		6.67%
Steel Chausses		6.67%

Silken Armor	1	20%
Silken Robe		6.67%
Silken Shoulders		6.67%
Silken Skirt		6.67%

Coconut

2-4

10%

(Old) Minotaur Mockup

Item

Quantity

Rarity

Material	*	15.4%
Sunsilk	1-3	3.85%
Dragon Scale	3-8	3.85%
Orichalcum Ingot	1-3	3.85%
Eldwood Logs	2-6	3.85%

Carcanet of Wrath

1

3.85%

Orichalcum Armor	1	3.33%
Orichalcum Chestguard		0.48%
Orichalcum Mantle		0.48%
Orichalcum Legplates		0.48%
Orichalcum Cape		0.48%
Orichalcum Gloves		0.48%
Orichalcum Belt		0.48%
Orichalcum Warboots		0.48%

Dragonscale Armor	1	3.33%
Dragonscale Chestplate		0.48%
Dragonscale Mantle		0.48%
Dragonscale Leggings		0.48%
Dragonscale Cape		0.48%
Dragonscale Gloves		0.48%
Dragonscale Sash		0.48%
Dragonscale Spurs		0.48%

Sunsilk Armor	1	3.33%
Sunsilk Tunic		0.48%
Sunsilk Shoulderwraps		0.48%
Sunsilk Kilt		0.48%
Sunsilk Cape		0.48%
Sunsilk Handwraps		0.48%
Sunsilk Sash		0.48%
Sunsilk Footwraps		0.48%

Caladbolg

1

1.28%

Mjolnir

1

1.28%

Parashu

1

1.28%

@@ Line 1: / Line 1: @@
+<!--<templatestyles src="https://wiki.veloren.net/wiki/User:Horblegorble/MyStyle.css" />-->
 == Original ==
 copied from https://www.mediawiki.org/wiki/Manual:Collapsible_elements
 ('translate' elements removed)
-=== Inside another element === <!--T:59-->
+=== Inside another element ===
 You can also use collapsible elements in other elements, such as a table.
@@ Line 38: / Line 40: @@
 == Horblegorble's Loot Experiment ==
+<!-- Here is the CSS, i copy-pasted the code from mediawiki : https://wiki.veloren.net/wiki/Template:Https://wiki.veloren.net/wiki/User:Horblegorble/MyStyle.css -->
+=== Templated ===
+{{User:Horblegorble/Sandbox/Template/LootHeaderVariable}}
+{{User:Horblegorble/Sandbox/Template/LootRow|itemname=Apple|quantity=1|color=green|rarity=40%}}
+{{User:Horblegorble/Sandbox/Template/LootHeaderVariable|depth=1|collapsed=0|image=Scale Armor Set.png|title=Scale Armor}}
+{{User:Horblegorble/Sandbox/Template/LootRowNestedNoQuantity|itemname=Scale Chestpiece|color=orange|rarity=3.33%}}
+{{User:Horblegorble/Sandbox/Template/LootRowNestedNoQuantity|itemname=Scale Shoulderguards|color=orange|rarity=3.33%}}
+{{User:Horblegorble/Sandbox/Template/LootRowNestedNoQuantity|itemname=Scale Leggings|color=orange|rarity=3.33%}}
+{{User:Horblegorble/Sandbox/Template/LootEndNested}}
+{{User:Horblegorble/Sandbox/Template/LootHeaderNested|image=Scale Armor Set.png|title=Scale Armor|quantity=1|color=yellow|rarity=10%}}
+{{User:Horblegorble/Sandbox/Template/LootRowNestedNoQuantity|itemname=Scale Chestpiece|color=orange|rarity=3.33%}}
+{{User:Horblegorble/Sandbox/Template/LootRowNestedNoQuantity|itemname=Scale Shoulderguards|color=orange|rarity=3.33%}}
+{{User:Horblegorble/Sandbox/Template/LootRowNestedNoQuantity|itemname=Scale Leggings|color=orange|rarity=3.33%}}
+{{User:Horblegorble/Sandbox/Template/LootEndNested}}
+{{User:Horblegorble/Sandbox/Template/LootHeaderNestedNoImage|title=Armor|quantity=1|color=green|rarity=40%}}
+{{User:Horblegorble/Sandbox/Template/LootHeaderDoubleNested|image=Steel Armor Set.png|title=Steel Armor|quantity=01-01|color=yellow|rarity=20.00%}}
+{{User:Horblegorble/Sandbox/Template/LootRowDoubleNestedNoQuantity|itemname=Steel Cuirass|color=orange|rarity=6.67%}}
+{{User:Horblegorble/Sandbox/Template/LootRowDoubleNestedNoQuantity|itemname=Steel Shoulders|color=orange|rarity=6.67%}}
+{{User:Horblegorble/Sandbox/Template/LootRowDoubleNestedNoQuantity|itemname=Steel Chausses|color=orange|rarity=6.67%}}
+{{User:Horblegorble/Sandbox/Template/LootEndDoubleNested}}
+{{User:Horblegorble/Sandbox/Template/LootHeaderDoubleNested|image=Silken Armor Set.png|title=Silken Armor|quantity=01-01|color=yellow|rarity=20.00%}}
+{{User:Horblegorble/Sandbox/Template/LootRowDoubleNestedNoQuantity|itemname=Silken Robe|color=orange|rarity=6.67%}}
+{{User:Horblegorble/Sandbox/Template/LootRowDoubleNestedNoQuantity|itemname=Silken Shoulders|color=orange|rarity=6.67%}}
+{{User:Horblegorble/Sandbox/Template/LootRowDoubleNestedNoQuantity|itemname=Silken Skirt|color=orange|rarity=6.67%}}
+{{User:Horblegorble/Sandbox/Template/LootEndDoubleNested}}
+{{User:Horblegorble/Sandbox/Template/LootEndNested}}
+{{User:Horblegorble/Sandbox/Template/LootRow|itemname=Coconut|quantity=2-4|color=yellow|rarity=10%}}
+{{User:Horblegorble/Sandbox/Template/LootEnd}}
+=== Manual ===
 <table class="wikitable sortable" style="text-align:left;" cellpadding="2" cellspacing="0" width=fit>
   <tr>
-    <th width=55%>Item</th>
+    <th width=52%>Item</th>
-    <th width=20%>Quantity</th>
+    <th width=18%>Quantity</th>
-    <th width=25%>Rarity</th>
+    <th width=30%>Rarity</th>
   </tr>
@@ Line 50: / Line 86: @@
     <td>
       <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Apple.png|32px]]</div>
+        <div style="width=10%; padding-left:0.8em;">[[Image:veloren_Apple.png|32px]]</div>
-        <div style="width=10%; padding-left:0.5em;">[[Apple]]</div>
+        <div style="width=90%; padding-left:0.5em;">[[Apple]]</div>
       </div>
     </td>
     <td style="padding-left:1em;">1</td>
-    <td style="padding-left:0.8em;">60%</td>
+    <td class="rarity-green" style="padding-left:0.8em;">60%</td>
   </tr>
-  <tr>
+<tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
       <tr>
-        <td witdth=55%>
+        <td witdth=52%>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
+            <div style="width=10%;">[[File:Veloren Scale Armor Set.png|32px|link=]]</div>
-            <div style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b></div>
+            <div style="width=90%; padding-left:0.5em;"><b>[[Scale Armor]]</b></div>
           </div>
         </td>
-        <td width=21% style="padding-left:1em;"><b>1</b></td>
+        <td width=19% style="padding-left:1em;"><b>1</b></td>
-        <td width=24% style="padding-left:1em;"><b>20%</b></td>
+        <td width=29% style="padding-left:1em;" class="rarity-yellow"><b>10%</b></td>
       </tr>
       <tr>
         <td colspan=2>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
+            <div style="width=10%;">[[Image:veloren_Scale_Chestpiece.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+            <div style="width=90%; padding-left:0.5em;">[[Scale Chestpiece]]</div>
           </div>
         </td>
-        <td style="padding-left:1em;">3.33%</td>
+        <td style="padding-left:1em;" class="rarity-orange">3.33%</td>
       </tr>
       <tr>
         <td colspan=2>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
+            <div style="width=10%;">[[Image:veloren_Scale_Shoulderguards.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+            <div style="width=90%; padding-left:0.5em;">[[Scale Shoulderguards]]</div>
           </div>
         </td>
-        <td style="padding-left:1em;">3.33%</td>
+        <td style="padding-left:1em;" class="rarity-orange">3.33%</td>
       </tr>
       <tr>
         <td colspan=2>
           <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
+            <div style="width=10%;">[[Image:veloren_Scale_Leggings.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Steel Chausses]]</div>
+            <div style="width=90%; padding-left:0.5em;">[[Scale Leggings]]</div>
           </div>
         </td>
-        <td style="padding-left:1em;">3.33%</td>
+        <td style="padding-left:1em;" class="rarity-orange">3.33%</td>
       </tr>
     </table>
     </td>
   <tr>
   <tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible" data-expandtext="+" data-collapsetext="-" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
-      <tr>
+        <tr>
+          <td colspan=2 width=71% style="padding-left:1em;"><b>Armor</b></td>
-        <td witdth=55%>
-          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+          <td width=29% style="padding-left:1em;" class="rarity-green"><b>40.00%</b></td>
+        </tr>
-            <div style="width=90%;">[[File:Veloren Silken Armor Set.png|32px|link=]]</div>
-            <div style="width=10%; padding-left:0.5em;"><b>[[Silken Armor]]</b></div>
-          </div>
+        <tr>
+          <td colspan=3>
+            <table class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+              <tr>
+                <td witdth=52%>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
+                    <div style="width=90%; padding-left:0.5em;"><b>[[Steel Armor]]</b></div>
+                </td>
+                <td width=20% style="padding-left:1em;"><b>01-01</b></td>
+                <td width=28% style="padding-left:1em;" class="rarity-yellow"><b>20.00%</b></td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Steel Chausses]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td colspan=3>
+            <table class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-"  style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+              <tr>
+                <td witdth=52%>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[File:Veloren Silken Armor Set.png|32px|link=]]</div>
+                    <div style="width=90%; padding-left:0.5em;"><b>[[Silken Armor]]</b></div>
+                  </div>
+                </td>
+                <td width=20% style="padding-left:1em;"><b>1</b></td>
+                <td width=28% style="padding-left:1em;" class="rarity-yellow"><b>20%</b></td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[Image:veloren_Silken_Robe.png|32px]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Silken Robe]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[Image:veloren_Silken_Shoulders.png|32px]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Silken Shoulders]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=10%;">[[Image:veloren_Silken_Skirt.png|32px]]</div>
+                    <div style="width=90%; padding-left:0.5em;">[[Silken Skirt]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
+              </tr>
+            </table>
+            </td>
+          <tr>
         </td>
+      </table>
-        <td width=21% style="padding-left:1em;"><b>1</b></td>
-        <td width=24% style="padding-left:1em;"><b>20%</b></td>
-      </tr>
-      <tr>
-        <td colspan=2>
-          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Silken_Robe.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Silken Robe]]</div>
-          </div>
-        </td>
-        <td style="padding-left:1em;">6.67%</td>
-      </tr>
-      <tr>
-        <td colspan=2>
-          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Silken_Shoulders.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Silken Shoulders]]</div>
-          </div>
-        </td>
-        <td style="padding-left:1em;">6.67%</td>
-      </tr>
-      <tr>
-        <td colspan=2>
-          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-            <div style="width=90%;">[[Image:veloren_Silken_Skirt.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Silken Skirt]]</div>
-          </div>
-        </td>
-        <td style="padding-left:1em;">6.67%</td>
-      </tr>
-    </table>
     </td>
-  <tr>
+  </tr>
   <tr>
     <td>
       <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <div style="width=90%; padding-left:1em;">[[Image:veloren_Coconut.png|32px]]</div>
+        <div style="width=10%; padding-left:1em;">[[Image:veloren_Coconut.png|32px]]</div>
-        <div style="width=10%; padding-left:0.5em;">[[Coconut]]</div>
+        <div style="width=90%; padding-left:0.5em;">[[Coconut]]</div>
       </div>
     </td>
     <td style="padding-left:1em;>2-4</td>
-    <td style="padding-left:0.8em;">10%</td>
+    <td style="padding-left:0.8em;" class="rarity-yellow">10%</td>
   </tr>
@@ Line 160: / Line 251: @@
-=== Minotaur Mockup ===
+=== (Old) Minotaur Mockup ===
 <table class="wikitable sortable" style="text-align:left;" cellpadding="2" cellspacing="0" width=fit>
@@ Line 168: / Line 259: @@
     <th width=25%>Rarity</th>
   </tr>
+  <tr>
+    <td colspan=3>
+      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+        <tr>
+          <td width=55% style="padding-left:1em;">Material</td>
+          <td width=21% style="padding-left:1em;"><b>*</b></td>
+          <td width=24% style="padding-left:1em;"><b>15.4%</b></td>
+        </tr>
-  <tr>
-    <td>
-      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
-        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Carcanet_of_Wrath.png|32px]]</div>
-        <div style="width=10%; padding-left:0.5em;">[[Carcanet of Wrath]]</div>
-      </div>
-    </td>
-    <td style="padding-left:1em;">1</td>
-    <td style="padding-left:0.8em;">3.85%</td>
-  </tr>
   <tr>
     <td>
@@ Line 188: / Line 277: @@
     </td>
     <td style="padding-left:1em;">1-3</td>
-    <td style="padding-left:0.8em;">3.85%</td>
+    <td style="padding-left:1em;">3.85%</td>
   </tr>
@@ Line 199: / Line 288: @@
     </td>
     <td style="padding-left:1em;">3-8</td>
-    <td style="padding-left:0.8em;">3.85%</td>
+    <td style="padding-left:1em;">3.85%</td>
   </tr>
@@ Line 210: / Line 299: @@
     </td>
     <td style="padding-left:1em;">1-3</td>
-    <td style="padding-left:0.8em;">3.85%</td>
+    <td style="padding-left:1em;">3.85%</td>
   </tr>
@@ Line 221: / Line 310: @@
     </td>
     <td style="padding-left:1em;">2-6</td>
+    <td style="padding-left:1em;">3.85%</td>
+  </tr>
+  </table>
+  </tr>
+  <tr>
+    <td>
+      <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+        <div style="width=90%; padding-left:0.8em;">[[Image:veloren_Carcanet_of_Wrath.png|32px]]</div>
+        <div style="width=10%; padding-left:0.5em;">[[Carcanet of Wrath]]</div>
+      </div>
+    </td>
+    <td style="padding-left:1em;">1</td>
     <td style="padding-left:0.8em;">3.85%</td>
   </tr>