ColorCodes: swatches are links to color picker, alignment

master
Matthew Ramina 2015-03-11 20:23:16 -04:00
parent 04ed31bec2
commit 70e94aa7d7
2 changed files with 11 additions and 5 deletions

View File

@ -88,13 +88,15 @@ sub create_output {
. "Complementary: #$complementary\n"
. "Analogous: ".(join ", ", map { "#".uc $_ } @analogous_colors);
my $comps = "<div class='cols_column'><span class='mini-color circle' style='background: #".$complementary.";'> </span></div>"
my $comps = "<div class='cols_column'>"
. "<a href='/?q=color%20picker%20%23$complementary' class='mini-color circle' style='background: #$complementary'>"
. "</a></div>"
. "<div class='desc_column'><p class='no_vspace'>Complementary #:</p><p class='no_vspace'>"
. qq[<a onclick='document.x.q.value="#$complementary";document.x.q.focus();' href='javascript:' class='tx-clr--lt'>$complementary</a>]
. "</p></div>";
my $analogs = "<div class='cols_column'>"
. (join "", map { "<span class='mini-color circle' style='background: #" . $_ . "'> </span>"; } @analogous_colors)
. (join "", map { "<a href='/?q=color%20picker%20%23".$_."' class='mini-color circle' style='background: #" . $_ . "'> </a>"; } @analogous_colors)
. "</div>"
. "<div class='desc_column'><p class='no_vspace'>Analogous #:</p><p class='no_vspace'>" . (join ", ", map { qq[<a onclick='document.x.q.value="#] .(uc $_). qq[";document.x.q.focus();' href='javascript:' class='tx-clr--lt'>].(uc $_).'</a>' } @analogous_colors) . "</p></div>";
@ -181,9 +183,11 @@ handle matches => sub {
my ($text, $html_text) = create_output(%outdata);
return $text,
html => '<div class="zci--color-codes"><div class="colorcodesbox circle" style="background:#' . $hex_code . '"></div>'
. $html_text
. "</div>";
html => '<div class="zci--color-codes"><a href="/?q=color%20picker%20%23' . $hex_code . '" '
. 'class="colorcodesbox circle" style="background:#' . $hex_code . '">'
. '</a>'
. $html_text
. "</div>";
};
1;

View File

@ -6,6 +6,7 @@
margin-top: 4px;
margin-left: 0px;
float: left;
display: inline-block;
}
.zci--answer .zci--color-codes .circle {
@ -18,6 +19,7 @@
width: 32px;
height: 32px;
border: 1px solid rgba(0,0,0,0.15);
vertical-align: bottom;
}
.zci--answer .zci--color-codes p.no_vspace {