Difference between revisions of "User:R0o0di/Sandbox"

From Detective Conan Wiki
Line 82: Line 82:
 
</pre>
 
</pre>
 
</div>
 
</div>
 +
 
</div>
 
</div>
 
<hr>
 
<hr>
Line 170: Line 171:
 
</pre>
 
</pre>
 
</div>
 
</div>
 +
 
</div>
 
</div>
 
<hr>
 
<hr>
Line 202: Line 204:
 
| footnotes          = this is a footnote
 
| footnotes          = this is a footnote
 
}}
 
}}
 +
=== Differences ===
 +
<div class="mw-collapsible mw-collapsed">
 +
<strong>too many unnecessary elements, outdated css</strong>
 +
<div style="overflow:auto;">
 +
<pre style="width:max-content">
 +
<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>
 +
</pre>
 +
</div>
 +
 +
 +
<strong>less complicated structure, better readability, 30% shorter, better css, achieves same results </strong>
 +
<div style="overflow:auto;">
 +
<pre style="width:max-content">
 +
<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>
 +
</pre>
 +
</div>
 +
 +
</div>
 +
<hr>

Revision as of 13:42, 2 April 2025

Template:Char Appearances & Template:Char

old

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

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

EP174b Case.jpg

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

new

Attempted Murder
EP174b Case.jpg
Location: Front of the ship
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>
Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=User:R0o0di/Sandbox&oldid=382721"