Vote 35 display signatures

app/assets/javascripts/navigation.js

@@ -6,6 +6,20 @@ $(document).ready(function() {
   });
 
   $('.tooltipster').tooltipster({
-    trigger: 'click'
+    trigger: 'click',
+    functionInit: function(instance, helper){
+
+        var $origin = $(helper.origin),
+            dataOptions = $origin.attr('data-tooltipster');
+
+        if(dataOptions){
+
+            dataOptions = JSON.parse(dataOptions);
+
+            $.each(dataOptions, function(name, option){
+                instance.option(name, option);
+            });
+        }
+    }
   });
 });

app/assets/stylesheets/built.css.scss

@@ -1659,7 +1659,7 @@ Styleguide 2.5
 */
 .card {
   position: relative;
-  box-shadow: 0 0 10px #ccc;
+  box-shadow: 0 0 7px #ccc;
   /* Types */ }
   .card.text-center {
     text-align: center; }
@@ -2517,6 +2517,10 @@ table {
       font-size: 0.8em; }
       table tbody td p + p {
         margin-top: 10px; }
+    table tbody td a {
+      text-decoration: none; }
+      table tbody td a:hover {
+        text-decoration: underline; }
   table.borderless tbody td {
     border: none; }
 
@@ -2533,6 +2537,7 @@ markup:
 Styleguide 2.14
 */
 .bitcoin-address {
+  display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4639,6 +4644,22 @@ Styleguide 3.4
 .tooltip_templates {
   display: none; }
 
+.actions-on-hover .bitcoin-address {
+  vertical-align: middle; }
+
+.actions-on-hover .actions {
+  display: inline-block;
+  margin-left: 5px;
+  vertical-align: middle;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+  -moz-transition: opacity 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: opacity 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+  color: #AAA; }
+
+.actions-on-hover:hover .actions {
+  opacity: 1; }
+
 /*
 Basic Components
 

app/models/bitcoin_address.rb

@@ -26,4 +26,8 @@ def update_balance
     end
   end
 
+  def to_s
+    bitcoin_address
+  end
+
 end

app/models/signature.rb

@@ -33,7 +33,11 @@ def create_bitcoin_address_if_needed
           self.bitcoin_address_id = btc_addr.id
         end
       end
-    end    
+    end
+  end
+
+  def to_s
+    signature
   end
 
 end

app/views/arguments/_signatures.html.slim

@@ -0,0 +1,15 @@
+.card.text-center
+  h3 #{btc_human(bitcoin_value)} #{percent_human(percentage)} #{word}
+  .content
+    .section
+      .table-container
+        table class="table borderless"
+          - signatures.each do |s|
+            tr.actions-on-hover
+              td
+                p.bitcoin-address= link_to s.bitcoin_address, address_path(s.bitcoin_address)
+              td
+                p= btc_human(s.bitcoin_address.balance)
+              td
+                span.actions
+                  span.icon.icon-info-circled.tooltipster title="Signature: #{s}" data-tooltipster='{"interactive":true}'

app/views/arguments/show.html.slim

@@ -29,11 +29,11 @@
                       =button_tag "Submit", class:"button"
                     .section
                       .alert.transparent
-                        | Warning: 
+                        | Warning:
                         a href="https://www.reddit.com/r/btc/comments/4mhjh3/psa_bitcoinocracycom_signatures_expose_your/" rel="nofollow" target="_blank" Bitcoin signatures expose your public keys
-                        |  (that shouldn't be a problem until 
+                        |  (that shouldn't be a problem until
                         a href="https://en.wikipedia.org/wiki/Elliptic_Curve_Digital_Signature_Algorithm" rel="nofollow" target="_blank" ECDSA
-                        |  is broken). Moreover address reuse with a faulty random number generator 
+                        |  is broken). Moreover address reuse with a faulty random number generator
                         a href="http://www.nilsschneider.net/2013/01/28/recovering-bitcoin-private-keys.html" rel="nofollow" target="_blank" may leak your private keys
                         |.
                       =hidden_field("signature", "negation", {value: @is_doubt, autocomplete: false})
@@ -60,7 +60,7 @@
             - if @argument.pros_sum > 0 && @argument.cons_sum > 0 && @argument.pros_sum == @argument.cons_sum
               h3 This proposition is currently tied.
               p Vote now by signing with your bitcoin signature above.
-            
+
             .button-group.center
               a.button href="https://forum.bitcoin.com/bitcoin-discussion/" Discuss this proposition
           .section
@@ -76,39 +76,26 @@
           / .argument-score
           /   .bar.positive style="flex-basis: #{percent_human(@argument.pros_share)};"= percent_human(@argument.pros_share)
           /   .bar.negative style="flex-basis: #{percent_human(@argument.cons_share)};"= percent_human(@argument.cons_share)
-    
+
     - if @argument.pros_sum > 0 && @argument.cons_sum > 0
       .section
         .card-group.horizontal
-          .card.text-center
-            h3 #{btc_human(@argument.pros_sum)} #{percent_human(@argument.pros_share)} Believe
-            .content
-              .section
-                .table-container
-                  - [@argument.pros].each_with_index do |addresses, i|
-                    table class="table borderless #{i==0 ? 'bg-success' : 'bg-danger'}"
-                      - addresses.each do |address|
-                        tr
-                          td
-                            p.bitcoin-address= link_to address.bitcoin_address, address_path(address.bitcoin_address)
-                          td
-                            p= btc_human address.balance
-          .card.text-center
-            h3 #{btc_human(@argument.cons_sum)} #{percent_human(@argument.cons_share)} Doubt
-            .content
-              .section
-                .table-container
-                  - [@argument.cons].each_with_index do |addresses, i|
-                    table class="table borderless #{i==0 ? 'bg-success' : 'bg-danger'}"
-                      - addresses.each do |address|
-                        tr
-                          td
-                            p.bitcoin-address= link_to address.bitcoin_address, address_path(address.bitcoin_address)
-                          td
-                            p= btc_human address.balance
+          = render partial: 'signatures', locals: { \
+              signatures: @argument.pro_signatures, \
+              bitcoin_value: @argument.pros_sum,    \
+              percentage: @argument.pros_share,     \
+              word: "Believe" }
+
+          = render partial: 'signatures', locals: { \
+              signatures: @argument.con_signatures, \
+              bitcoin_value: @argument.cons_sum,    \
+              percentage: @argument.cons_share,     \
+              word: "Doubt" }
 
         div#signature_status style='display:none'
 
+        small =link_to "All signatures as JSON", argument_path(@argument, :json)
+
     input type='hidden' name='pro_statement' id='pro_statement' value=@argument.pro_statement
     input type='hidden' name='con_statement' id='con_statement' value=@argument.con_statement
 

styleguide/components/_bitcoin_address.scss

@@ -8,6 +8,7 @@ Styleguide 2.14
 */
 
 .bitcoin-address {
+  display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

styleguide/components/_card.scss

@@ -21,7 +21,7 @@ Styleguide 2.5
 */
 .card {
   position: relative;
-  box-shadow: 0 0 10px #ccc;
+  box-shadow: 0 0 7px #ccc;
 
   &.text-center {
     text-align: center;

styleguide/components/_helpers.scss

@@ -5,3 +5,24 @@
 .tooltip_templates {
   display: none;
 }
+
+.actions-on-hover {
+  .bitcoin-address {
+    vertical-align: middle;
+  }
+
+  .actions {
+    display: inline-block;
+    margin-left: 5px;
+    vertical-align: middle;
+    opacity: 0;
+    transition: opacity 0.2s $easing;
+    color: #AAA;
+  }
+
+  &:hover {
+    .actions {
+      opacity: 1;
+    }
+  }
+}

styleguide/components/_table.scss

@@ -56,6 +56,14 @@ table {
           margin-top: 10px;
         }
       }
+
+      a {
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
   }