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

ResistorColors: move from inline CSS.

master
Matt Miller 2014-09-09 18:07:48 -04:00
parent 4a24d5165b
commit e18062e177
3 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/DDG/Goodie/ResistorColors.pm
View File

@ -129,7 +129,7 @@ sub render {
my $formatted_value = format_value($value);
my $ohms = $formatted_value eq '1' ? 'ohm' : 'ohms';
my $text = "$formatted_value\x{2126} ($ohms) resistor colors:";
my $html = "<span style='margin-right:4px;'>"
my $html = "<div class='zci--resistor-colors'><span class='resistor'>"
. "$formatted_value&#x2126; ($ohms) resistor colors:</span>";
#while (my ($index, $digit) = each @$digits) {
@ -139,9 +139,7 @@ sub render {
my $name = $digits_to_colors{$digit}{name};
my $hex = $digits_to_colors{$digit}{hex};
my $label = $digits_to_colors{$digit}{label};
my $style = "display:inline-block;background-color:$hex;color:$label;"
. "border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;"
. "border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;";
my $style = "background-color:$hex;color:$label;";
my ($text_prefix, $html_prefix, $display_digit);
if ($index == scalar(@$digits) - 2) {
# multiplier digit
@ -163,15 +161,15 @@ sub render {
if ($index != scalar(@$digits - 1)) {
$text .= ','; # Comma delimit all but last
}
$html .= " <span style='$style'>$name ($html_prefix$display_digit)</span>";
$html .= " <span class='colors' style='$style'>$name ($html_prefix$display_digit)</span>";
} else {
return;
}
$index++;
}
$html .= "<br/>"
. "<a href='http://resisto.rs/#$formatted_value' style='font-size:92.8%'>"
. "More at resisto.rs</a>";
. "<a href='http://resisto.rs/#$formatted_value' class='link'>"
. "More at resisto.rs</a></div>";
return $text, html => $html;
};

15
share/goodie/resistor_colors/resistor_colors.css Normal file
View File

@ -0,0 +1,15 @@
.zci--answer .zci--resistor-colors .resistor {
margin-right: 4px;
}
.zci--answer .zci--resistor-colors .colors {
display: inline-block;
border: 1px solid #c8c8c8;
margin-top: -1px;
padding: 0px 5px 3px;
border-radius: 4px;
}
.zci--answer .zci--resistor-colors .link {
font-size: 92.8%;
}

22
t/ResistorColors.t
View File

@ -80,29 +80,9 @@ ddg_goodie_test(
"ohm ma darling" => undef,
# Check the HTML. Just once.
"1.5m ohm" => test_zci("1.5M\x{2126} (ohms) resistor colors: brown (1), green (5), green (\x{00D7}100K), gold (\x{00B1}5%)", html =>
"<span style='margin-right:4px;'>1.5M&#x2126; (ohms) resistor colors:</span> "
. "<span style='display:inline-block;background-color:#964b00;"
. "color:#fff;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;"
. "-webkit-border-radius:4px;-moz-border-radius:4px;'>brown (1)</span> "
. "<span style='display:inline-block;background-color:#9acd32;"
. "color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;"
. "-webkit-border-radius:4px;-moz-border-radius:4px;'>green (5)</span> "
. "<span style='display:inline-block;background-color:#9acd32;"
. "color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;"
. "-webkit-border-radius:4px;-moz-border-radius:4px;'>green (&times;100K)</span> "
. "<span style='display:inline-block;background-color:#cfb53b;"
. "color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;"
. "-webkit-border-radius:4px;-moz-border-radius:4px;'>gold (&plusmn;5%)</span>"
. "<br/><a href='http://resisto.rs/#1.5M' style='font-size:92.8%'>More at resisto.rs</a>"),
"4.7k ohm" => test_zci(
"4.7K\x{2126} (ohms) resistor colors: yellow (4), purple (7), red (\x{00D7}100), gold (\x{00B1}5%)",
html => "<span style='margin-right:4px;'>4.7K&#x2126; (ohms) resistor colors:</span> <span style='display:inline-block;background-color:#ffff00;color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>yellow (4)</span> <span style='display:inline-block;background-color:#ee82ee;color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>purple (7)</span> <span style='display:inline-block;background-color:#ff0000;color:#fff;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>red (&times;100)</span> <span style='display:inline-block;background-color:#cfb53b;color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>gold (&plusmn;5%)</span><br/><a href='http://resisto.rs/#4.7K' style='font-size:92.8%'>More at resisto.rs</a>"
),
"1\x{2126}" => test_zci(
"1\x{2126} (ohm) resistor colors: brown (1), black (0), gold (\x{00D7}0.1), gold (\x{00B1}5%)",
html => "<span style='margin-right:4px;'>1&#x2126; (ohm) resistor colors:</span> <span style='display:inline-block;background-color:#964b00;color:#fff;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>brown (1)</span> <span style='display:inline-block;background-color:#000000;color:#fff;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>black (0)</span> <span style='display:inline-block;background-color:#cfb53b;color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>gold (&times;0.1)</span> <span style='display:inline-block;background-color:#cfb53b;color:#000;border:1px solid #c8c8c8;margin-top:-1px;padding:0px 5px 3px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;'>gold (&plusmn;5%)</span><br/><a href='http://resisto.rs/#1' style='font-size:92.8%'>More at resisto.rs</a>"
html => "<div class='zci--resistor-colors'><span class='resistor'>4.7K&#x2126; (ohms) resistor colors:</span> <span class='colors' style='background-color:#ffff00;color:#000;'>yellow (4)</span> <span class='colors' style='background-color:#ee82ee;color:#000;'>purple (7)</span> <span class='colors' style='background-color:#ff0000;color:#fff;'>red (&times;100)</span> <span class='colors' style='background-color:#cfb53b;color:#000;'>gold (&plusmn;5%)</span><br/><a href='http://resisto.rs/#4.7K' class='link'>More at resisto.rs</a></div>"
),
);