Difference between revisions of "User:R0o0di/Sandbox"

From Detective Conan Wiki
(→‎Differneces)
(→‎Template:Css test)
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
== old==
+
=Template:Css test=
−
{{Char Appearances|
+
<span class="test">Hover me</span>
−
{{char|Conan Edogawa}}
+
{{css|
−
{{char|Ran Mouri}}
+
.test:hover {
−
{{char|Kogoro Mouri}}
+
  color: red;
−
{{char|Eri Kisaki|display=Eri Kisaki (background)}}
+
}
−
{{char|Heiji Hattori}}
+
−
{{char|Hiroshi Agasa}}
+
.test::selection {
−
{{char|Ai Haibara}}
+
  color: green;
−
{{char|Kazuha Toyama|display=Kazuha Toyama (background)}}
+
}
 
}}
 
}}
  
−
== new ==
+
=tabs tttt=
 +
<tabs>
 +
<tab title="title1">tab1</tab>
 +
<tab title="title2">tab2</tab>
 +
</tabs>
 +
 
 +
= JS test =
 +
<div class="blue">1</div>
 +
<div class="blue">2</div>
 +
 
 +
= Template:Char Appearances & Template:Char =
 +
=== old ===
 +
{{User:R0o0di/Sandbox/Old Char Appearances|
 +
{{User:R0o0di/Sandbox/Old Char|Conan Edogawa}}
 +
{{User:R0o0di/Sandbox/Old Char|Ran Mouri}}
 +
{{User:R0o0di/Sandbox/Old Char|Kogoro Mouri}}
 +
{{User:R0o0di/Sandbox/Old Char|Eri Kisaki|display=Eri Kisaki (background)}}
 +
{{User:R0o0di/Sandbox/Old Char|Heiji Hattori}}
 +
{{User:R0o0di/Sandbox/Old Char|Hiroshi Agasa}}
 +
{{User:R0o0di/Sandbox/Old Char|Ai Haibara}}
 +
{{User:R0o0di/Sandbox/Old Char|Kazuha Toyama|display=Kazuha Toyama (background)}}
 +
}}
 +
 
 +
=== new ===
 
{{User:R0o0di/Sandbox/CharAppearances2|
 
{{User:R0o0di/Sandbox/CharAppearances2|
 
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
 
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
Line 22: Line 45:
 
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
 
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
 
}}
 
}}
−
 
+
=== Differences ===
−
== Differneces ==
+
<div class="mw-collapsible mw-collapsed">
−
<h4>difficult to read, too many unnecessary elements, outdated styles</h4>
+
<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 65: Line 88:
  
  
−
<h4>less complicated structure, better readability, 66% shorter, more modern styles, achieves same results </h4>
+
<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 81: Line 104:
 
</pre>
 
</pre>
 
</div>
 
</div>
 +
 +
</div>
 +
<hr>
 +
 +
 +
 +
 +
 +
= Template:Gadgets Appearances & Template:Gadget =
 +
=== old ===
 +
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
 +
{{User:R0o0di/Sandbox/Old Gadget|Voice-Changing Bowtie}}
 +
{{User:R0o0di/Sandbox/Old Gadget|Power-Enhancing Kick Shoes}}
 +
{{User:R0o0di/Sandbox/Old Gadget|Stun-Gun Wristwatch}}
 +
{{User:R0o0di/Sandbox/Old Gadget|Detective Boys Badge}}
 +
{{User:R0o0di/Sandbox/Old Gadget|Turbo Engine Skateboard}}
 +
}}
 +
 +
=== new ===
 +
{{User:R0o0di/Sandbox/New Gadgets Appearances|
 +
{{User:R0o0di/Sandbox/New Gadget|Voice-Changing Bowtie}}
 +
{{User:R0o0di/Sandbox/New Gadget|Power-Enhancing Kick Shoes}}
 +
{{User:R0o0di/Sandbox/New Gadget|Stun-Gun Wristwatch}}
 +
{{User:R0o0di/Sandbox/New Gadget|Detective Boys Badge}}
 +
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
 +
}}
 +
=== Differences ===
 +
<div class="mw-collapsible mw-collapsed">
 +
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
 +
<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>
 +
 +
 +
<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
 +
<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>
 +
<hr>
 +
 +
 +
 +
 +
= Template:InfoBox Crime =
 +
=== old ===
 +
{{User:R0o0di/Sandbox/Old InfoBox Crime
 +
| crime              = Attempted Murder
 +
| image              = EP174b Case.jpg
 +
| location            = Front of the ship
 +
| victim              = [[Heiji Hattori]]
 +
| cause-death        = Thrown overboard
 +
| cause-death-label  = Attack types
 +
| suspects            = Unknown
 +
| description        = Heiji was pushed off the boat and into the ocean.
 +
| footnotes          = this is a footnote
 +
}}
 +
 +
=== new ===
 +
{{User:R0o0di/Sandbox/New InfoBox Crime
 +
| crime              = Attempted Murder
 +
| image              = EP174b Case.jpg
 +
| location            = Front of the ship
 +
| victim              = [[Heiji Hattori]]
 +
| cause-death        = Thrown overboard
 +
| cause-death-label  = Attack types
 +
| suspects            = Unknown
 +
| description        = Heiji was pushed off the boat and into the ocean.
 +
| 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>
 +
 +
 +
 +
 +
= Template:InfoBox Heist =
 +
=== old ===
 +
{{User:R0o0di/Sandbox/Old InfoBox Heist
 +
| heist              = Heist 
 +
| image              = MK16 Heist1.jpg
 +
| thief              = [[Kaitou Kid]]
 +
| thief-label        = Thief
 +
| target              = Blue Wonder
 +
| owner              = [[Jirokichi Suzuki]]
 +
| location            = Suzuki Museum
 +
| date                = October 12
 +
| 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.
 +
| description        = Golden sculpture holding the blue jewel.
 +
}}
 +
 +
=== new ===
 +
{{User:R0o0di/Sandbox/New InfoBox Heist
 +
| heist              = Heist 
 +
| image              = MK16 Heist1.jpg
 +
| thief              = [[Kaitou Kid]]
 +
| thief-label        = Thief
 +
| target              = Blue Wonder
 +
| owner              = [[Jirokichi Suzuki]]
 +
| location            = Suzuki Museum
 +
| date                = October 12
 +
| 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.
 +
| description        = Golden sculpture holding the blue jewel.
 +
}}
 +
=== Differences ===
 +
blabla you alr know the drill same as previous ones

Latest revision as of 12:58, 1 June 2025

Template:Css test

Hover me Template:Css

tabs tttt

JS test

1
2

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>



Template:InfoBox Heist

old

Heist

MK16 Heist1.jpg

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.

new

Heist
MK16 Heist1.jpg
Target:Blue Wonder
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

Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=User:R0o0di/Sandbox&oldid=386883"