User:R0o0di/Sandbox
From Detective Conan Wiki
Contents
Template:Css test
Hover me Template:Css
tabs tttt
JS test
1
2
Template:Char Appearances & Template:Char
old
| Characters | ||||||||
|---|---|---|---|---|---|---|---|---|
|
|
new
Differences
difficult to read, too many unnecessary elements, outdated css
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
less complicated structure, better readability, 66% shorter, better css, achieves same results
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
Template:Gadgets Appearances & Template:Gadget
old
| Gadgets | |||||
|---|---|---|---|---|---|
|
|
new
Differences
difficult to read, too many unnecessary elements, outdated css
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="gadget-appearances-table" style="border: 1px dotted #FF9900;">
<tbody>
<tr>
<th style="background: #FF9900; color: #ffffff; text-align: left; padding-left: 5px;">Gadgets</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="gadget-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a>
<div class="thumbcaption">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
less complicated structure, better readability, 66% shorter, better css, achieves same results
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #FF9900; width: max-content;">
<div style="background: #FF9900; color: #ffffff; padding-left: 5px; font-weight:bold;">Gadgets</div>
<div syle="display:flex; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a><br>
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>
</div>
</div>
</div>
Template:InfoBox Crime
old
| Attempted Murder | |||||||||||||
|
|
| ||||||||||||
new
Attempted Murder
Location: Front of the ship
Victim: Heiji Hattori
Attack types: Thrown overboard
Suspects: Unknown
Heiji was pushed off the boat and into the ocean.
this is a footnote
Differences
too many unnecessary elements, outdated css
<div style="overflow:auto">
<table class="infobox" style="width: 650px; text-align: left; font-size: 90%; float: none; clear: left; margin-left: 0; margin-right: 1em;" cellpadding="2">
<tbody>
<tr>
<td colspan="2" style="color: #ffffff; text-align:center; vertical-align:middle; font-size: small; background-color: #DF5829; ">
<b>Attempted Murder</b>
</td>
</tr>
<tr>
<td width="290" class="nospacing" style="text-align:center; vertical-align:top; padding: 2px 0px 0px 0px;">
<p>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</p>
</td>
<td style="padding: 0px;">
<table class="infobox crime" width="100%" style="border: 0px; margin: 0px; padding: 0px 0px 0px 2px; font-size: 100%; border-collapse: separate; border-spacing: 1px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th width="102" style="border-bottom: 1px dotted #cccccc;">Location: </th>
<td style="border-bottom: 1px dotted #cccccc;">Front of the ship</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
less complicated structure, better readability, 30% shorter, better css, achieves same results
<div style="background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 5px; max-width: 550px;">
<div style="background: #DF5829; color: white; text-align: center; font-weight: bold; padding: 5px;">
Attempted Murder
</div>
<div style="overflow: auto; font-size: 90%;">
<div style="width: 550px; display: flex;">
<div>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</div>
<div style="padding-left: 5px; width: 100%;">
<div style="padding: 3px 0; border-top: 1px dotted;">
<span style="width: 90px; display: inline-block;">
<strong>Location:</strong>
</span>
<span>Front of the ship</span>
</div>
</div>
</div>
</div>
</div>
Template:InfoBox Heist
old
| Heist | |||||||||||||||
|
|
| ||||||||||||||
new
Heist
Thief:Kaitou Kid
Target:Blue Wonder
Owner:Jirokichi Suzuki
Location:Suzuki Museum
Date:October 12
Advanced Notice:It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
Golden sculpture holding the blue jewel.
Differences
blabla you alr know the drill same as previous ones
