From 58df3b82d4af9328f00e5f7fcefa66b8ce0093c5 Mon Sep 17 00:00:00 2001
From: Knyffen <knyffen@gmail.com>
Date: Fri, 25 Oct 2024 13:38:47 +0200
Subject: [PATCH] Add amount selector

---
 css/camera_test.css        | 44 ++++++++++++++++++++++++++++++++++----
 templates/camera_test.html | 13 +++++++----
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/css/camera_test.css b/css/camera_test.css
index 6efad7a..c1ea856 100644
--- a/css/camera_test.css
+++ b/css/camera_test.css
@@ -24,10 +24,38 @@
   grid-column: span 3;
 }
 
+.col-4 {
+  grid-column: span 4;
+}
+
+.col-5 {
+  grid-column: span 5;
+}
+
 .col-6 {
   grid-column: span 6;
 }
 
+.col-7 {
+  grid-column: span 7;
+}
+
+.col-8 {
+  grid-column: span 8;
+}
+
+.col-9 {
+  grid-column: span 9;
+}
+
+.col-10 {
+  grid-column: span 10;
+}
+
+.col-11 {
+  grid-column: span 11;
+}
+
 .col-12 {
   grid-column: span 12;
 }
@@ -42,14 +70,22 @@
   background-image: url('/assets/searchicon.png');
   background-position: 14px 12px;
   background-repeat: no-repeat;
-  font-size: 16px;
+  font-size: 1em;
   padding: 14px 20px 12px 45px;
   border: none;
   border-bottom: 1px solid #ddd;
 }
 
 /* The search field when it gets focus/clicked on */
-#myInput:focus {outline: 3px solid #ddd;}
+#myInput:focus {
+  outline: 3px solid #ddd;
+}
+
+#amount {
+  font-size: 1em;
+  width: 3em;
+  height: calc(100% - 4px);;
+}
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
@@ -62,7 +98,7 @@
 .dropdown-content {
   position: relative;
   background-color: #f6f6f6;
-  width: calc(100% - 2px);;
+  width: calc(100% - 2px);
   border: 1px solid #ddd;
   z-index: 1;
 }
@@ -74,7 +110,7 @@
 .dropdown-options {
   position: absolute;
   background-color: #f6f6f6;
-  width: calc(100% - 2px);;
+  width: calc(100% - 2px);
   border: 1px solid #ddd;
   z-index: 1;
 }
diff --git a/templates/camera_test.html b/templates/camera_test.html
index 506bb3b..6fcceab 100644
--- a/templates/camera_test.html
+++ b/templates/camera_test.html
@@ -3,10 +3,15 @@
         <video id="video">Camera not available.</video>
         <canvas id="canvas" hidden> </canvas>
     </div>
-    <div class="dropdown col-12">
-        <div id="myDropdown" class="dropdown-content">
-            <input type="text" placeholder="Search.." id="myInput" class="dropdown-input">
-            <div id="dropdownOptions" class="dropdown-options"></div>
+    <div class="subgrid col-12">
+        <div class="dropdown col-11">
+            <div id="myDropdown" class="dropdown-content">
+                <input type="text" placeholder="Search.." id="myInput" class="dropdown-input">
+                <div id="dropdownOptions" class="dropdown-options"></div>
+            </div>
+        </div>
+        <div class="col-1">
+            <input type="number" id="amount" name="amount" min="1" value="1"/>
         </div>
     </div>
     <div class="col-12">