[hub] Add 'See All' for Category items
- Also remove special `cursor: pointer` style
- Set it for all elements having a data-route
diff --git a/erpnext/public/js/hub/helpers.js b/erpnext/public/js/hub/helpers.js
index 85143b7..7c4c919 100644
--- a/erpnext/public/js/hub/helpers.js
+++ b/erpnext/public/js/hub/helpers.js
@@ -5,11 +5,12 @@
</div>`;
}
-function get_item_card_container_html(items, title='', get_item_html = get_item_card_html) {
+function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
const items_html = (items || []).map(item => get_item_html(item)).join('');
const title_html = title
- ? `<div class="col-sm-12 margin-bottom">
+ ? `<div class="hub-card-container-header col-sm-12 margin-bottom flex">
<h4>${title}</h4>
+ ${action}
</div>`
: '';
diff --git a/erpnext/public/js/hub/pages/home.js b/erpnext/public/js/hub/pages/home.js
index b8e6f01..eefe3b8 100644
--- a/erpnext/public/js/hub/pages/home.js
+++ b/erpnext/public/js/hub/pages/home.js
@@ -1,5 +1,5 @@
import SubPage from './subpage';
-import { make_search_bar, get_item_card_container_html } from '../helpers';
+import { make_search_bar, get_item_card_container_html, get_item_card_html } from '../helpers';
erpnext.hub.Home = class Home extends SubPage {
make_wrapper() {
@@ -43,7 +43,14 @@
if (category_items) {
Object.keys(category_items).map(category => {
const items = category_items[category];
- html = get_item_card_container_html(items, __(category));
+ const see_all_link = `<p data-route="marketplace/category/${category}">See All</p>`;
+
+ html = get_item_card_container_html(
+ items,
+ __(category),
+ get_item_card_html,
+ see_all_link
+ );
this.$wrapper.append(html);
});
}
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index b0ddec4..d8ac9dd 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -6,6 +6,10 @@
padding-right: 25px;
}
+ [data-route] {
+ cursor: pointer;
+ }
+
.layout-main-section {
border: none;
font-size: @text-medium;
@@ -60,7 +64,6 @@
border: 1px solid @border-color;
border-radius: 4px;
overflow: hidden;
- cursor: pointer;
&:hover .hub-card-overlay {
display: block;
@@ -146,8 +149,6 @@
border-radius: 4px;
border: 1px solid transparent;
- cursor: pointer;
-
&.active, &:hover:not(.is-title) {
border-color: @border-color;
}
@@ -211,9 +212,14 @@
}
.hub-card-container {
- h4 {
- font-weight: 500;
- margin-top: 32px
+ .hub-card-container-header {
+ margin-top: 32px;
+ justify-content: space-between;
+ align-items: baseline;
+
+ h4 {
+ font-weight: 500;
+ }
}
}
@@ -235,7 +241,6 @@
display: flex;
align-items: center;
padding: 8px 12px;
- cursor: pointer;
&:not(.active) {
filter: grayscale(1);