Browse Source
* [hub] enable hub with OAuth token from user's client ID * [hub] settings schema for adding users * [hub] image view style listing * [hub] broken image link fallback * [wip] * [hub] bootstrap timeline * [hub] setup quick view * [hub] reformat ratings, add companies autocomplete filter * [hub] common listing frames * [hub] setup sort selector * [hub] timeline * [hub] customize list header * [hub] genuine form fieldtypes * [hub] review products * [hub] suggest missing categories remotely * [hub] Wishlist; header and title templates * [hub] link wishlist, remove company migration * [hub] calculate ratingsdevelop
Prateeksha Singh
7 years ago
committed by
Rushabh Mehta
Rushabh Mehta
24 changed files with 2000 additions and 691 deletions
@ -0,0 +1,8 @@ |
|||
// Copyright (c) 2018, Frappe Technologies Pvt. Ltd. and contributors
|
|||
// For license information, please see license.txt
|
|||
|
|||
frappe.ui.form.on('Hub Tracked Item', { |
|||
refresh: function(frm) { |
|||
|
|||
} |
|||
}); |
|||
@ -0,0 +1,93 @@ |
|||
{ |
|||
"allow_copy": 0, |
|||
"allow_guest_to_view": 0, |
|||
"allow_import": 0, |
|||
"allow_rename": 0, |
|||
"beta": 0, |
|||
"creation": "2018-03-18 09:33:50.267762", |
|||
"custom": 0, |
|||
"docstatus": 0, |
|||
"doctype": "DocType", |
|||
"document_type": "", |
|||
"editable_grid": 1, |
|||
"engine": "InnoDB", |
|||
"fields": [ |
|||
{ |
|||
"allow_bulk_edit": 0, |
|||
"allow_on_submit": 0, |
|||
"bold": 0, |
|||
"collapsible": 0, |
|||
"columns": 0, |
|||
"fieldname": "item_code", |
|||
"fieldtype": "Data", |
|||
"hidden": 0, |
|||
"ignore_user_permissions": 0, |
|||
"ignore_xss_filter": 0, |
|||
"in_filter": 0, |
|||
"in_global_search": 0, |
|||
"in_list_view": 0, |
|||
"in_standard_filter": 0, |
|||
"label": "Item Code", |
|||
"length": 0, |
|||
"no_copy": 0, |
|||
"permlevel": 0, |
|||
"precision": "", |
|||
"print_hide": 0, |
|||
"print_hide_if_no_value": 0, |
|||
"read_only": 0, |
|||
"remember_last_selected_value": 0, |
|||
"report_hide": 0, |
|||
"reqd": 0, |
|||
"search_index": 0, |
|||
"set_only_once": 0, |
|||
"translatable": 0, |
|||
"unique": 0 |
|||
} |
|||
], |
|||
"has_web_view": 0, |
|||
"hide_heading": 0, |
|||
"hide_toolbar": 0, |
|||
"idx": 0, |
|||
"image_view": 0, |
|||
"in_create": 1, |
|||
"is_submittable": 0, |
|||
"issingle": 0, |
|||
"istable": 0, |
|||
"max_attachments": 0, |
|||
"modified": "2018-03-18 09:34:01.757713", |
|||
"modified_by": "Administrator", |
|||
"module": "Hub Node", |
|||
"name": "Hub Tracked Item", |
|||
"name_case": "", |
|||
"owner": "Administrator", |
|||
"permissions": [ |
|||
{ |
|||
"amend": 0, |
|||
"apply_user_permissions": 0, |
|||
"cancel": 0, |
|||
"create": 1, |
|||
"delete": 1, |
|||
"email": 1, |
|||
"export": 1, |
|||
"if_owner": 0, |
|||
"import": 0, |
|||
"permlevel": 0, |
|||
"print": 1, |
|||
"read": 1, |
|||
"report": 1, |
|||
"role": "System Manager", |
|||
"set_user_permissions": 0, |
|||
"share": 1, |
|||
"submit": 0, |
|||
"write": 1 |
|||
} |
|||
], |
|||
"quick_entry": 1, |
|||
"read_only": 1, |
|||
"read_only_onload": 0, |
|||
"show_name_in_global_search": 0, |
|||
"sort_field": "modified", |
|||
"sort_order": "DESC", |
|||
"track_changes": 1, |
|||
"track_seen": 0 |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
# -*- coding: utf-8 -*- |
|||
# Copyright (c) 2018, Frappe Technologies Pvt. Ltd. and contributors |
|||
# For license information, please see license.txt |
|||
|
|||
from __future__ import unicode_literals |
|||
import frappe |
|||
from frappe.model.document import Document |
|||
|
|||
class HubTrackedItem(Document): |
|||
pass |
|||
@ -0,0 +1,23 @@ |
|||
/* eslint-disable */ |
|||
// rename this file from _test_[name] to test_[name] to activate
|
|||
// and remove above this line
|
|||
|
|||
QUnit.test("test: Hub Tracked Item", function (assert) { |
|||
let done = assert.async(); |
|||
|
|||
// number of asserts
|
|||
assert.expect(1); |
|||
|
|||
frappe.run_serially([ |
|||
// insert a new Hub Tracked Item
|
|||
() => frappe.tests.make('Hub Tracked Item', [ |
|||
// values to be set
|
|||
{key: 'value'} |
|||
]), |
|||
() => { |
|||
assert.equal(cur_frm.doc.key, 'value'); |
|||
}, |
|||
() => done() |
|||
]); |
|||
|
|||
}); |
|||
@ -0,0 +1,10 @@ |
|||
# -*- coding: utf-8 -*- |
|||
# Copyright (c) 2018, Frappe Technologies Pvt. Ltd. and Contributors |
|||
# See license.txt |
|||
from __future__ import unicode_literals |
|||
|
|||
import frappe |
|||
import unittest |
|||
|
|||
class TestHubTrackedItem(unittest.TestCase): |
|||
pass |
|||
@ -0,0 +1,72 @@ |
|||
{ |
|||
"allow_copy": 0, |
|||
"allow_guest_to_view": 0, |
|||
"allow_import": 0, |
|||
"allow_rename": 0, |
|||
"beta": 0, |
|||
"creation": "2018-03-06 04:38:49.891787", |
|||
"custom": 0, |
|||
"docstatus": 0, |
|||
"doctype": "DocType", |
|||
"document_type": "", |
|||
"editable_grid": 1, |
|||
"engine": "InnoDB", |
|||
"fields": [ |
|||
{ |
|||
"allow_bulk_edit": 0, |
|||
"allow_on_submit": 0, |
|||
"bold": 0, |
|||
"collapsible": 0, |
|||
"columns": 0, |
|||
"fieldname": "user", |
|||
"fieldtype": "Link", |
|||
"hidden": 0, |
|||
"ignore_user_permissions": 0, |
|||
"ignore_xss_filter": 0, |
|||
"in_filter": 0, |
|||
"in_global_search": 0, |
|||
"in_list_view": 1, |
|||
"in_standard_filter": 0, |
|||
"label": "User", |
|||
"length": 0, |
|||
"no_copy": 0, |
|||
"options": "User", |
|||
"permlevel": 0, |
|||
"precision": "", |
|||
"print_hide": 0, |
|||
"print_hide_if_no_value": 0, |
|||
"read_only": 0, |
|||
"remember_last_selected_value": 0, |
|||
"report_hide": 0, |
|||
"reqd": 1, |
|||
"search_index": 0, |
|||
"set_only_once": 0, |
|||
"unique": 0 |
|||
} |
|||
], |
|||
"has_web_view": 0, |
|||
"hide_heading": 0, |
|||
"hide_toolbar": 0, |
|||
"idx": 0, |
|||
"image_view": 0, |
|||
"in_create": 0, |
|||
"is_submittable": 0, |
|||
"issingle": 0, |
|||
"istable": 1, |
|||
"max_attachments": 0, |
|||
"modified": "2018-03-06 04:41:17.916243", |
|||
"modified_by": "Administrator", |
|||
"module": "Hub Node", |
|||
"name": "Hub Users", |
|||
"name_case": "", |
|||
"owner": "test1@example.com", |
|||
"permissions": [], |
|||
"quick_entry": 1, |
|||
"read_only": 0, |
|||
"read_only_onload": 0, |
|||
"show_name_in_global_search": 0, |
|||
"sort_field": "modified", |
|||
"sort_order": "DESC", |
|||
"track_changes": 1, |
|||
"track_seen": 0 |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
# -*- coding: utf-8 -*- |
|||
# Copyright (c) 2018, Frappe Technologies Pvt. Ltd. and contributors |
|||
# For license information, please see license.txt |
|||
|
|||
from __future__ import unicode_literals |
|||
import frappe |
|||
from frappe.model.document import Document |
|||
|
|||
class HubUsers(Document): |
|||
pass |
|||
@ -1,130 +0,0 @@ |
|||
body[data-route^="Hub/"] .freeze .image-view-container .list-row-col { |
|||
background-color: #fafbfc; |
|||
color: #fafbfc; |
|||
} |
|||
body[data-route^="Hub/"] .freeze .image-view-container .placeholder-text { |
|||
color: #fafbfc; |
|||
} |
|||
body[data-route^="Hub/"] .freeze { |
|||
display: none; |
|||
} |
|||
body[data-route^="Hub/"] .image-view-container { |
|||
justify-content: space-around; |
|||
} |
|||
.img-wrapper { |
|||
border: 1px solid #d1d8dd; |
|||
border-radius: 3px; |
|||
padding: 12px; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
} |
|||
.img-wrapper .helper { |
|||
height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
/* hub */ |
|||
div[data-page-route="hub"] .page-head { |
|||
height: 80px; |
|||
} |
|||
div[data-page-route="hub"] .page-head .title-text { |
|||
cursor: pointer; |
|||
} |
|||
div[data-page-route="hub"] .page-content { |
|||
margin-top: 80px; |
|||
} |
|||
div[data-page-route="hub"] .page-title h1 { |
|||
margin-bottom: 0px; |
|||
} |
|||
div[data-page-route="hub"] .account-details { |
|||
margin-top: 20px; |
|||
} |
|||
div[data-page-route="hub"] [data-original-title="Search"] { |
|||
float: right; |
|||
width: 220px; |
|||
} |
|||
div[data-page-route="hub"] .hub-main-section { |
|||
padding: 30px; |
|||
} |
|||
div[data-page-route="hub"] .listing-body { |
|||
margin: 0; |
|||
} |
|||
div[data-page-route="hub"] .main-list-section { |
|||
padding: 0; |
|||
} |
|||
div[data-page-route="hub"] .side-list-section { |
|||
padding: 0; |
|||
} |
|||
div[data-page-route="hub"] .item-list-header h3 { |
|||
font-weight: normal; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page h2 { |
|||
margin-top: 10px; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .item-header { |
|||
display: flex; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .item-page-image { |
|||
flex: 1; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .title-content { |
|||
flex: 3; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .title-content .description { |
|||
margin: 30px 0px; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .title-content .actions { |
|||
margin-top: 30px; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .title-content .actions .rfq-btn.disabled { |
|||
background-color: #b1bdca; |
|||
color: #fff; |
|||
border-color: #b1bdca; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-page .company-items { |
|||
margin-top: 40px; |
|||
} |
|||
div[data-page-route="hub"] .company-header { |
|||
display: flex; |
|||
} |
|||
div[data-page-route="hub"] .item-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-wrapper { |
|||
margin-bottom: 20px; |
|||
} |
|||
div[data-page-route="hub"] .img-wrapper { |
|||
border: 1px solid #d1d8dd; |
|||
border-radius: 3px; |
|||
padding: 12px; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
} |
|||
div[data-page-route="hub"] .img-wrapper img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
div[data-page-route="hub"] .img-wrapper .helper { |
|||
height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
div[data-page-route="hub"] .img-wrapper .standard-image { |
|||
font-size: 72px; |
|||
border: none; |
|||
background-color: #fafbfc; |
|||
} |
|||
div[data-page-route="hub"] .hub-item-title { |
|||
width: 100%; |
|||
} |
|||
div[data-page-route="hub"] .breadcrumb { |
|||
padding-left: 0; |
|||
padding-top: 0; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 8.2 KiB |
@ -0,0 +1,665 @@ |
|||
frappe.provide('erpnext.hub'); |
|||
|
|||
erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { |
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.page_title = __(''); |
|||
this.method = 'erpnext.hub_node.get_list'; |
|||
|
|||
this.cache = {}; |
|||
|
|||
const route = frappe.get_route(); |
|||
this.page_name = route[1]; |
|||
|
|||
this.menu_items = this.menu_items.concat(this.get_menu_items()); |
|||
|
|||
this.imageFieldName = 'image'; |
|||
|
|||
this.show_filters = 0; |
|||
} |
|||
|
|||
set_title() { |
|||
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); |
|||
} |
|||
|
|||
setup_fields() { |
|||
return this.get_meta() |
|||
.then(r => { |
|||
this.meta = r.message.meta || this.meta; |
|||
frappe.model.sync(this.meta); |
|||
this.bootstrap_data(r.message); |
|||
|
|||
this.prepareFormFields(); |
|||
}); |
|||
} |
|||
|
|||
get_meta() { |
|||
return new Promise(resolve => |
|||
frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve)); |
|||
} |
|||
|
|||
set_breadcrumbs() { } |
|||
|
|||
prepareFormFields() { } |
|||
|
|||
bootstrap_data() { } |
|||
|
|||
get_menu_items() { |
|||
const items = [ |
|||
{ |
|||
label: __('Hub Settings'), |
|||
action: () => frappe.set_route('Form', 'Hub Settings'), |
|||
standard: true |
|||
}, |
|||
{ |
|||
label: __('Favourites'), |
|||
action: () => frappe.set_route('Hub', 'Favourites'), |
|||
standard: true |
|||
}, |
|||
// {
|
|||
// label: __('Toggle Sidebar'),
|
|||
// action: () => this.toggle_side_bar(),
|
|||
// standard: true
|
|||
// }
|
|||
]; |
|||
|
|||
return items; |
|||
} |
|||
|
|||
setup_side_bar() { |
|||
this.sidebar = new frappe.ui.Sidebar({ |
|||
wrapper: this.page.wrapper.find('.layout-side-section'), |
|||
css_class: 'hub-sidebar' |
|||
}); |
|||
} |
|||
|
|||
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) |
|||
}); |
|||
} |
|||
|
|||
setup_view() { } |
|||
|
|||
get_args() { |
|||
return { |
|||
doctype: this.doctype, |
|||
start: this.start, |
|||
limit: this.page_length, |
|||
order_by: this.order_by, |
|||
// fields: this.fields,
|
|||
filters: this.get_filters_for_args() |
|||
}; |
|||
} |
|||
|
|||
update_data(r) { |
|||
const data = r.message; |
|||
|
|||
if (this.start === 0) { |
|||
this.data = data; |
|||
} else { |
|||
this.data = this.data.concat(data); |
|||
} |
|||
|
|||
this.data_dict = {}; |
|||
} |
|||
|
|||
freeze(toggle) { |
|||
// if(!this.$freeze) return;
|
|||
// this.$freeze.toggle(toggle);
|
|||
// if (this.$freeze.find('.image-view-container').length) return;
|
|||
|
|||
// const html = Array.from(new Array(4)).map(d => this.card_html({
|
|||
// name: 'Loading...',
|
|||
// item_name: 'Loading...'
|
|||
// })).join('');
|
|||
|
|||
// this.$freeze.html(`<div class="image-view-container border-top">${html}</div>`);
|
|||
} |
|||
|
|||
render() { |
|||
this.data_dict = {}; |
|||
this.render_image_view(); |
|||
|
|||
this.setup_quick_view(); |
|||
this.setup_like(); |
|||
} |
|||
|
|||
render_offline_card() { |
|||
let html = `<div class='page-card'>
|
|||
<div class='page-card-head'> |
|||
<span class='indicator red'> |
|||
{{ _("Payment Cancelled") }}</span> |
|||
</div> |
|||
<p>${ __("Your payment is cancelled.") }</p> |
|||
<div><a href='' class='btn btn-primary btn-sm'> |
|||
${ __("Continue") }</a></div> |
|||
</div>`; |
|||
|
|||
let page = this.page.wrapper.find('.layout-side-section') |
|||
page.append(html); |
|||
|
|||
return; |
|||
} |
|||
|
|||
render_image_view() { |
|||
var html = this.data.map(this.item_html.bind(this)).join(""); |
|||
|
|||
if (this.start === 0) { |
|||
// this.renderHeader();
|
|||
this.$result.html(` |
|||
${this.getHeaderHtml()} |
|||
<div class="image-view-container small"> |
|||
${html} |
|||
</div> |
|||
`);
|
|||
} |
|||
|
|||
if(this.data.length) { |
|||
this.doc = this.data[0]; |
|||
} |
|||
|
|||
this.data.map(this.loadImage.bind(this)); |
|||
|
|||
this.data_dict = {}; |
|||
this.data.map(d => { |
|||
this.data_dict[d.hub_item_code] = d; |
|||
}); |
|||
} |
|||
|
|||
getHeaderHtml() { |
|||
// let company_html =
|
|||
return ` |
|||
<header class="list-row-head text-muted small"> |
|||
<div style="display: flex;"> |
|||
<div class="list-header-icon"> |
|||
<img title="Riadco%20Group" alt="Riadco Group" src="https://cdn.pbrd.co/images/HdaPxcg.png"> |
|||
</div> |
|||
<div class="list-header-info"> |
|||
<h5>Riadco Group</h5> |
|||
<span class="margin-vertical-10 level-item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam</span> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
`;
|
|||
} |
|||
|
|||
renderHeader() { |
|||
return `<header class="level list-row-head text-muted small">
|
|||
<div class="level-left list-header-subject"> |
|||
<div class="list-row-col list-subject level "> |
|||
<img title="Riadco%20Group" alt="Riadco Group" src="https://cdn.pbrd.co/images/HdaPxcg.png"> |
|||
<span class="level-item">Products by Blah blah</span> |
|||
</div> |
|||
</div> |
|||
<div class="level-left checkbox-actions"> |
|||
<div class="level list-subject"> |
|||
<input class="level-item list-check-all hidden-xs" type="checkbox" title="${__("Select All")}"> |
|||
<span class="level-item list-header-meta"></span> |
|||
</div> |
|||
</div> |
|||
<div class="level-right"> |
|||
${''} |
|||
</div> |
|||
</header>`; |
|||
} |
|||
|
|||
get_image_html(encoded_name, src, alt_text) { |
|||
return `<img data-name="${encoded_name}" src="${ src }" alt="${ alt_text }">`; |
|||
} |
|||
|
|||
get_image_placeholder(title) { |
|||
return `<span class="placeholder-text">${ frappe.get_abbr(title) }</span>`; |
|||
} |
|||
|
|||
loadImage(item) { |
|||
item._name = encodeURI(item.name); |
|||
const encoded_name = item._name; |
|||
const title = strip_html(item[this.meta.title_field || 'name']); |
|||
|
|||
let placeholder = this.get_image_placeholder(title); |
|||
let $container = this.$result.find(`.image-field[data-name="${encoded_name}"]`); |
|||
|
|||
if(!item[this.imageFieldName]) { |
|||
$container.prepend(placeholder); |
|||
$container.addClass('no-image'); |
|||
} |
|||
|
|||
frappe.load_image(item[this.imageFieldName], |
|||
(imageObj) => { |
|||
$container.prepend(imageObj) |
|||
}, |
|||
() => { |
|||
$container.prepend(placeholder); |
|||
$container.addClass('no-image'); |
|||
}, |
|||
(imageObj) => { |
|||
imageObj.title = encoded_name; |
|||
imageObj.alt = title; |
|||
} |
|||
) |
|||
} |
|||
|
|||
item_html(item) { |
|||
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 route = `#Hub/Item/${item.hub_item_code}`; |
|||
const company_name = item['company_name']; |
|||
|
|||
const reviewLength = (item.reviews || []).length; |
|||
const ratingAverage = reviewLength |
|||
? item.reviews |
|||
.map(r => r.rating) |
|||
.reduce((a, b) => (a + b, 0))/reviewLength |
|||
: -1; |
|||
|
|||
let ratingHtml = ``; |
|||
|
|||
for(var i = 0; i < 5; i++) { |
|||
let starClass = 'fa-star'; |
|||
if(i >= ratingAverage) starClass = 'fa-star-o'; |
|||
ratingHtml += `<i class='fa fa-fw ${starClass} star-icon' data-index=${i}></i>`; |
|||
} |
|||
|
|||
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}"><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> |
|||
</a> |
|||
</div> |
|||
|
|||
</div> |
|||
`;
|
|||
|
|||
return item_html; |
|||
} |
|||
|
|||
setup_quick_view() { |
|||
if(this.quick_view) return; |
|||
|
|||
this.quick_view = new frappe.ui.Dialog({ |
|||
title: 'Quick View', |
|||
fields: this.formFields |
|||
}); |
|||
this.$result.on('click', '.btn.zoom-view', (e) => { |
|||
e.preventDefault(); |
|||
e.stopPropagation(); |
|||
var name = $(e.target).attr('data-name'); |
|||
name = decodeURIComponent(name); |
|||
|
|||
this.quick_view.set_title(name); |
|||
let values = this.data_dict[name]; |
|||
this.quick_view.set_values(values); |
|||
|
|||
let fields = []; |
|||
|
|||
this.quick_view.show(); |
|||
|
|||
return false; |
|||
}); |
|||
} |
|||
|
|||
setup_like() { |
|||
if(this.setup_like_done) return; |
|||
this.setup_like_done = 1; |
|||
this.$result.on('click', '.btn.like-button', (e) => { |
|||
if($(e.target).hasClass('changing')) return; |
|||
$(e.target).addClass('changing'); |
|||
|
|||
e.preventDefault(); |
|||
e.stopPropagation(); |
|||
|
|||
var name = $(e.target).attr('data-name'); |
|||
name = decodeURIComponent(name); |
|||
let values = this.data_dict[name]; |
|||
|
|||
let heart = $(e.target); |
|||
if(heart.hasClass('like-button')) { |
|||
heart = $(e.target).find('.octicon'); |
|||
} |
|||
|
|||
let remove = 1; |
|||
|
|||
if(heart.hasClass('liked')) { |
|||
// unlike
|
|||
heart.removeClass('liked'); |
|||
} else { |
|||
// like
|
|||
remove = 0; |
|||
heart.addClass('liked'); |
|||
} |
|||
|
|||
frappe.call({ |
|||
method: 'erpnext.hub_node.update_wishlist_item', |
|||
args: { |
|||
item_name: values.hub_item_code, |
|||
remove: remove |
|||
}, |
|||
callback: (r) => { |
|||
let message = __("Added to Favourites"); |
|||
if(remove) { |
|||
message = __("Removed from Favourites"); |
|||
} |
|||
frappe.show_alert(message); |
|||
}, |
|||
freeze: true |
|||
}); |
|||
|
|||
$(e.target).removeClass('changing'); |
|||
return false; |
|||
}); |
|||
} |
|||
} |
|||
|
|||
erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing { |
|||
constructor(opts) { |
|||
super(opts); |
|||
this.show(); |
|||
} |
|||
|
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.doctype = 'Hub Item'; |
|||
this.page_title = __('Products'); |
|||
this.fields = ['name', 'hub_item_code', 'image', 'item_name', 'item_code', 'company_name', 'description', 'country']; |
|||
this.filters = []; |
|||
} |
|||
|
|||
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' |
|||
} |
|||
]; |
|||
} |
|||
|
|||
prepareFormFields() { |
|||
let fieldnames = ['item_name', 'description', 'company_name', 'country']; |
|||
this.formFields = this.meta.fields |
|||
.filter(field => fieldnames.includes(field.fieldname)) |
|||
.map(field => { |
|||
let { |
|||
label, |
|||
fieldname, |
|||
fieldtype, |
|||
} = field; |
|||
let read_only = 1; |
|||
return { |
|||
label, |
|||
fieldname, |
|||
fieldtype, |
|||
read_only, |
|||
}; |
|||
}); |
|||
|
|||
this.formFields.unshift({ |
|||
label: 'image', |
|||
fieldname: 'image', |
|||
fieldtype: 'Attach Image' |
|||
}); |
|||
} |
|||
|
|||
setup_side_bar() { |
|||
super.setup_side_bar(); |
|||
|
|||
let $pitch = $(`<div class="border" style="
|
|||
margin-top: 10px; |
|||
padding: 0px 10px; |
|||
border-radius: 3px; |
|||
"> |
|||
<h5>Sell on HubMarket</h5> |
|||
<p>Over 2000 products listed. Register your company to start selling.</p> |
|||
</div>`); |
|||
|
|||
this.sidebar.$sidebar.append($pitch); |
|||
|
|||
this.category_tree = new frappe.ui.Tree({ |
|||
parent: this.sidebar.$sidebar, |
|||
label: 'All Categories', |
|||
expandable: true, |
|||
|
|||
args: {parent: this.current_category}, |
|||
method: 'erpnext.hub_node.get_categories', |
|||
on_click: (node) => { |
|||
this.update_category(node.label); |
|||
} |
|||
}); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: __('Companies'), |
|||
on_click: () => frappe.set_route('Hub', 'Company') |
|||
}, undefined, true); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: this.hub_settings.company, |
|||
on_click: () => frappe.set_route('Form', 'Company', this.hub_settings.company) |
|||
}, __("Account")); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: __("Favourites"), |
|||
on_click: () => frappe.set_route('Hub', 'Favourites') |
|||
}, __("Account")); |
|||
} |
|||
|
|||
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; |
|||
} |
|||
return filters; |
|||
} |
|||
|
|||
update_data(r) { |
|||
super.update_data(r); |
|||
|
|||
this.data_dict = {}; |
|||
this.data.map(d => { |
|||
this.data_dict[d.hub_item_code] = d; |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
erpnext.hub.Favourites = class Favourites extends erpnext.hub.ItemListing { |
|||
constructor(opts) { |
|||
super(opts); |
|||
this.show(); |
|||
} |
|||
|
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.doctype = 'Hub Item'; |
|||
this.page_title = __('Favourites'); |
|||
this.fields = ['name', 'hub_item_code', 'image', 'item_name', 'item_code', 'company_name', 'description', 'country']; |
|||
this.filters = []; |
|||
this.method = 'erpnext.hub_node.get_item_favourites'; |
|||
} |
|||
|
|||
setup_filter_area() { } |
|||
|
|||
setup_sort_selector() { } |
|||
|
|||
// setupHe
|
|||
|
|||
getHeaderHtml() { |
|||
return ''; |
|||
} |
|||
|
|||
get_args() { |
|||
return { |
|||
start: this.start, |
|||
limit: this.page_length, |
|||
order_by: this.order_by, |
|||
fields: this.fields |
|||
}; |
|||
} |
|||
|
|||
bootstrap_data(response) { } |
|||
|
|||
prepareFormFields() { } |
|||
|
|||
setup_side_bar() { |
|||
this.sidebar = new frappe.ui.Sidebar({ |
|||
wrapper: this.page.wrapper.find('.layout-side-section'), |
|||
css_class: 'hub-sidebar' |
|||
}); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: __('Back to Products'), |
|||
on_click: () => frappe.set_route('Hub', 'Item') |
|||
}); |
|||
|
|||
// this.sidebar.add_item({
|
|||
// label: this.hub_settings.company,
|
|||
// on_click: () => frappe.set_route('Form', 'Company', this.hub_settings.company)
|
|||
// }, __("Account"));
|
|||
|
|||
// this.sidebar.add_item({
|
|||
// label: __("My Orders"),
|
|||
// on_click: () => frappe.set_route('List', 'Request for Quotation')
|
|||
// }, __("Account"));
|
|||
} |
|||
|
|||
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; |
|||
} |
|||
return filters; |
|||
} |
|||
|
|||
update_data(r) { |
|||
super.update_data(r); |
|||
|
|||
this.data_dict = {}; |
|||
this.data.map(d => { |
|||
this.data_dict[d.hub_item_code] = d; |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
erpnext.hub.CompanyListing = class CompanyListing extends erpnext.hub.HubListing { |
|||
constructor(opts) { |
|||
super(opts); |
|||
this.show(); |
|||
} |
|||
|
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.doctype = 'Hub Company'; |
|||
this.page_title = __('Companies'); |
|||
this.fields = ['company_logo', 'name', 'site_name', 'seller_city', 'seller_description', 'seller', 'country', 'company_name']; |
|||
this.filters = []; |
|||
this.custom_filter_configs = [ |
|||
{ |
|||
fieldtype: 'Link', |
|||
label: 'Country', |
|||
options: 'Country', |
|||
condition: 'like', |
|||
fieldname: 'country' |
|||
} |
|||
]; |
|||
this.imageFieldName = 'company_logo'; |
|||
} |
|||
|
|||
get_filters_for_args() { |
|||
let filters = {}; |
|||
this.filter_area.get().forEach(f => { |
|||
let field = f[1] !== 'name' ? f[1] : 'company_name'; |
|||
filters[field] = [f[2], f[3]]; |
|||
}); |
|||
return filters; |
|||
} |
|||
|
|||
card_html(company) { |
|||
company._name = encodeURI(company.name); |
|||
const route = `#Hub/Company/${company.company_name}`; |
|||
|
|||
let image_html = company.company_logo ? |
|||
`<img src="${company.company_logo}"><span class="helper"></span>` : |
|||
`<div class="standard-image">${frappe.get_abbr(company.company_name)}</div>`; |
|||
|
|||
return ` |
|||
<div class="hub-item-wrapper margin-bottom" style="width: 200px;"> |
|||
<a href="${route}"> |
|||
<div class="hub-item-image"> |
|||
<div class="img-wrapper" style="height: 200px; width: 200px"> |
|||
${ image_html } |
|||
</div> |
|||
</div> |
|||
<div class="hub-item-title"> |
|||
<h5 class="bold"> |
|||
${ company.company_name } |
|||
</h5> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
`;
|
|||
} |
|||
}; |
|||
@ -1,244 +0,0 @@ |
|||
frappe.provide('erpnext.hub'); |
|||
|
|||
erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { |
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.page_title = __('Hub'); |
|||
this.method = 'erpnext.hub_node.get_list'; |
|||
|
|||
const route = frappe.get_route(); |
|||
this.page_name = route[1]; |
|||
} |
|||
|
|||
setup_fields() { |
|||
return this.get_meta() |
|||
.then(r => { |
|||
this.meta = r.message || this.meta; |
|||
frappe.model.sync(this.meta); |
|||
}); |
|||
} |
|||
|
|||
get_meta() { |
|||
return new Promise(resolve => |
|||
frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve)); |
|||
} |
|||
|
|||
set_breadcrumbs() { } |
|||
|
|||
setup_side_bar() { |
|||
this.sidebar = new frappe.ui.Sidebar({ |
|||
wrapper: this.page.wrapper.find('.layout-side-section'), |
|||
css_class: 'hub-sidebar' |
|||
}); |
|||
} |
|||
|
|||
setup_sort_selector() { } |
|||
|
|||
setup_view() { } |
|||
|
|||
get_args() { |
|||
return { |
|||
doctype: this.doctype, |
|||
start: this.start, |
|||
limit: this.page_length, |
|||
order_by: this.order_by, |
|||
fields: this.fields, |
|||
filters: this.get_filters_for_args() |
|||
}; |
|||
} |
|||
|
|||
update_data(r) { |
|||
const data = r.message; |
|||
|
|||
if (this.start === 0) { |
|||
this.data = data; |
|||
} else { |
|||
this.data = this.data.concat(data); |
|||
} |
|||
|
|||
} |
|||
|
|||
freeze(toggle) { |
|||
this.$freeze.toggle(toggle); |
|||
if (this.$freeze.find('.image-view-container').length) return; |
|||
|
|||
const html = Array.from(new Array(4)).map(d => this.card_html({ |
|||
name: 'Loading...', |
|||
item_name: 'Loading...' |
|||
})).join(''); |
|||
|
|||
this.$freeze.html(`<div class="image-view-container border-top">${html}</div>`); |
|||
} |
|||
|
|||
render() { |
|||
this.render_image_view(); |
|||
} |
|||
|
|||
render_image_view() { |
|||
let data = this.data; |
|||
if (this.start === 0) { |
|||
this.$result.html('<div class="image-view-container small padding-top">'); |
|||
data = this.data.slice(this.start); |
|||
} |
|||
|
|||
var html = data.map(this.card_html.bind(this)).join(""); |
|||
this.$result.find('.image-view-container').append(html); |
|||
} |
|||
} |
|||
|
|||
erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing { |
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.doctype = 'Hub Item'; |
|||
this.fields = ['name', 'hub_item_code', 'image', 'item_name', 'item_code', 'company_name']; |
|||
this.filters = []; |
|||
this.custom_filter_configs = [ |
|||
{ |
|||
fieldtype: 'Data', |
|||
label: 'Company', |
|||
condition: 'like', |
|||
fieldname: 'company_name', |
|||
}, |
|||
{ |
|||
fieldtype: 'Link', |
|||
label: 'Country', |
|||
options: 'Country', |
|||
condition: 'like', |
|||
fieldname: 'country' |
|||
} |
|||
]; |
|||
} |
|||
|
|||
setup_side_bar() { |
|||
super.setup_side_bar(); |
|||
this.category_tree = new frappe.ui.Tree({ |
|||
parent: this.sidebar.$sidebar, |
|||
label: 'All Categories', |
|||
expandable: true, |
|||
|
|||
args: {parent: this.current_category}, |
|||
method: 'erpnext.hub_node.get_categories', |
|||
on_click: (node) => { |
|||
this.update_category(node.label); |
|||
} |
|||
}); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: __('Companies'), |
|||
on_click: () => frappe.set_route('Hub', 'Company') |
|||
}); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: this.hub_settings.company, |
|||
on_click: () => frappe.set_route('Form', 'Company', this.hub_settings.company) |
|||
}, __("Account")); |
|||
|
|||
this.sidebar.add_item({ |
|||
label: __("My Orders"), |
|||
on_click: () => frappe.set_route('List', 'Request for Quotation') |
|||
}, __("Account")); |
|||
} |
|||
|
|||
update_category(label) { |
|||
this.current_category = (label=='All Categories') ? undefined : label; |
|||
this.refresh(); |
|||
} |
|||
|
|||
get_filters_for_args() { |
|||
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; |
|||
} |
|||
|
|||
card_html(item) { |
|||
item._name = encodeURI(item.name); |
|||
const encoded_name = item._name; |
|||
const title = strip_html(item['item_name' || 'item_code']); |
|||
const company_name = item['company_name']; |
|||
|
|||
const route = `#Hub/Item/${item.hub_item_code}`; |
|||
|
|||
const image_html = item.image ? |
|||
`<img src="${item.image}">
|
|||
<span class="helper"></span>` : |
|||
`<div class="standard-image">${frappe.get_abbr(title)}</div>`; |
|||
|
|||
return ` |
|||
<div class="hub-item-wrapper margin-bottom" style="width: 200px;"> |
|||
<a href="${route}"> |
|||
<div class="hub-item-image"> |
|||
<div class="img-wrapper" style="height: 200px; width: 200px"> |
|||
${ image_html } |
|||
</div> |
|||
</div> |
|||
<div class="hub-item-title"> |
|||
<h5 class="bold"> |
|||
${ title } |
|||
</h5> |
|||
|
|||
</div> |
|||
</a> |
|||
<a href="${'#Hub/Company/'+company_name}"><p>${ company_name }</p></a> |
|||
</div> |
|||
`;
|
|||
} |
|||
}; |
|||
|
|||
erpnext.hub.CompanyListing = class CompanyListing extends erpnext.hub.HubListing { |
|||
setup_defaults() { |
|||
super.setup_defaults(); |
|||
this.doctype = 'Hub Company'; |
|||
this.fields = ['company_logo', 'name', 'site_name', 'seller_city', 'seller_description', 'seller', 'country', 'company_name']; |
|||
this.filters = []; |
|||
this.custom_filter_configs = [ |
|||
{ |
|||
fieldtype: 'Link', |
|||
label: 'Country', |
|||
options: 'Country', |
|||
condition: 'like', |
|||
fieldname: 'country' |
|||
} |
|||
]; |
|||
} |
|||
|
|||
get_filters_for_args() { |
|||
let filters = {}; |
|||
this.filter_area.get().forEach(f => { |
|||
let field = f[1] !== 'name' ? f[1] : 'company_name'; |
|||
filters[field] = [f[2], f[3]]; |
|||
}); |
|||
return filters; |
|||
} |
|||
|
|||
card_html(company) { |
|||
company._name = encodeURI(company.name); |
|||
const route = `#Hub/Company/${company.company_name}`; |
|||
|
|||
let image_html = company.company_logo ? |
|||
`<img src="${company.company_logo}"><span class="helper"></span>` : |
|||
`<div class="standard-image">${frappe.get_abbr(company.company_name)}</div>`; |
|||
|
|||
return ` |
|||
<div class="hub-item-wrapper margin-bottom" style="width: 200px;"> |
|||
<a href="${route}"> |
|||
<div class="hub-item-image"> |
|||
<div class="img-wrapper" style="height: 200px; width: 200px"> |
|||
${ image_html } |
|||
</div> |
|||
</div> |
|||
<div class="hub-item-title"> |
|||
<h5 class="bold"> |
|||
${ company.company_name } |
|||
</h5> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
`;
|
|||
} |
|||
}; |
|||
@ -1,176 +1,109 @@ |
|||
@import "../../../../frappe/frappe/public/less/variables.less"; |
|||
|
|||
body[data-route^="Hub/"] { |
|||
.freeze .image-view-container { |
|||
.list-row-col { |
|||
background-color: @light-bg; |
|||
color: @light-bg; |
|||
} |
|||
|
|||
.placeholder-text { |
|||
color: @light-bg; |
|||
} |
|||
} |
|||
|
|||
.freeze { |
|||
display: none; |
|||
.hub-icon { |
|||
width: 40px; |
|||
} |
|||
|
|||
.image-view-container { |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
|
|||
.img-wrapper { |
|||
border: 1px solid #d1d8dd; |
|||
border-radius: 3px; |
|||
padding: 12px; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
|
|||
.helper { |
|||
height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
.hub-page-title { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
/* hub */ |
|||
div[data-page-route="hub"] { |
|||
.page-head { |
|||
height: 80px; |
|||
.img-wrapper { |
|||
border: 1px solid #d1d8dd; |
|||
border-radius: 3px; |
|||
padding: 12px; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
|
|||
.title-text { |
|||
cursor: pointer; |
|||
.helper { |
|||
height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
|
|||
.page-content { |
|||
margin-top: 80px; |
|||
.tree { |
|||
margin: 10px 0px; |
|||
padding: 0px; |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.page-title h1 { |
|||
margin-bottom: 0px; |
|||
.tree.with-skeleton.opened::before { |
|||
left: 9px; |
|||
top: 14px; |
|||
height: calc(~"100% - 32px"); |
|||
} |
|||
|
|||
.account-details { |
|||
margin-top: 20px; |
|||
} |
|||
.list-header-icon { |
|||
width: 72px; |
|||
border-radius: 4px; |
|||
flex-shrink: 0; |
|||
margin: 10px; |
|||
padding: 1px; |
|||
border: 1px solid @border-color; |
|||
height: 72px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
[data-original-title="Search"] { |
|||
float: right; |
|||
width: 220px; |
|||
img { |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
|
|||
.hub-main-section { |
|||
padding: 30px; |
|||
.star-icon.fa-star { |
|||
color: @indicator-orange; |
|||
} |
|||
|
|||
.listing-body { |
|||
margin: 0; |
|||
.octicon-heart.liked { |
|||
color: @indicator-red; |
|||
} |
|||
|
|||
.main-list-section { |
|||
padding: 0; |
|||
// border-right: 1px solid #d1d8dd; |
|||
.margin-vertical-10 { |
|||
margin: 10px 0px; |
|||
} |
|||
|
|||
.side-list-section { |
|||
padding: 0; |
|||
.margin-vertical-15 { |
|||
margin: 15px 0px; |
|||
} |
|||
|
|||
.item-list-header h3 { |
|||
font-weight: normal; |
|||
.frappe-list .result { |
|||
min-height: 100px; |
|||
} |
|||
} |
|||
|
|||
.hub-item-page { |
|||
|
|||
h2 { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.item-header { |
|||
display: flex; |
|||
} |
|||
|
|||
.item-page-image { |
|||
flex: 1; |
|||
} |
|||
|
|||
.title-content { |
|||
flex: 3; |
|||
|
|||
.description { |
|||
margin: 30px 0px; |
|||
} |
|||
|
|||
.actions { |
|||
margin-top: 30px; |
|||
|
|||
.rfq-btn.disabled { |
|||
background-color: #b1bdca; |
|||
color: #fff; |
|||
border-color: #b1bdca; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.company-items { |
|||
margin-top: 40px; |
|||
.image-view-container { |
|||
.image-view-body { |
|||
&:hover .like-button { |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
|
|||
.company-header { |
|||
display: flex; |
|||
} |
|||
|
|||
.item-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.hub-item-wrapper { |
|||
margin-bottom: 20px; |
|||
} |
|||
.like-button { |
|||
bottom: 10px !important; |
|||
left: 10px !important; |
|||
width: 36px; |
|||
height: 36px; |
|||
opacity: 0; |
|||
font-size: 16px; |
|||
color: @text-color; |
|||
position: absolute; |
|||
|
|||
.img-wrapper { |
|||
border: 1px solid @border-color; |
|||
border-radius: 3px; |
|||
padding: 12px; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.helper { |
|||
height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.standard-image { |
|||
font-size: 72px; |
|||
border: none; |
|||
background-color: @light-bg; |
|||
// show zoom button on mobile devices |
|||
@media (max-width: @screen-xs) { |
|||
opacity: 0.5 |
|||
} |
|||
} |
|||
|
|||
.hub-item-title { |
|||
width: 100%; |
|||
} |
|||
|
|||
.breadcrumb { |
|||
padding-left: 0; |
|||
padding-top: 0; |
|||
margin-bottom: 10px; |
|||
.image-view-body:hover .like-button { |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.rating-area .star-icon { |
|||
cursor: pointer; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
Loading…
Reference in new issue