Fix search and bid input (#13)

dhzdhd · Nov 9, 2023 · cab8a88 · cab8a88
1 parent 2545ae3
commit cab8a88
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/frontend/src/routes/home/+page.svelte b/frontend/src/routes/home/+page.svelte
@@ -50,11 +50,13 @@
 	<div class="container">
 		{#each products as product}
 			<button on:click={async () => await navigate(product)} class="product">
-				<img src={product.image.url} alt={product.image.alt} />
-				<div class="description">
-					<span class="category">Clothes</span>
-					<h5 class="title">{product.name}</h5>
-					<h4 class="price">${product.bidPrice}</h4>
+				<div class="con">
+					<img src={product.image.url} alt={product.image.alt} />
+					<div class="description">
+						<span class="category">Clothes</span>
+						<h5 class="title">{product.name}</h5>
+						<h4 class="price">${product.bidPrice}</h4>
+					</div>
 				</div>
 			</button>
 		{/each}
@@ -115,25 +117,32 @@ section
     .container
         display: grid
         gap: 1rem
-        grid-template-columns: repeat(3, 1fr)
+        grid-template-columns: repeat(4, 1fr)
+        
 
+         
+                   
         .product
-            width: 23%
-            min-width: 20rem
+            
+            height: 27rem
+            width: 20rem
             padding: 10px 12px
             border-radius: 25px
-            place-self: center
+            
             cursor: pointer
             transition: 0.2s
             border: none
             background: linear-gradient(180deg, transparentize(white, 0.96) 0%, transparentize(vars.$accent, 0.9)  100%)
 
             &:hover
                 box-shadow: 2px 2px 10px vars.$accent
-
+            
             img
-                width: 100%
+                width: 18.5rem
+                height:auto
                 border-radius: 20px
+                
+
 
             .description
                 text-align: start
@@ -142,11 +151,12 @@ section
                 .category
                     color: vars.$text
                     font-size: 12px
-
+                    
                 .title
-                    padding-top: 7px
+                
                     color: vars.$inverted
                     font-size: 14px
+                
 
                 .price
                     padding-top: 7px

diff --git a/frontend/src/routes/home/[id=int]/+page.svelte b/frontend/src/routes/home/[id=int]/+page.svelte
@@ -77,7 +77,7 @@
 
 <section>
 	<h1>{product.name}</h1>
-	<img src={product.image.url} id="img" alt={product.image.alt} />
+	<img src={product.image.url} id="img" alt={product.image.alt} class="image" />
 	<div class="details">
 		<h2 class="price">${product.bidPrice}</h2>
 		{#if product.available}
@@ -137,6 +137,10 @@ section
         font-size: 2rem
         color: vars.$text
 
+    img
+        width:auto
+        height: 25rem		
+
     .details
         .price
             color: vars.$accent