Difference between revisions of "User:R0o0di/Sandbox"
From Detective Conan Wiki
| Line 1: | Line 1: | ||
| − | = Template: | + | = Template:Char Appearances & Template:Char = |
=== old === | === old === | ||
{{User:R0o0di/Sandbox/Old Char Appearances| | {{User:R0o0di/Sandbox/Old Char Appearances| | ||
| Line 25: | Line 25: | ||
=== Differneces === | === Differneces === | ||
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
| − | < | + | <strong>difficult to read, too many unnecessary elements, outdated css</strong> |
<div style="overflow:auto;"> | <div style="overflow:auto;"> | ||
<pre style="width:max-content"> | <pre style="width:max-content"> | ||
| Line 66: | Line 66: | ||
| − | < | + | <strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong> |
<div style="overflow:auto;"> | <div style="overflow:auto;"> | ||
<pre style="width:max-content"> | <pre style="width:max-content"> | ||
| Line 89: | Line 89: | ||
| − | = Template: | + | = Template:Gadgets Appearances & Template:Gadget = |
=== old === | === old === | ||
{{User:R0o0di/Sandbox/Old Gadgets Appearances| | {{User:R0o0di/Sandbox/Old Gadgets Appearances| | ||
| Line 109: | Line 109: | ||
=== Differneces === | === Differneces === | ||
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
| − | < | + | <strong>difficult to read, too many unnecessary elements, outdated css</strong> |
<div style="overflow:auto;"> | <div style="overflow:auto;"> | ||
<pre style="width:max-content"> | <pre style="width:max-content"> | ||
| Line 151: | Line 151: | ||
| − | < | + | <strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong> |
<div style="overflow:auto;"> | <div style="overflow:auto;"> | ||
<pre style="width:max-content"> | <pre style="width:max-content"> | ||
Revision as of 16:46, 27 March 2025
Contents
Template:Char Appearances & Template:Char
old
| Characters | ||||||||
|---|---|---|---|---|---|---|---|---|
|
|
new
Differneces
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
Differneces
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>
