From 1fd4dc471af805faf3116a8895cf3cb54e05ac0c Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Fri, 26 Jun 2020 16:23:24 +1000
Subject: [PATCH] Position the price breakdown below the button

---
 .../darkswarm/directives/price_breakdown.js.coffee    |  2 +-
 .../javascripts/templates/price_breakdown.html.haml   |  2 +-
 .../javascripts/templates/shop_variant.html.haml      |  2 +-
 app/assets/stylesheets/darkswarm/_shop-popovers.scss  | 11 ++++-------
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee b/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
index 061529e1b5..1b4609ff4d 100644
--- a/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
@@ -2,7 +2,7 @@ Darkswarm.directive "priceBreakdown", ($tooltip)->
   # We use the $tooltip service from Angular foundation to give us boilerplate
   # Subsequently we patch the scope, template and restrictions
   tooltip = $tooltip 'priceBreakdown', 'priceBreakdown', 'click'
-  tooltip.scope = 
+  tooltip.scope =
     variant: "="
   tooltip.templateUrl = "price_breakdown_button.html"
   tooltip.replace = true
diff --git a/app/assets/javascripts/templates/price_breakdown.html.haml b/app/assets/javascripts/templates/price_breakdown.html.haml
index 09df66b5a4..607d5a12ce 100644
--- a/app/assets/javascripts/templates/price_breakdown.html.haml
+++ b/app/assets/javascripts/templates/price_breakdown.html.haml
@@ -1,5 +1,5 @@
 .joyride-tip-guide.price_breakdown{"ng-class" => "{ in: tt_isOpen, fade: tt_animation }"}
-  %span.joyride-nub.right
+  %span.joyride-nub.top
   .joyride-content-wrapper
     %ul
       %li
diff --git a/app/assets/javascripts/templates/shop_variant.html.haml b/app/assets/javascripts/templates/shop_variant.html.haml
index cbe6633a25..2f6d3b077f 100644
--- a/app/assets/javascripts/templates/shop_variant.html.haml
+++ b/app/assets/javascripts/templates/shop_variant.html.haml
@@ -5,7 +5,7 @@
   .small-4.medium-3.large-2.columns.variant-price
     %price-breakdown{"price-breakdown" => "_", variant: "variant",
       "price-breakdown-append-to-body" => "true",
-      "price-breakdown-placement" => "left",
+      "price-breakdown-placement" => "bottom",
       "price-breakdown-animation" => true}
     {{ variant.price_with_fees | localizeCurrency }}
   .medium-2.large-1.columns.total-price
diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.scss b/app/assets/stylesheets/darkswarm/_shop-popovers.scss
index 6e6c97f10b..4b3490796e 100644
--- a/app/assets/stylesheets/darkswarm/_shop-popovers.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-popovers.scss
@@ -5,7 +5,8 @@
 // Foundation overrides
 .joyride-tip-guide.price_breakdown {
   // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
-  margin-left: -8px;
+  margin-left: -7.4rem;
+  margin-top: 0.1rem;
 
   @include box-shadow(0 2px 8px 0 rgba(0, 0, 0, 0.35));
 
@@ -22,12 +23,8 @@
     color: #1f1f1f;
   }
 
-  .joyride-nub.right {
-    top: 38px;
-    border-color: $grey-800 !important;
-    border-top-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
+  .joyride-nub.top {
+    left: 7.4rem;
   }
 
   ul, li {