Website Product Image
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index e524a7c..7259580 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -1,120 +1,97 @@
.erpnext-footer {
- margin: 11px auto;
- text-align: center;
+ margin: 11px auto;
+ text-align: center;
}
-
.show-all-reports {
- margin-top: 5px;
- font-size: 11px;
+ margin-top: 5px;
+ font-size: 11px;
}
-
/* toolbar */
.toolbar-splash {
- width: 32px;
- height: 32px;
- margin: -10px auto;
+ width: 32px;
+ height: 32px;
+ margin: -10px auto;
}
-
/* pos */
-.pos {
-}
-
.pos-item {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: pointer;
- padding: 5px;
- height: 0px;
- padding-bottom: 38%;
- width: 30%;
- margin: 1.6%;
- border: 1px solid #d1d8dd;
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+ padding: 5px;
+ height: 0px;
+ padding-bottom: 38%;
+ width: 30%;
+ margin: 1.6%;
+ border: 1px solid #d1d8dd;
}
-
.pos-item-text {
- padding: 0px 5px;
+ padding: 0px 5px;
}
-
.pos-item .item-code {
- margin-bottom: 0px;
+ margin-bottom: 0px;
}
-
.pos-item .no-image {
- background-color: #fafbfc;
- border: 1px dashed #d1d8dd;
+ background-color: #fafbfc;
+ border: 1px dashed #d1d8dd;
}
-
.pos-item-image {
- padding-bottom: 100%;
- background-size: cover;
- border: 1px solid transparent;
+ padding-bottom: 100%;
+ background-size: cover;
+ border: 1px solid transparent;
}
-
.pos-item-area {
- border: 1px solid #d1d8dd;
- border-top: none;
+ border: 1px solid #d1d8dd;
+ border-top: none;
}
-
.pos-item-toolbar {
- padding: 10px 0px;
- border-bottom: 1px solid #d1d8dd;
+ padding: 10px 0px;
+ border-bottom: 1px solid #d1d8dd;
}
-
.item-list-area {
- padding: 15px 0px;
+ padding: 15px 0px;
}
-
-.pos-toolbar, .pos-bill-toolbar {
- padding: 10px 0px;
- border-bottom: 1px solid #d1d8dd;
- height: 51px;
+.pos-toolbar,
+.pos-bill-toolbar {
+ padding: 10px 0px;
+ border-bottom: 1px solid #d1d8dd;
+ height: 51px;
}
-
.pos-item-toolbar .form-group {
- margin-bottom: 0px;
+ margin-bottom: 0px;
}
-
.pos-bill-wrapper {
- border: 1px solid #d1d8dd;
- border-top: none;
- margin-right: -1px;
+ border: 1px solid #d1d8dd;
+ border-top: none;
+ margin-right: -1px;
}
-
.pos-bill {
- margin-left: -15px;
- margin-right: -15px;
+ margin-left: -15px;
+ margin-right: -15px;
}
-
.pos-bill-row {
- margin: 0px;
- padding: 7px 0px;
- border-top: 1px solid #d1d8dd;
+ margin: 0px;
+ padding: 7px 0px;
+ border-top: 1px solid #d1d8dd;
}
-
.pos-bill-header {
- border: none !important;
- background-color: #f5f7fa;
+ border: none !important;
+ background-color: #f5f7fa;
}
-
.pos-item-qty {
- display: inline-block;
+ display: inline-block;
}
-
.pos-qty-row > div {
- padding: 5px 0px;
+ padding: 5px 0px;
}
-
.pos-qty-btn {
- margin-top: 3px;
- cursor: pointer;
- font-size: 120%;
+ margin-top: 3px;
+ cursor: pointer;
+ font-size: 120%;
}
-
.pos .search-area .form-group {
- max-width: 100% !important;
+ max-width: 100% !important;
}
-
.pos .tax-table {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
diff --git a/erpnext/public/css/shopping_cart.css b/erpnext/public/css/shopping_cart.css
deleted file mode 100644
index 5e86972..0000000
--- a/erpnext/public/css/shopping_cart.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.item-main-image {
- max-width: 100%;
- margin: auto;
-}
-.web-long-description {
- font-size: 18px;
- line-height: 200%;
-}
-.item-stock {
- margin-bottom: 10px !important;
-}
diff --git a/erpnext/public/css/website.css b/erpnext/public/css/website.css
new file mode 100644
index 0000000..7d02940
--- /dev/null
+++ b/erpnext/public/css/website.css
@@ -0,0 +1,50 @@
+.web-long-description {
+ font-size: 18px;
+ line-height: 200%;
+}
+.item-stock {
+ margin-bottom: 10px !important;
+}
+.product-link {
+ display: block;
+ text-align: center;
+}
+.product-image-wrapper {
+ max-width: 300px;
+ margin: auto;
+ border-radius: 4px;
+}
+@media (max-width: 767px) {
+ .product-image {
+ height: 0px;
+ padding: 0px 0px 100%;
+ overflow: hidden;
+ }
+}
+.product-image-square {
+ width: 100%;
+ height: 0;
+ padding: 50% 0px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center top;
+ border-radius: 0.5em;
+}
+.product-image.missing-image {
+ width: 100%;
+ height: 0;
+ padding: 50% 0px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center top;
+ border-radius: 0.5em;
+ border: 1px dashed #d1d8dd;
+ position: relative;
+}
+.product-image.missing-image .octicon {
+ font-size: 32px;
+ color: #d1d8dd;
+}
+.product-text {
+ padding: 15px 0px;
+}
diff --git a/erpnext/public/js/shopping_cart.js b/erpnext/public/js/shopping_cart.js
index 0c718b0..f3852df 100644
--- a/erpnext/public/js/shopping_cart.js
+++ b/erpnext/public/js/shopping_cart.js
@@ -45,22 +45,16 @@
set_cart_count: function() {
var cart_count = getCookie("cart_count");
- var $cart = $("#website-post-login").find('[data-label="Cart"]');
+ var $cart = $('.dropdown [data-label="Cart"]');
var $badge = $cart.find(".badge");
- var $cog = $("#website-post-login").find(".dropdown-toggle");
- var $cog_count = $cog.find(".cart-count");
if(cart_count) {
if($badge.length === 0) {
- var $badge = $('<span class="badge pull-right"></span>').prependTo($cart.find("a"));
+ var $badge = $('<span class="badge pull-right"></span>')
+ .prependTo($cart.find("a").addClass("badge-hover"));
}
$badge.html(cart_count);
- if($cog_count.length === 0) {
- var $cog_count = $('<sup class="cart-count"></span>').insertAfter($cog.find(".icon-cog"));
- }
- $cog_count.html(cart_count);
} else {
$badge.remove();
- $cog_count.remove();
}
}
});
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
new file mode 100644
index 0000000..dde04a4
--- /dev/null
+++ b/erpnext/public/less/erpnext.less
@@ -0,0 +1,121 @@
+.erpnext-footer {
+ margin: 11px auto;
+ text-align: center;
+}
+
+.show-all-reports {
+ margin-top: 5px;
+ font-size: 11px;
+}
+
+/* toolbar */
+.toolbar-splash {
+ width: 32px;
+ height: 32px;
+ margin: -10px auto;
+}
+
+/* pos */
+.pos {
+}
+
+.pos-item {
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+ padding: 5px;
+ height: 0px;
+ padding-bottom: 38%;
+ width: 30%;
+ margin: 1.6%;
+ border: 1px solid #d1d8dd;
+}
+
+.pos-item-text {
+ padding: 0px 5px;
+}
+
+.pos-item .item-code {
+ margin-bottom: 0px;
+}
+
+.pos-item .no-image {
+ background-color: #fafbfc;
+ border: 1px dashed #d1d8dd;
+}
+
+.pos-item-image {
+ padding-bottom: 100%;
+ background-size: cover;
+ border: 1px solid transparent;
+}
+
+.pos-item-area {
+ border: 1px solid #d1d8dd;
+ border-top: none;
+}
+
+.pos-item-toolbar {
+ padding: 10px 0px;
+ border-bottom: 1px solid #d1d8dd;
+}
+
+.item-list-area {
+ padding: 15px 0px;
+}
+
+.pos-toolbar, .pos-bill-toolbar {
+ padding: 10px 0px;
+ border-bottom: 1px solid #d1d8dd;
+ height: 51px;
+}
+
+.pos-item-toolbar .form-group {
+ margin-bottom: 0px;
+}
+
+.pos-bill-wrapper {
+ border: 1px solid #d1d8dd;
+ border-top: none;
+ margin-right: -1px;
+}
+
+.pos-bill {
+ margin-left: -15px;
+ margin-right: -15px;
+}
+
+.pos-bill-row {
+ margin: 0px;
+ padding: 7px 0px;
+ border-top: 1px solid #d1d8dd;
+}
+
+.pos-bill-header {
+ border: none !important;
+ background-color: #f5f7fa;
+}
+
+.pos-item-qty {
+ display: inline-block;
+}
+
+.pos-qty-row > div {
+ padding: 5px 0px;
+}
+
+.pos-qty-btn {
+ margin-top: 3px;
+ cursor: pointer;
+ font-size: 120%;
+}
+
+.pos .search-area .form-group {
+ max-width: 100% !important;
+}
+
+.pos .tax-table {
+ margin-bottom: 10px;
+}
+
diff --git a/erpnext/public/less/website.less b/erpnext/public/less/website.less
new file mode 100644
index 0000000..c42cb4c
--- /dev/null
+++ b/erpnext/public/less/website.less
@@ -0,0 +1,53 @@
+@border-color: #d1d8dd;
+
+.web-long-description {
+ font-size: 18px;
+ line-height: 200%;
+}
+.item-stock {
+ margin-bottom: 10px !important;
+}
+
+.product-link {
+ display: block;
+ text-align: center;
+}
+
+.product-image-wrapper {
+ max-width: 300px;
+ margin: auto;
+ border-radius: 4px;
+}
+
+@media (max-width: 767px) {
+ .product-image {
+ height: 0px;
+ padding: 0px 0px 100%;
+ overflow: hidden;
+ }
+}
+
+.product-image-square {
+ width: 100%;
+ height: 0;
+ padding: 50% 0px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center top;
+ border-radius: 0.5em;
+}
+
+.product-image.missing-image {
+ .product-image-square;
+ border: 1px dashed @border-color;
+ position: relative;
+}
+
+.product-image.missing-image .octicon {
+ font-size: 32px;
+ color: @border-color;
+}
+
+.product-text {
+ padding: 15px 0px;
+}