Cleanup homepage
diff --git a/erpnext/public/js/hub/hub_listing.js b/erpnext/public/js/hub/hub_listing.js
index 0ff7970..9ac1b84 100644
--- a/erpnext/public/js/hub/hub_listing.js
+++ b/erpnext/public/js/hub/hub_listing.js
@@ -22,7 +22,7 @@
const title = this.page_title;
let iconHtml = `<img class="hub-icon" src="assets/erpnext/images/hub_logo.svg">`;
let titleHtml = `<span class="hub-page-title">${title}</span>`;
- this.page.set_title(iconHtml + titleHtml, '', false, title);
+ this.page.set_title(titleHtml, '', false, title);
}
setup_fields() {
@@ -36,6 +36,8 @@
});
}
+ setup_filter_area() { }
+
get_meta() {
return new Promise(resolve =>
frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve));
@@ -72,12 +74,12 @@
}
setup_sort_selector() {
- this.sort_selector = new frappe.ui.SortSelector({
- parent: this.filter_area.$filter_list_wrapper,
- doctype: this.doctype,
- args: this.order_by,
- onchange: () => this.refresh(true)
- });
+ // this.sort_selector = new frappe.ui.SortSelector({
+ // parent: this.filter_area.$filter_list_wrapper,
+ // doctype: this.doctype,
+ // args: this.order_by,
+ // onchange: () => this.refresh(true)
+ // });
}
setup_view() {
@@ -88,6 +90,21 @@
this.page.fields_dict[field].set_value(value);
}
}
+
+ const $hub_search = $(`
+ <div class="hub-search-container">
+ <input type="text" class="form-control" placeholder="Search for anything">
+ </div>`
+ );
+ this.$frappe_list.prepend($hub_search);
+ const $search_input = $hub_search.find('input');
+
+ $search_input.on('keydown', frappe.utils.debounce((e) => {
+ if (e.which === frappe.ui.keyCode.ENTER) {
+ this.search_value = $search_input.val();
+ this.refresh();
+ }
+ }, 300));
}
get_args() {
@@ -146,7 +163,10 @@
if (this.start === 0) {
// ${this.getHeaderHtml()}
this.$result.html(`
- <div class="image-view-container small">
+ <div class="row hub-card-container">
+ <div class="col-md-12 margin-bottom">
+ <b>Recently Published</b>
+ </div>
${html}
</div>
`);
@@ -366,23 +386,23 @@
}
bootstrap_data(response) {
- let companies = response.companies.map(d => d.name);
- this.custom_filter_configs = [
- {
- fieldtype: 'Autocomplete',
- label: __('Select Company'),
- condition: 'like',
- fieldname: 'company_name',
- options: companies
- },
- {
- fieldtype: 'Link',
- label: __('Select Country'),
- options: 'Country',
- condition: 'like',
- fieldname: 'country'
- }
- ];
+ // let companies = response.companies.map(d => d.name);
+ // this.custom_filter_configs = [
+ // {
+ // fieldtype: 'Autocomplete',
+ // label: __('Select Company'),
+ // condition: 'like',
+ // fieldname: 'company_name',
+ // options: companies
+ // },
+ // {
+ // fieldtype: 'Link',
+ // label: __('Select Country'),
+ // options: 'Country',
+ // condition: 'like',
+ // fieldname: 'country'
+ // }
+ // ];
}
prepareFormFields() {
@@ -414,6 +434,10 @@
setup_side_bar() {
super.setup_side_bar();
+ this.setup_new_sidebar();
+
+ return;
+
let $pitch = $(`<div class="border" style="
margin-top: 10px;
padding: 0px 10px;
@@ -458,22 +482,71 @@
}, __("Account"));
}
+ setup_new_sidebar() {
+ this.sidebar.$sidebar.append(`
+ <ul class="list-unstyled hub-sidebar-group">
+ <li class="hub-sidebar-item bold active">
+ Browse
+ </li>
+ <li class="hub-sidebar-item text-muted">
+ Favorites
+ </li>
+ <li class="hub-sidebar-item text-muted">
+ Become a seller
+ </li>
+ </ul>
+ `);
+
+ frappe.call('erpnext.hub_node.get_categories')
+ .then(r => {
+ const categories = r.message.map(d => d.value).sort();
+ const sidebar_items = [
+ `<li class="hub-sidebar-item bold is-title">
+ Category
+ </li>`,
+ `<li class="hub-sidebar-item active">
+ All
+ </li>`,
+ ...categories.map(category => `
+ <li class="hub-sidebar-item text-muted">
+ ${category}
+ </li>
+ `)
+ ];
+
+ this.sidebar.$sidebar.append(`
+ <ul class="list-unstyled">
+ ${sidebar_items.join('')}
+ </ul>
+ `);
+ });
+ }
+
update_category(label) {
this.current_category = (label=='All Categories') ? undefined : label;
this.refresh();
}
get_filters_for_args() {
- if(!this.filter_area) return;
- let filters = {};
- this.filter_area.get().forEach(f => {
- let field = f[1] !== 'name' ? f[1] : 'item_name';
- filters[field] = [f[2], f[3]];
- });
- if(this.current_category) {
- filters['hub_category'] = this.current_category;
+ const filter = {};
+
+ if (this.search_value) {
+ filter.item_name = ['like', `%${this.search_value}%`];
}
- return filters;
+
+ filter.image = ['like', 'http%'];
+ return filter;
+
+ // if(!this.filter_area) return;
+ // let filters = {};
+ // this.filter_area.get().forEach(f => {
+ // let field = f[1] !== 'name' ? f[1] : 'item_name';
+ // filters[field] = [f[2], f[3]];
+ // });
+ // if(this.current_category) {
+ // filters['hub_category'] = this.current_category;
+ // }
+ // return filters;
}
update_data(r) {
@@ -485,11 +558,14 @@
});
}
- item_html(item) {
+ item_html(item, index) {
item._name = encodeURI(item.name);
const encoded_name = item._name;
const title = strip_html(item[this.meta.title_field || 'name']);
- const _class = !item[this.imageFieldName] ? 'no-image' : '';
+
+ const img_url = item[this.imageFieldName];
+ const no_image = !img_url;
+ const _class = no_image ? 'no-image' : '';
const route = `#Hub/Item/${item.hub_item_code}`;
const company_name = item['company_name'];
@@ -507,41 +583,66 @@
if(i >= ratingAverage) starClass = 'fa-star-o';
ratingHtml += `<i class='fa fa-fw ${starClass} star-icon' data-index=${i}></i>`;
}
+ let dot_spacer = '<span aria-hidden="true"> · </span>';
+ let subtitle = '';
+ subtitle += comment_when(item.creation);
+ subtitle += dot_spacer;
+
+ if (ratingAverage > 0) {
+ subtitle += ratingAverage + `<i class='fa fa-fw fa-star-o'></i>`;
+ subtitle += dot_spacer;
+ }
+ subtitle += company_name;
let item_html = `
- <div class="image-view-item">
- <div class="image-view-header">
- <div class="list-row-col list-subject ellipsis level">
- <span class="level-item bold ellipsis" title="McGuffin">
- <a href="${route}">${title}</a>
- </span>
- </div>
- <div class="text-muted small" style="margin: 5px 0px;">
- ${ratingHtml}
- (${reviewLength})
- </div>
- <div class="list-row-col">
- <a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
- </div>
- </div>
- <div class="image-view-body">
- <a data-name="${encoded_name}"
- title="${encoded_name}"
- href="${route}"
- >
- <div class="image-field ${_class}"
- data-name="${encoded_name}"
- >
- <button class="btn btn-default zoom-view" data-name="${encoded_name}">
- <i class="octicon octicon-eye" data-name="${encoded_name}"></i>
- </button>
- <button class="btn btn-default like-button" data-name="${encoded_name}">
- <i class="octicon octicon-heart" data-name="${encoded_name}"></i>
- </button>
+ <div class="col-sm-3 col-xs-2">
+ <div class="hub-card">
+ <div class="hub-card-header">
+ <div class="list-row-col list-subject ellipsis level">
+ <span class="level-item bold ellipsis" title="McGuffin">
+ <a href="${route}">${title}</a>
+ </span>
</div>
- </a>
+ <div class="text-muted small" style="margin: 5px 0px;">
+ ${ratingHtml}
+ (${reviewLength})
+ </div>
+ <div class="list-row-col">
+ <a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
+ </div>
+ </div>
+ <div class="hub-card-body">
+ <a data-name="${encoded_name}"
+ title="${encoded_name}"
+ href="${route}"
+ >
+ <div class="image-field ${_class}"
+ data-name="${encoded_name}"
+ >
+ <button class="btn btn-default zoom-view" data-name="${encoded_name}">
+ <i class="octicon octicon-eye" data-name="${encoded_name}"></i>
+ </button>
+ <button class="btn btn-default like-button" data-name="${encoded_name}">
+ <i class="octicon octicon-heart" data-name="${encoded_name}"></i>
+ </button>
+ </div>
+ </a>
+ </div>
</div>
+ </div>
+ `;
+ item_html = `
+ <div class="col-md-3 col-sm-4 col-xs-6">
+ <div class="hub-card">
+ <div class="hub-card-header">
+ <div class="hub-card-title ellipsis bold">${title}</div>
+ <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ </div>
+ <div class="hub-card-body">
+ <img class="hub-card-image ${no_image ? 'no-image' : ''}" src="${img_url}" />
+ </div>
+ </div>
</div>
`;
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index bdca28f..ef08fde 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -6,8 +6,71 @@
height: 40px;
}
- .hub-page-title {
- margin-left: 10px;
+ .layout-main-section {
+ border: none;
+ }
+
+ .frappe-list {
+ padding-top: 25px;
+ font-size: @text-medium;
+
+ @media (max-width: @screen-xs) {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ }
+
+ .hub-card {
+ border: 1px solid @border-color;
+ margin-bottom: 25px;
+ border-radius: 4px;
+ overflow: hidden;
+ cursor: pointer;
+ }
+
+ .hub-card-header {
+ padding: 12px 15px;
+ height: 60px;
+ }
+
+ .hub-card-body {
+ height: 200px;
+ }
+
+ .hub-card-image {
+ min-width: 100%;
+ width: 100%;
+ }
+
+ .hub-search-container {
+ margin-bottom: 20px;
+
+ input {
+ font-size: @text-medium;
+ height: 32px;
+ }
+ }
+
+ .hub-sidebar {
+ padding-top: 25px;
+ padding-right: 15px;
+ }
+
+ .hub-sidebar-group {
+ margin-bottom: 10px;
+ }
+
+ .hub-sidebar-item {
+ padding: 5px 8px;
+ margin-bottom: 3px;
+ border-radius: 4px;
+ border: 1px solid transparent;
+
+ cursor: pointer;
+
+ &.active, &:hover:not(.is-title) {
+ border-color: @border-color;
+ }
}
.img-wrapper {