rails_tipjar 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a942f0f33f3ae7a78eda233a1dff1ce1a883a144ac1cad2a31e9849f212b708
-  data.tar.gz: f00214075a3e9008ddc7aa9b85d46caca6a6792ebbc185407c5dae07ccc114f8
+  metadata.gz: eb45f6dbcb30df4e79a71f533760d0fa1c5d2a904c0065ae774c675998d19585
+  data.tar.gz: c0f1ea549ffb2fb0fbd3f48b36e81621697de38af2e622aa57eaec01d0c61cca
 SHA512:
-  metadata.gz: 7a437aedf1dd798d8bb7e76d364236f19c80b1ee3295c72df64477cbaa1ed1f4e51f494a32e5a53da8fa86fd42a7376dc7c53110e916fcd24020f9d6c6739819
-  data.tar.gz: 38d10e40392878cf99f43ed646a41401630f97340b97145b02b49ce9a48d8b49a716d5c4c2cb4bf1d59d873614cf5f404e4740d894cbb32045ac402d05f7de86
+  metadata.gz: 6bd013f51e770763b1b6305ee094e42e90359d17306b03a78497996efe34cec2cc5c1c2cf3c12ad4b7f4ab5992cd7fad73f88c9e2f428ad82baf6f8d0434c278
+  data.tar.gz: b60050b28b9686dd14e0dba7323cec9eed49b709288a59d6a6f3ffb5b3f6a9827d4a8f818db65958711cf7c2bd11cfdb291af85652854c8304a741a68473c03f

data/app/assets/stylesheets/tipjar.css

@@ -2,8 +2,9 @@
 .tipjar-button {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem;
   background-color: #3b82f6;
   color: white;
   border-radius: 9999px;
@@ -14,12 +15,15 @@
   font-size: 0.875rem;
   font-weight: 500;
   animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  min-width: 3rem;
+  min-height: 3rem;
 }
 
 .tipjar-button:hover {
   background-color: #2563eb;
   transform: scale(1.05);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  padding: 0.75rem 1rem;
 }
 
 .tipjar-button:focus {
@@ -172,8 +176,14 @@
 /* Responsive Design */
 @media (max-width: 640px) {
   .tipjar-button {
-    padding: 0.625rem 0.875rem;
+    padding: 0.625rem;
     font-size: 0.75rem;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+  }
+  
+  .tipjar-button:hover {
+    padding: 0.625rem 0.875rem;
   }
   
   .tipjar-button-icon {

data/app/helpers/tipjar_helper.rb

@@ -6,20 +6,32 @@ module TipjarHelper
     custom_class = options[:class] || config.button_class
     z_index = options[:z_index] || config.z_index
     
+    # Inject CSS styles into the page once
+    tipjar_styles + tipjar_button_html(config, position, custom_class, z_index)
+  end
+  
+  private
+  
+  def tipjar_button_html(config, position, custom_class, z_index)
     # Simple direct link mode when payment_link is set
     if config.payment_link && !config.use_modal
+      position_style = position_inline_styles(position)
+      button_style = "#{position_style} z-index: #{z_index}; display: flex; align-items: center; padding: 0.75rem 1rem; background-color: #3b82f6; color: white; border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: none; font-size: 0.875rem; font-weight: 500; text-decoration: none; animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
+      
       link_to config.payment_link,
               target: "_blank",
               rel: "noopener",
-              class: "tipjar-button #{config_position_classes(position)} #{custom_class}",
-              style: "z-index: #{z_index};" do
-        content_tag(:span, class: "tipjar-button-icon") do
+              class: "tipjar-button #{custom_class}",
+              style: button_style,
+              onmouseover: "this.style.backgroundColor='#2563eb'; this.style.transform='scale(1.05)'; this.querySelector('.tipjar-button-text').style.maxWidth='200px'; this.querySelector('.tipjar-button-text').style.marginLeft='0.5rem';",
+              onmouseout: "this.style.backgroundColor='#3b82f6'; this.style.transform='scale(1)'; this.querySelector('.tipjar-button-text').style.maxWidth='0'; this.querySelector('.tipjar-button-text').style.marginLeft='0';" do
+        content_tag(:span, style: "display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;") do
           raw config.icon_svg
         end +
-        content_tag(:span, config.button_text, class: "tipjar-button-text")
+        content_tag(:span, config.button_text, class: "tipjar-button-text", style: "white-space: nowrap; max-width: 0; overflow: hidden; transition: all 0.3s ease; margin-left: 0;")
       end
     else
-      # Original modal mode
+      # Original modal mode - would need more work to be fully inline
       content_tag :div, 
                   class: "tipjar-container",
                   data: { 
@@ -41,6 +53,58 @@ module TipjarHelper
     end
   end
   
+  def tipjar_styles
+    return "" if @tipjar_styles_injected
+    @tipjar_styles_injected = true
+    
+    content_tag :style do
+      <<~CSS.html_safe
+        @keyframes tipjar-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.8; }
+        }
+        
+        @keyframes tipjar-coin-drop {
+          0% {
+            transform: translateY(0) rotate(0deg);
+            opacity: 0;
+          }
+          20% {
+            opacity: 1;
+          }
+          80% {
+            transform: translateY(7px) rotate(180deg);
+            opacity: 1;
+          }
+          100% {
+            transform: translateY(9px) rotate(180deg);
+            opacity: 0;
+          }
+        }
+        
+        .tipjar-coin-animation {
+          animation: tipjar-coin-drop 2s ease-in-out infinite;
+          transform-origin: center;
+        }
+      CSS
+    end
+  end
+  
+  def position_inline_styles(position)
+    case position
+    when :bottom_right
+      "position: fixed; bottom: 1rem; right: 1rem;"
+    when :bottom_left
+      "position: fixed; bottom: 1rem; left: 1rem;"
+    when :top_right
+      "position: fixed; top: 1rem; right: 1rem;"
+    when :top_left
+      "position: fixed; top: 1rem; left: 1rem;"
+    else
+      "position: fixed; bottom: 1rem; right: 1rem;"
+    end
+  end
+  
   def tipjar_link(text = nil, options = {})
     config = RailsTipjar.config
     text ||= config.button_text
@@ -74,8 +138,6 @@ module TipjarHelper
     }
   end
   
-  private
-  
   def config_position_classes(position)
     case position
     when :bottom_right

data/lib/rails_tipjar/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsTipjar
-  VERSION = "0.1.0"
+  VERSION = "0.2.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_tipjar
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Justin Paulson
@@ -60,6 +60,7 @@ files:
 - lib/rails_tipjar/configuration.rb
 - lib/rails_tipjar/engine.rb
 - lib/rails_tipjar/version.rb
+- rails_tipjar-0.1.0.gem
 - sig/rails_tipjar.rbs
 homepage: https://github.com/justinpaulson/rails_tipjar
 licenses: []