duckduckgo
/
zeroclickinfo-goodies
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ColorCodes: Layout fixes and tweaks

master
Rob Emery 2015-01-09 20:40:11 +00:00
parent 247b661680
commit 292e463f69
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/DDG/Goodie/ColorCodes.pm
View File

@ -95,9 +95,9 @@ sub create_output {
$html = "<div class='col1'>"
. "<p class='hex zci__caption'>$hex</p><p class='no_vspace'>$rgb</p><p class='no_vspace'>$hsl</p><p class='no_vspace'>$cmyb</p>"
. "<p ><a href='http://labs.tineye.com/multicolr#colors=" . $hex . ";weights=100;'>Images</a>"
. "<p ><a href='http://labs.tineye.com/multicolr#colors=" . $hex . ";weights=100;' class='tx-clr--lt'>Images</a>"
. " | "
. "<a href='http://www.color-hex.com/color/" . $hex . "' title='Tints, information and similar colors on color-hex.com'>Info</a></p>"
. "<a href='http://www.color-hex.com/color/" . $hex . "' title='Tints, information and similar colors on color-hex.com' class='tx-clr--lt'>Info</a></p>"
. "</div>"
. "<div class='col2'>"
. "<div>$comps</div>"

5
share/goodie/color_codes/color_codes.css
View File

@ -22,14 +22,15 @@
padding: 0;
}
.zci--answer .zci--color-codes .col1,
.zci--answer .zci--color-codes .col2
.zci--answer .zci--color-codes .col1
{
display: inline-block;
height: 125px;
}
.zci--answer .zci--color-codes .col2 {
display: inline-block;
height: 90px;
width: 16em;
margin-left: 2em;
}

2
t/ColorCodes.t
View File

@ -49,7 +49,7 @@ ddg_goodie_test(
# Single full HTML check.
'red html code' => test_zci(
'Hex: #FF0000 ~ rgba(255, 0, 0, 1) ~ rgb(100%, 0%, 0%) ~ hsl(0, 100%, 50%) ~ cmyb(0%, 100%, 100%, 0%)'."\n".'Complementary: #00FFFF'."\n".'Analogous: #FF8000, #FFFF00',
html => qq(<div class="zci--color-codes"><div class="colorcodesbox circle" style="background:#ff0000"></div><div class='col1'><p class='hex zci__caption'>Hex: #FF0000</p><p class='no_vspace'>rgba(255, 0, 0, 1)</p><p class='no_vspace'>hsl(0, 100%, 50%)</p><p class='no_vspace'>cmyb(0%, 100%, 100%, 0%)</p><p ><a href='http://labs.tineye.com/multicolr#colors=Hex: #FF0000;weights=100;'>Images</a> | <a href='http://www.color-hex.com/color/Hex: #FF0000' title='Tints, information and similar colors on color-hex.com'>Info</a></p></div><div class='col2'><div><div class='cols_column'><span class='mini-color circle' style='background: #00ffff;'> </span></div><div class='desc_column'><p class='no_vspace'>Complementary #:</p><p class='no_vspace text--primary'>00FFFF</p></div></div><div><div class='cols_column'><span class='mini-color circle' style='background: #ff8000'> </span><span class='mini-color circle' style='background: #ffff00'> </span></div><div class='desc_column'><p class='no_vspace'>Analogous #:</p><p class='no_vspace text--primary'>FF8000, FFFF00</p></div></div></div></div>)
html => qq(<div class="zci--color-codes"><div class="colorcodesbox circle" style="background:#ff0000"></div><div class='col1'><p class='hex zci__caption'>Hex: #FF0000</p><p class='no_vspace'>rgba(255, 0, 0, 1)</p><p class='no_vspace'>hsl(0, 100%, 50%)</p><p class='no_vspace'>cmyb(0%, 100%, 100%, 0%)</p><p ><a href='http://labs.tineye.com/multicolr#colors=Hex: #FF0000;weights=100;' class='tx-clr--lt'>Images</a> | <a href='http://www.color-hex.com/color/Hex: #FF0000' title='Tints, information and similar colors on color-hex.com' class='tx-clr--lt'>Info</a></p></div><div class='col2'><div><div class='cols_column'><span class='mini-color circle' style='background: #00ffff;'> </span></div><div class='desc_column'><p class='no_vspace'>Complementary #:</p><p class='no_vspace text--primary'>00FFFF</p></div></div><div><div class='cols_column'><span class='mini-color circle' style='background: #ff8000'> </span><span class='mini-color circle' style='background: #ffff00'> </span></div><div class='desc_column'><p class='no_vspace'>Analogous #:</p><p class='no_vspace text--primary'>FF8000, FFFF00</p></div></div></div></div>)
),
'rgba(99,60,176,0.5)' => test_zci(
'Hex: #633CB0 ~ rgba(99, 60, 176, 0.5) ~ rgb(39%, 24%, 69%) ~ hsl(260, 49%, 46%) ~ cmyb(44%, 66%, 0%, 31%)'."\n".'Complementary: #89B03C'."\n".'Analogous: #9D3CB0, #B03C89',