From a169179061c27670f14196cc21cdf64988fb941c Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Fri, 30 Aug 2019 20:04:04 -0700
Subject: [PATCH 1/5] Start off cart hidden on desktop breakpoint

---
 BTCPayServer/wwwroot/cart/css/style.css | 36 ++++++-------------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/BTCPayServer/wwwroot/cart/css/style.css b/BTCPayServer/wwwroot/cart/css/style.css
index 1f3b8720b..ec4090ff1 100644
--- a/BTCPayServer/wwwroot/cart/css/style.css
+++ b/BTCPayServer/wwwroot/cart/css/style.css
@@ -47,6 +47,7 @@
 }
 
 #sidebar {
+    margin-right: -400px;
     width: 400px;
     position: fixed;
     top: 0;
@@ -59,13 +60,13 @@
     transition: all 0.3s;
     -webkit-overflow-scrolling: touch;
 }
-#sidebar .js-cart {
-    display: none;
-}
-
 
 #sidebar.active {
-    margin-right: -400px;
+    margin-right: 0;
+}
+
+#sidebarCollapse span {
+    display: none;
 }
 
 /* ---------------------------------------------------
@@ -73,7 +74,7 @@
 ----------------------------------------------------- */
 
 #content {
-    width: calc(100% - 400px);
+    width: 100%;
     min-height: 100vh;
     transition: all 0.3s;
     position: absolute;
@@ -82,7 +83,7 @@
 }
 
 #content.active {
-    width: 100%;
+    width: calc(100% - 400px);
 }
 
 .bg-gray {
@@ -96,27 +97,6 @@
     MEDIAQUERIES
 ----------------------------------------------------- */
 
-@media (max-width: 768px) {
-    #sidebar {
-        margin-right: -400px;
-    }
-    #sidebar .js-cart {
-        display: inline;
-    }
-    #sidebar.active {
-        margin-right: 0;
-    }
-    #content {
-        width: 100%;
-    }
-    #content.active {
-        width: calc(100% - 400px);
-    }
-    #sidebarCollapse span {
-        display: none;
-    }
-}
-
 @media (max-width: 575px) {
     #sidebar {
         width: 100%;

From 1ec342da1ea52e4758a3b81ac7c3c2020f4c0e7a Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Fri, 30 Aug 2019 20:06:08 -0700
Subject: [PATCH 2/5] Apply consistent border radius to POS app search bar

---
 .../Views/AppsPublic/ViewPointOfSale.cshtml   | 20 +++++++++----------
 BTCPayServer/wwwroot/cart/css/style.css       |  9 +++++++++
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml b/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
index 55867c416..a5269e6e8 100644
--- a/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
+++ b/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
@@ -49,7 +49,7 @@
     </style>
     @if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
     {
-        @Safe.Raw($"<style>{Model.EmbeddedCSS}</style>");   
+        @Safe.Raw($"<style>{Model.EmbeddedCSS}</style>");
     }
 
 </head>
@@ -231,11 +231,11 @@
                     <div class="modal-footer bg-light">
                         <form
                             id="js-cart-pay-form"
-                            method="post" 
-                            asp-controller="AppsPublic" 
-                            asp-action="ViewPointOfSale" 
-                            asp-route-appId="@Model.AppId" 
-                            asp-antiforgery="false" 
+                            method="post"
+                            asp-controller="AppsPublic"
+                            asp-action="ViewPointOfSale"
+                            asp-route-appId="@Model.AppId"
+                            asp-antiforgery="false"
                             data-buy
                         >
                             <input id="js-cart-amount" class="form-control" type="hidden" name="amount">
@@ -254,7 +254,7 @@
             <div id="content">
                 <div class="p-2 p-sm-4">
                     <div class="row">
-                        <div class="col-sm-4 col-lg-3 order-sm-last text-right mb-2">
+                        <div class="col-sm-4 col-lg-2 order-sm-last text-right mb-2">
                             <a class="js-cart btn btn-lg btn-warning text-white text-right" href="#">
                                 <i class="fa fa-shopping-basket"></i>&nbsp;
                                 <span class="badge badge-light badge-pill">
@@ -262,10 +262,10 @@
                                 </span>
                             </a>
                         </div>
-                        <div class="col-sm-8 col-lg-9 mb-2">
-                            <div class="input-group mb-2">
+                        <div class="col-sm-8 col-lg-10 mb-2">
+                            <div class="mb-2 position-relative">
                                 <input type="text" class="js-search form-control form-control-lg" placeholder="Find product">
-                                <a class="js-search-reset btn btn-link text-black" href="#" style="position: absolute; right: 0px; z-index: 1049; display: none;">
+                                <a class="js-search-reset btn btn-lg btn-link text-black" href="#">
                                     <i class="fa fa-times-circle fa-lg"></i>
                                 </a>
                             </div>
diff --git a/BTCPayServer/wwwroot/cart/css/style.css b/BTCPayServer/wwwroot/cart/css/style.css
index ec4090ff1..bbc3347b5 100644
--- a/BTCPayServer/wwwroot/cart/css/style.css
+++ b/BTCPayServer/wwwroot/cart/css/style.css
@@ -37,6 +37,15 @@
     border-radius: 0;
 }
 
