price alignment small

neuland · May 2, 2024 · 7547c9e · 7547c9e
1 parent 7444107
commit 7547c9e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/src/checkout/components/LineItem.css b/src/checkout/components/LineItem.css
@@ -25,6 +25,7 @@
   gap: 1rem;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
 }
 
 .c_LineItem__name {
@@ -35,6 +36,12 @@
   min-width: 300px;
 }
 
+.c_LineItem__quantity {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
 .c_LineItem__price {
   flex-basis: 100px;
   text-align: end;

diff --git a/src/checkout/components/LineItem.js b/src/checkout/components/LineItem.js
@@ -23,31 +23,34 @@ export default ({ sku, id, name, quantity, total, image }) => {
       <a href="${url}" class="c_LineItem__name">
         <strong>${name}</strong><br />${sku}
       </a>
-      <div class="c_LineItem__quantity">${quantity}</div>
 
-      <form action="/checkout/cart/remove" method="post">
-        <input type="hidden" name="sku" value="${sku}" />
-        ${Button({
-          variant: "secondary",
-          rounded: true,
-          type: "submit",
-          value: "remove",
-          size: "small",
-          title: `Remove ${name} from cart`,
-          children: html`<svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            height="20"
-            width="20"
-            viewBox="0 0 48 48"
-          >
-            <path
-              fill="#000"
-              d="m40 5.172-16 16-16-16L5.171 8l16.001 16L5.171 40 8 42.828l16-16 16 16L42.828 40l-16-16 16-16L40 5.172Z"
-            />
-          </svg>`,
-        })}
-      </form>
+      <div class="c_LineItem__quantity">
+        <span>${quantity}</span>
+
+        <form action="/checkout/cart/remove" method="post">
+          <input type="hidden" name="sku" value="${sku}" />
+          ${Button({
+            variant: "secondary",
+            rounded: true,
+            type: "submit",
+            value: "remove",
+            size: "small",
+            title: `Remove ${name} from cart`,
+            children: html`<svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              height="20"
+              width="20"
+              viewBox="0 0 48 48"
+            >
+              <path
+                fill="#000"
+                d="m40 5.172-16 16-16-16L5.171 8l16.001 16L5.171 40 8 42.828l16-16 16 16L42.828 40l-16-16 16-16L40 5.172Z"
+              />
+            </svg>`,
+          })}
+        </form>
+      </div>
       <div class="c_LineItem__price">${total} Ø</div>
     </div>
   </li>`;