Add amount selector

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;
 }

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">