+.js-search-reset {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1049;
+    display: none;
+}
+
 /* ---------------------------------------------------
     SIDEBAR STYLE
 ----------------------------------------------------- */

From bc8e7ce888ac417529ffcf8c7cdb557d0d76ae79 Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Fri, 30 Aug 2019 20:27:43 -0700
Subject: [PATCH 3/5] Add background color to cart tip button when it's focused

---
 BTCPayServer/wwwroot/cart/css/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/BTCPayServer/wwwroot/cart/css/style.css b/BTCPayServer/wwwroot/cart/css/style.css
index bbc3347b5..e7d110670 100644
--- a/BTCPayServer/wwwroot/cart/css/style.css
+++ b/BTCPayServer/wwwroot/cart/css/style.css
@@ -33,6 +33,10 @@
     cursor: pointer;
 }
 
+.js-cart-tip-btn:focus {
+    background-color: #dee2e6;
+}
+
 #js-cart-confirm {
     border-radius: 0;
 }

From eae913f809d29238a794d697b1f9dacd5585a3c5 Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Sun, 1 Sep 2019 11:18:46 -0700
Subject: [PATCH 4/5] fix(pos-app): hide "clear search" button when input field
 is manually cleared

---
 BTCPayServer/wwwroot/cart/js/cart.jquery.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/BTCPayServer/wwwroot/cart/js/cart.jquery.js b/BTCPayServer/wwwroot/cart/js/cart.jquery.js
index 4c6256cad..d0e2d84ff 100644
--- a/BTCPayServer/wwwroot/cart/js/cart.jquery.js
+++ b/BTCPayServer/wwwroot/cart/js/cart.jquery.js
@@ -113,6 +113,8 @@ $(document).ready(function(){
             var $list = $('#js-pos-list').find(".card-title:not(:icontains('" + $.escapeSelector(str) + "'))");
             $list.parents('.card-wrapper').hide();
             $('.js-search-reset').show();
+        } else if (str.length === 0) {
+            $('.js-search-reset').hide();
         }
     });
 

From eb583ba6287af5e6ed0dd732a674ac25d4637b2a Mon Sep 17 00:00:00 2001
From: Kukks <evilkukka@gmail.com>
Date: Wed, 4 Sep 2019 09:29:46 +0200
Subject: [PATCH 5/5] Revert "Start off cart hidden on desktop breakpoint"

This reverts commit a169179061c27670f14196cc21cdf64988fb941c.
---
 BTCPayServer/wwwroot/cart/css/style.css | 36 +++++++++++++++++++------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/BTCPayServer/wwwroot/cart/css/style.css b/BTCPayServer/wwwroot/cart/css/style.css
index e7d110670..f2d347b2f 100644
--- a/BTCPayServer/wwwroot/cart/css/style.css
+++ b/BTCPayServer/wwwroot/cart/css/style.css
@@ -60,7 +60,6 @@
 }
 
 #sidebar {
-    margin-right: -400px;
     width: 400px;
     position: fixed;
     top: 0;
@@ -73,13 +72,13 @@
     transition: all 0.3s;
     -webkit-overflow-scrolling: touch;
 }
-
-#sidebar.active {
-    margin-right: 0;
+#sidebar .js-cart {
+    display: none;
 }
 
-#sidebarCollapse span {
-    display: none;
+
+#sidebar.active {
+    margin-right: -400px;
 }
 
 /* ---------------------------------------------------
@@ -87,7 +86,7 @@
 ----------------------------------------------------- */
 
 #content {
-    width: 100%;
+    width: calc(100% - 400px);
     min-height: 100vh;
     transition: all 0.3s;
     position: absolute;
@@ -96,7 +95,7 @@
 }
 
 #content.active {
-    width: calc(100% - 400px);
+    width: 100%;
 }
 
 .bg-gray {
@@ -110,6 +109,27 @@
     MEDIAQUERIES
 ----------------------------------------------------- */
 
+@media (max-width: 768px) {
+    #sidebar {
+        margin-right: -400px;
+    }
+    #sidebar .js-cart {
+        display: inline;
+    }
+    #sidebar.active {
+        margin-right: 0;
+    }
+    #content {
+        width: 100%;
+    }
+    #content.active {
+        width: calc(100% - 400px);
+    }
+    #sidebarCollapse span {
+        display: none;
+    }
+}
+
 @media (max-width: 575px) {
     #sidebar {
         width: 100%;