feat: use small name, update badges, & add hover effect

hackclub · Sep 14, 2024 · 21aec6a · 21aec6a
1 parent 70d5e6a
commit 21aec6a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/models/products.go b/models/products.go
@@ -6,6 +6,7 @@ type ProductLabelReverseResolver func(l string) []string
 type Product struct {
 	ID          uint   `json:"id" gorm:"primary_key"`
 	Name        string `json:"name"`
+	SmallName   string `json:"smallName"`
 	Price       int    `json:"price"`
 	Stock       int    `json:"stock"`
 	Description string `json:"description"`

diff --git a/services/shop.go b/services/shop.go
@@ -54,10 +54,6 @@ func (srv *ShopService) GetProducts() ([]*models.Product, error) {
 	formattedProducts := []*models.Product{}
 
 	for i, product := range hackClubProducts {
-		description := product.Description
-		if description == "" {
-			description = product.SmallName
-		}
 
 		stock := -1
 		if product.Stock != nil {
@@ -67,7 +63,8 @@ func (srv *ShopService) GetProducts() ([]*models.Product, error) {
 		formattedProducts = append(formattedProducts, &models.Product{
 			ID:          uint(i + 1), // Use index + 1 as ID
 			Name:        product.Name,
-			Description: description,
+			SmallName:   product.SmallName,
+			Description: product.Description,
 			Price:       product.Hours,
 			Stock:       stock,
 			Image:       product.ImageURL,

diff --git a/static/assets/css/app.dist.v0.1.6.css b/static/assets/css/app.dist.v0.1.6.css
diff --git a/static/assets/css/app.dist.v0.1.6.css.br b/static/assets/css/app.dist.v0.1.6.css.br
diff --git a/views/shop.tpl.html b/views/shop.tpl.html
@@ -19,14 +19,22 @@
 
             .stock-badge {
                 position: absolute;
-                top: 0;
-                left: 0;
-                transform: rotate(-2deg);
-                padding: 5px 30px;
+                top: -12px;
+                left: -18px;
+                transform: rotate(-6deg);
+                padding: 5px 20px;
                 font-size: 0.8rem;
                 font-weight: bold;
-                color: white;
                 z-index: 10;
+                border-radius: 4px;
+            }
+
+            .product {
+                transition: transform 0.3s ease;
+            }
+
+            .product:hover {
+                transform: scale(1.05);
             }
         </style>
 
@@ -49,7 +57,7 @@
                 >
                     {{ range .Products }}
                     <div
-                        class="product bg-accent-primary dark:bg-accent-dark-primary rounded-lg shadow-md overflow-hidden relative {{ if eq .Stock 0 }}opacity-50{{ end }} flex flex-col h-full"
+                        class="product bg-accent-primary dark:bg-accent-dark-primary rounded-lg shadow-md relative {{ if eq .Stock 0 }}opacity-50{{ end }} flex flex-col h-full"
                     >
                         {{ if gt .Stock 0 }}
                         <div class="stock-badge bg-primary">
@@ -78,7 +86,7 @@ <h2 class="text-xl font-semibold mb-2">
                             <p
                                 class="text-text-secondary dark:text-text-dark-secondary mb-4 flex-grow"
                             >
-                                {{ .Description }}
+                                {{ .SmallName }}
                             </p>
                             <div
                                 class="flex justify-between items-center mt-auto"