Style stock popout

openfoodfoundation · Nov 16, 2023 · ddda320 · ddda320
1 parent 7c55d6e
commit ddda320
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
@@ -82,8 +82,8 @@
                 %td.field
                   = variant_form.text_field :price, 'aria-label': t('admin.products_page.columns.price'), value: number_to_currency(variant.price, unit: '')&.strip # TODO: add a spec to prove that this formatting is necessary. If so, it should be in a shared form helper for currency inputs
                   = error_message_on variant, :price
-                %td.field
-                  %div.on-hand__wrapper
+                %td.field.on-hand__wrapper
+                  %div.on-hand__popout
                     .field
                       = variant_form.number_field :on_hand, 'aria-label': t('admin.products_page.columns.on_hand')
                       = error_message_on variant, :on_hand

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
@@ -114,8 +114,17 @@
       }
     }
 
+    .field {
+      padding: 0;
+      margin-bottom: 0.75em;
+    }
+
+    label {
+      margin: 0;
+    }
+
     // "Naked" inputs. Row hover helps reveal them.
-    input {
+    input:not([type="checkbox"]) {
       border-color: transparent;
       background-color: $color-tbl-cell-bg;
       height: auto;
@@ -265,4 +274,28 @@
       z-index: 1; // Ensure tom-select is covered
     }
   }
+
+  // Stock popout widget
+  .on-hand {
+    &__wrapper {
+      position: relative;
+    }
+    &__popout {
+      position: absolute;
+      top: -1em;
+      left: -1em;
+      z-index: 1; // Cover below row when hover
+      width: 9em;
+
+      padding: $padding-tbl-cell;
+
+      background: $color-tbl-cell-bg;
+      border-radius: 3px; //todo: check
+      box-shadow: 0px 0px 8px 0px rgba($near-black, 0.25);
+
+      .field:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }