Fix(pos): styling (#234)

* fix(point-of-sale): grid css in primevue was actually flexbox * fix(point-of-sale): altering product will always result in scroll to top
GEWIS · Jun 24, 2024 · 5f1eca9 · 5f1eca9
1 parent e281694
commit 5f1eca9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleProductsComponent.vue b/apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleProductsComponent.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container-grid-wrapper flex-1 h-full mb-3 mr-3">
-    <div class="container grid gap-2 pr-5 pb-3">
+  <div class="container-grid-wrapper flex-1 h-full mb-3 pr-6 mr-3 mt-2" ref="wrapper">
+    <div class="container gap-3 pr-5">
       <ProductComponent
           v-for="product in sortedProducts"
           :key="`${product.product.id}-${product.container.id}`"
@@ -39,13 +39,15 @@ const props = defineProps({
 });
 
 const searchQuery = ref(props.searchQuery);
+const wrapper = ref();
 
 watch(() => props.searchQuery, (newValue) => {
   searchQuery.value = newValue;
 }, { immediate: true });
 
 const getFilteredProducts = () => {
   if (!props.pointOfSale) return [];
+  wrapper.value?.scrollTo(0, 0);
 
   let filteredProducts = props.pointOfSale.containers.flatMap((container) => {
     return container.products.map((product) => ({
@@ -115,6 +117,7 @@ const sortedProducts = computed(() => {
 
   > .container {
     grid-template-columns: repeat(auto-fill, minmax($product-column-width, 1fr));
+    display: grid;
   }
 }
 </style>
diff --git a/apps/point-of-sale/src/components/ProductComponent.vue b/apps/point-of-sale/src/components/ProductComponent.vue
@@ -122,7 +122,7 @@ const startFlyingAnimation = async () => {
 }
 
 .product-card {
-  padding: 1rem 0 8px 0;
+  padding: 0 0 8px 0;
   height: fit-content;
   border-radius: $border-radius;
   overflow: hidden;

diff --git a/apps/point-of-sale/src/scss/_variables.scss b/apps/point-of-sale/src/scss/_variables.scss
@@ -6,7 +6,7 @@
   --gewis-red: rgba(212, 0, 0, 1);
   --gewis-dark-red: #c40000;
   /* Product card width */
-  --product-card-width: 160px;
+  --product-card-width: 128px;
   --accent-color: rgba(212, 0, 0, 1);
 }
 
@@ -32,7 +32,7 @@ $border-radius-sm: 10px;
 $border-radius-xs: 5px;
 
 /* Products */
-$product-column-width: 160px;
+$product-column-width: 128px;
 $product-card-size: 128px;
 $product-price-height: 15px;