feat: style adjustments to product page
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index de55c50..16a19ad 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -160,8 +160,8 @@
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 @@
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 @@
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 {
diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index a456179..8899080 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/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 %}
diff --git a/erpnext/templates/generators/item/item_details.html b/erpnext/templates/generators/item/item_details.html
index 9a0bb5c..6a85ca5 100644
--- a/erpnext/templates/generators/item/item_details.html
+++ b/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>
diff --git a/erpnext/templates/generators/item/item_image.html b/erpnext/templates/generators/item/item_image.html
index fa70ebe..39a30d0 100644
--- a/erpnext/templates/generators/item/item_image.html
+++ b/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 %}
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 1523b0d..74c84ba 100644
--- a/erpnext/templates/includes/macros.html
+++ b/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 -%}
\ No newline at end of file