feat: style adjustments to product page

erpnext/public/scss/shopping_cart.scss

@@ -160,8 +160,8 @@ body.product-page {
 	min-height: 70vh;
 
 	.product-title {
-		font-size: 16px;
-		font-weight: 500;
+		font-size: 24px;
+		font-weight: 600;
 		color: var(--text-color);
 	}
 
@@ -175,15 +175,35 @@ body.product-page {
 		color: var(--gray-800);
 	}
 
-
-
 	.product-image {
 		border-color: var(--table-border-color) !important;
-	 	img {
-			min-height: 320px;
-			max-height: 30rem;
-			min-width: 320px;
+		padding: 15px;
+
+		@include media-breakpoint-between(xs, md) {
+			height: 320px;
+			width: 320px;
 		}
+
+		@include media-breakpoint-up(lg) {
+			height: 430px;
+			width: 420px;
+		}
+	 	
+	 	img {
+			object-fit: contain;
+		}
+	}
+
+	.item-slideshow {
+		@include media-breakpoint-between(xs, md) {
+			max-height: 320px;
+		}
+
+		@include media-breakpoint-up(lg) {
+			max-height: 430px;
+		}
+	 	
+		overflow: scroll;
 	}
 
 	.item-slideshow-image {
@@ -216,11 +236,22 @@ body.product-page {
 			font-size: 14px;
 		}
 	}
+
+	.item-breadcrumbs {
+		.breadcrumb-container {
+			margin: 0px;
+			padding: 0px;
+
+			a {
+				color: $text-muted;
+			}
+		}
+	}
 }
 
 .item-group-slideshow {
 	.item-group-description {
-		max-width: 800px;
+		// max-width: 900px;
 	}
 
 	.carousel-inner.rounded-carousel {

erpnext/templates/generators/item/item.html

@@ -3,7 +3,6 @@
 {% block title %} {{ title }} {% endblock %}
 
 {% block breadcrumbs %}
-	{% include "templates/includes/breadcrumbs.html" %}
 {% endblock %}
 
 {% block page_content %}

erpnext/templates/generators/item/item_details.html

@@ -1,8 +1,11 @@
-<div class="col-md-8">
+<div class="col-md-7">
 <!-- title -->
-<div class="product-title" itemprop="name">
-	{{ item_name }}
+<div class="item-breadcrumbs small text-muted">
+	{% include "templates/includes/breadcrumbs.html" %}
 </div>
+<h1 class="product-title" itemprop="name">
+	{{ item_name }}
+</h1>
 <p class="product-code">
 	<span>{{ _("Item Code") }}:</span>
 	<span itemprop="productID">{{ doc.name }}</span>

erpnext/templates/generators/item/item_image.html

@@ -1,4 +1,4 @@
-<div class="col-md-4 h-100 d-flex">
+<div class="col-md-5 h-100 d-flex">
 	{% if slides %}
 	<div class="item-slideshow d-flex flex-column mr-3">
 		{% for item in slides %}

erpnext/templates/includes/macros.html

@@ -8,7 +8,7 @@
 {% endmacro %}
 
 {% macro product_image(website_image, css_class="", alt="") %}
-	<div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
+	<div class="border text-center rounded {{ css_class }}" style="overflow: hidden;">
 		<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
 	</div>
 {% endmacro %}
@@ -113,5 +113,5 @@
 	<div class="product-price">{{ rate or '' }}</div>
 	{% endif %}
 </div>
-<a href="{{ url or '#' }}" class="stretched-link"></a>
+<a href="/{{ url or '#' }}" class="stretched-link"></a>
 {%- endmacro -%}