[hub] Add 'See All' for Category items

- Also remove special `cursor: pointer` style
- Set it for all elements having a data-route
This commit is contained in:
Prateeksha Singh 2018-08-07 12:41:21 +05:30
parent 82b9508622
commit 318cca8cae
3 changed files with 24 additions and 11 deletions

View File

@ -5,11 +5,12 @@ function get_empty_state(message, action) {
</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>`
: '';

View File

@ -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 @@ erpnext.hub.Home = class Home extends SubPage {
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);
});
}

View File

@ -6,6 +6,10 @@ body[data-route^="marketplace/"] {
padding-right: 25px;
}
[data-route] {
cursor: pointer;
}
.layout-main-section {
border: none;
font-size: @text-medium;
@ -60,7 +64,6 @@ body[data-route^="marketplace/"] {
border: 1px solid @border-color;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
&:hover .hub-card-overlay {
display: block;
@ -146,8 +149,6 @@ body[data-route^="marketplace/"] {
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
&.active, &:hover:not(.is-title) {
border-color: @border-color;
}
@ -211,9 +212,14 @@ body[data-route^="marketplace/"] {
}
.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 @@ body[data-route^="marketplace/"] {
display: flex;
align-items: center;
padding: 8px 12px;
cursor: pointer;
&:not(.active) {
filter: grayscale(1);