Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[hub] Item page skeleton

Browse Source
This commit is contained in:
Prateeksha Singh 2018-07-28 12:25:14 +05:30
parent dd8045759f
commit f6f429fb10
2 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
erpnext/public/js/hub/marketplace.js
View File

@ -204,6 +204,10 @@ class SubPage {
this.hide(); this.hide();
} }
empty() {
this.$wrapper.empty();
}
show() { show() {
this.refresh(); this.refresh();
this.$wrapper.show(); this.$wrapper.show();
@ -325,6 +329,7 @@ erpnext.hub.SearchPage = class SearchPage extends SubPage {
erpnext.hub.Item = class Item extends SubPage { erpnext.hub.Item = class Item extends SubPage {
refresh() { refresh() {
this.show_skeleton();
this.hub_item_code = frappe.get_route()[2]; this.hub_item_code = frappe.get_route()[2];
this.get_item(this.hub_item_code) this.get_item(this.hub_item_code)
@ -334,6 +339,30 @@ erpnext.hub.Item = class Item extends SubPage {
}); });
} }
show_skeleton() {
const skeleton = `<div class="hub-item-container">
<div class="row">
<div class="col-md-3">
<div class="hub-item-skeleton-image"></div>
</div>
<div class="col-md-6">
<h2 class="hub-skeleton" style="width: 75%;">Name</h2>
<div class="text-muted">
<p class="hub-skeleton" style="width: 35%;">Details</p>
<p class="hub-skeleton" style="width: 50%;">Ratings</p>
</div>
<hr>
<div class="hub-item-description">
<p class="hub-skeleton">Desc</p>
<p class="hub-skeleton" style="width: 85%;">Desc</p>
</div>
</div>
</div>
</div>`;
this.$wrapper.html(skeleton);
}
get_item(hub_item_code) { get_item(hub_item_code) {
return hub.call('get_item_details', { hub_item_code }); return hub.call('get_item_details', { hub_item_code });
} }

14
erpnext/public/less/hub.less
View File

@ -139,6 +139,20 @@ body[data-route^="marketplace/"] {
align-items: center; align-items: center;
} }
.hub-item-skeleton-image {
border-radius: 4px;
background-color: @light-bg;
overflow: hidden;
height: 200px;
width: 200px;
}
.hub-skeleton {
background-color: @light-bg;
color: @light-bg;
max-width: 500px;
}
.hub-item-seller img { .hub-item-seller img {
width: 50px; width: 50px;
height: 50px; height: 50px;