Jump to content

User:R0o0di/Sandbox: Difference between revisions

From Detective Conan Wiki
← Older editNewer edit →
R0o0di (talk | contribs)
Administrators
1,346 edits
No edit summary
No edit summary
Line 1: Line 1:
== Template:Char_Appearances & Template:Char ==
= Template:Char_Appearances & Template:Char =
<div class="mw-collapsible mw-collapsed">
 
=== old ===
=== old ===
{{User:R0o0di/Sandbox/Old Char Appearances|
{{User:R0o0di/Sandbox/Old Char Appearances|
Line 25: Line 23:
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}
}}
=== Differneces ===
=== Differneces ===
<h4>difficult to read, too many unnecessary elements, outdated styles</h4>
<div class="mw-collapsible mw-collapsed">
<h4>difficult to read, too many unnecessary elements, outdated css</h4>
<div style="overflow:auto;">
<div style="overflow:auto;">
<pre style="width:max-content">
<pre style="width:max-content">
Line 68: Line 66:




<h4>less complicated structure, better readability, 66% shorter, more modern styles, achieves same results </h4>
<h4>less complicated structure, better readability, 66% shorter, better css, achieves same results </h4>
<div style="overflow:auto;">
<div style="overflow:auto;">
<pre style="width:max-content">
<pre style="width:max-content">
Line 85: Line 83:
</div>
</div>
</div>
</div>
<hr>


== Template:Gadgets_Appearances & Template:Gadget ==
<div class="mw-collapsible mw-collapsed">


= Template:Gadgets_Appearances & Template:Gadget =
=== old ===
=== old ===
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
Line 106: Line 107:
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
}}
}}
=== Differneces ===
<div class="mw-collapsible mw-collapsed">
<h4>difficult to read, too many unnecessary elements, outdated css</h4>
<div style="overflow:auto;">
<pre style="width:max-content">
<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>
</pre>
</div>


<h4>less complicated structure, better readability, 66% shorter, better css, achieves same results </h4>
<div style="overflow:auto;">
<pre style="width:max-content">
<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>
</pre>
</div>
</div>
</div>
<hr>

Revision as of 16:00, 27 March 2025

Template:Char_Appearances & Template:Char

old

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

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>
Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=User:R0o0di/Sandbox&oldid=382288"