fix: Checkbox sizes and paging buttons

- Show paging buttons at all times and enable/disable buttons
- Define checkbox and radio button  sizes within erpnext
- Wishlist cards even height

erpnext/e_commerce/product_view.js

@@ -140,20 +140,24 @@ erpnext.ProductView =  class {
 			let query_params = frappe.utils.get_query_params();
 			let start = query_params.start ? cint(JSON.parse(query_params.start)) : 0;
 			let page_length = settings.products_per_page || 0;
+			let no_of_products = this.products.length;
+
+			let prev_disable = start > 0 ? "" : "disabled";
+			let next_disable = (no_of_products > page_length || no_of_products == page_length) ? "" : "disabled";
+
+			paging_html += `
+				<button class="btn btn-default btn-prev" data-start="${ start - page_length }"
+					style="float: left" ${prev_disable}>
+					${ __("Prev") }
+				</button>`;
+
+			paging_html += `
+				<button class="btn btn-default btn-next" data-start="${ start + page_length }"
+					${next_disable}>
+					${ __("Next") }
+				</button>
+			`;
 
-			if (start > 0) {
-				paging_html += `
-					<button class="btn btn-default btn-prev" data-start="${ start - page_length }" style="float: left">
-						${ __("Prev") }
-					</button>`;
-			}
-			if (this.products.length > page_length || this.products.length == page_length) {
-				paging_html += `
-					<button class="btn btn-default btn-next" data-start="${ start + page_length }">
-						${ __("Next") }
-					</button>
-				`;
-			}
 			paging_html += `</div></div>`;
 
 			$(".page_content").append(paging_html);
@@ -240,6 +244,7 @@ erpnext.ProductView =  class {
 								name="discount" id="${ filter[0] }"
 								data-filter-name="discount"
 								data-filter-value="${ filter[0] }"
+								style="width: 14px !important"
 							>
 								<span class="label-area" for="${ filter[0] }">
 									${ filter[1] }

erpnext/public/scss/shopping_cart.scss

@@ -195,6 +195,18 @@ body.product-page {
 	}
 }
 
+.product-filter {
+	width: 14px !important;
+	height: 14px !important;
+}
+
+.discount-filter {
+	&:before {
+		width: 14px !important;
+		height: 14px !important;
+	}
+}
+
 .list-image {
 	overflow: hidden;
 	max-height: 200px;

erpnext/templates/generators/item/item_add_to_cart.html

@@ -100,7 +100,7 @@
 				<!-- Add to Wishlist -->
 				{% if cart_settings.enable_wishlist %}
 					<a href="/wishlist"
-						class="btn btn-view-in-wishlist hidden"
+						class="btn btn-view-in-wishlist font-md hidden"
 						role="button"
 					>
 						<span class="mr-2">
@@ -116,7 +116,7 @@
 						data-item-code="{{item_code}}"
 						data-price="{{ price.get('price_list_rate') or 0}}"
 						data-formatted-price="{{ price.get('formatted_price') or 0 }}"
-						class="btn btn-add-to-wishlist"
+						class="btn btn-add-to-wishlist font-md"
 					>
 						<span class="mr-2">
 							<svg class="icon icon-md">

erpnext/templates/generators/item_group.html

@@ -7,10 +7,9 @@
 
 	<div class="input-group mb-6 col-8 order-2">
 		<div class="dropdown w-100" id="dropdownMenuSearch">
-			<input type="search" name="query" id="search-box" class="form-control"
+			<input type="search" name="query" id="search-box" class="form-control font-md"
 				placeholder="Search for products..."
-				aria-label="Product" aria-describedby="button-addon2"
+				aria-label="Product" aria-describedby="button-addon2">
-				style="font-size: 14px">
 			<!-- Results dropdown rendered in product_search.js -->
 		</div>
 	</div>

erpnext/templates/includes/cart/cart_address.html

@@ -29,7 +29,7 @@
 </div>
 <div class="checkbox ml-1 mb-2">
 	<label for="input_same_billing">
-		<input type="checkbox" id="input_same_billing" checked>
+		<input type="checkbox" class="product-filter" id="input_same_billing" checked style="width: 14px !important">
 		<span class="label-area font-md">{{ _('Billing Address is same as Shipping Address') }}</span>
 	</label>
 </div>

erpnext/templates/includes/macros.html

@@ -141,7 +141,7 @@
 {%- set title = item.item_name or item.item_code -%}
 {%- set title = title[:50] + "..." if title|len > 50 else title -%}
 <div class="col-sm-3 wishlist-card">
-	<div class="card text-center" style="max-height: 390px;">
+	<div class="card text-center" style="height: 100%">
 		<div class="card-img-container">
 			<a href="/{{ item.route or '#' }}" style="text-decoration: none;">
 				{% if item.image %}
@@ -295,7 +295,8 @@
 						class="product-filter field-filter"
 						id="{{value}}"
 						data-filter-name="{{ item_field.fieldname }}"
-						data-filter-value="{{ value }}">
+						data-filter-value="{{ value }}"
+						style="width: 14px !important">
 					<span class="label-area">{{ value }}</span>
 				</label>
 			</div>
@@ -327,6 +328,7 @@
 						id="{{attr_value.name}}"
 						data-attribute-name="{{ attribute.name }}"
 						data-attribute-value="{{ attr_value.attribute_value }}"
+						style="width: 14px !important"
 						{% if attr_value.checked %} checked {% endif %}>
 						<span class="label-area">{{ attr_value.attribute_value }}</span>
 				</label>

erpnext/www/all-products/index.html

@@ -8,10 +8,9 @@
 
 	<div class="input-group mb-6 col-8 order-2">
 		<div class="dropdown w-100" id="dropdownMenuSearch">
-			<input type="search" name="query" id="search-box" class="form-control"
+			<input type="search" name="query" id="search-box" class="form-control font-md"
 				placeholder="Search for products..."
-				aria-label="Product" aria-describedby="button-addon2"
+				aria-label="Product" aria-describedby="button-addon2">
-				style="font-size: 14px">
 			<!-- Results dropdown rendered in product_search.js -->
 		</div>
 	</div>