Difference between revisions of "User:R0o0di/Sandbox"

From Detective Conan Wiki
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"