Project:
| View Issue Details[ Jump to Notes ] | [ Issue History ] [ Print ] | |||||||
| ID | ||||||||
| 0034619 | ||||||||
| Type | Category | Severity | Reproducibility | Date Submitted | Last Update | |||
| defect | [Retail Modules] Web POS | minor | always | 2016-11-24 17:31 | 2016-12-30 21:58 | |||
| Reporter | dbaz | View Status | public | |||||
| Assigned To | guilleaer | |||||||
| Priority | normal | Resolution | fixed | Fixed in Version | RR17Q1 | |||
| Status | closed | Fix in branch | Fixed in SCM revision | f4f3d7fc65c9 | ||||
| Projection | none | ETA | none | Target Version | ||||
| OS | Any | Database | Any | Java version | ||||
| OS Version | Database version | Ant version | ||||||
| Product Version | SCM revision | |||||||
| Review Assigned To | dbaz | |||||||
| Regression level | ||||||||
| Regression date | ||||||||
| Regression introduced in release | ||||||||
| Regression introduced by commit | ||||||||
| Triggers an Emergency Pack | No | |||||||
| Summary | 0034619: [UX] The product button is not readable with small aspect ratios or high prices | |||||||
| Description | With the current design, the product button present in the BROWSE and SEARCH tabs could be not readable at all with small aspect ratios or high product prices. [View attached 'Current.png'] Also, due to recent projects, additional items have been added to these buttons (best sellers icons, contextual menu button, ...) so the situation could be even worse. | |||||||
| Steps To Reproduce | In the WebPOS, set 393x700 screen resolution and open the BROWSE tab. | |||||||
| Proposed Solution | There are attached several mockups with several examples about how these buttons should look like. The changes are: * The padding should be set as "padding: 8px;" instead of "padding: 8px 10px 8px 10px;" * The product name should be in the first line left-aligned. * The product name should take a maximum of 4 lines. If this maximum is reached, ellipsis (...) should be used. * The price should be in a line next to the 'product name' and right-aligned. * The best seller icons, should be in the left of the price if they fit. If they don't fit next to the price, they should be at the end of the 'product name'. PS: all best seller/favorite icons should go altogether (in pack). * The contextual menu button should be replaced. View issue: https://issues.openbravo.com/view.php?id=34617 [^] * The contextual menu button should be in the top of the price (right-aligned), at the same height of the 'product name'. With this restrictions, there should be no problem in having a 9 digit price displayed in the product button, even in the BROWSE view at 393x700. If there are more than 9 digits, the font-size should decrease to ensure that the price fits a single line ( fex: https://jsfiddle.net/0c84u0rg/1/ [^] ). | |||||||
| Tags | No tags attached. | |||||||
| Attached Files |  Current.png [^] (116,855 bytes) 2016-11-24 17:32
ProductButton_Smartphone_noBestSellers.png [^] (129,288 bytes) 2016-11-24 17:33
ProductButton_Smartphone.png [^] (135,151 bytes) 2016-11-24 17:33
ProductButton_4-3.png [^] (221,623 bytes) 2016-11-24 17:33
ProductButton_4-3_ContextualMenuAreaOfInfluence.png [^] (221,999 bytes) 2016-11-24 17:34
ProductButton_16-9.png [^] (242,242 bytes) 2016-11-24 17:34
ProductButton_16-9_SEARCH.png [^] (191,650 bytes) 2016-11-24 17:34
 issue34619Core.commit [^] (916 bytes) 2016-12-02 13:53 issue34619Posterminal.commit [^] (5,817 bytes) 2016-12-02 13:53 IMG_20161207_131551-01.jpg [^] (1,384,099 bytes) 2016-12-07 13:19 | |||||||
 Relationships [ Relation Graph ]
[ Dependency Graph ]
|
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
 Relationships |
|
Notes |
|
|
(0092099) hgbot (developer) 2016-12-05 22:28 |
Repository: erp/pmods/org.openbravo.mobile.core Changeset: 88be6aa4ded21aaf14a73d0b8c382eda8ace085a Author: Miguel de Juana <miguel.dejuana <at> openbravo.com> Date: Fri Dec 02 12:23:49 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^] Fixed issue 0034619: [UX] The product button is not readable with small aspect ratios or high prices - Set padding --- M web/org.openbravo.mobile.core/source/retail/component/ob-retail-product-browser.js --- |
|
(0092102) hgbot (developer) 2016-12-05 22:32 |
Repository: erp/pmods/org.openbravo.retail.posterminal Changeset: cd26e0a257c51f2cf59e759b965b3d0f71d5074e Author: Mario Castello <mario.castello <at> peoplewalking.com> Date: Mon Dec 05 11:27:16 2016 -0600 URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/cd26e0a257c51f2cf59e759b965b3d0f71d5074e [^] Fixed issue 0034619: [UX] The product button is not readable with small aspect ratios or high prices - Use flex container class and remove some unneeded styles - Set some styles depending on what is shown and adjust large numbers font --- M web/org.openbravo.retail.posterminal/js/components/renderproduct.js --- |
|
(0092181) dbaz (developer) 2016-12-07 12:28 |
Three issues: The padding between the product image and the product name+price should be 8px instead of 5px The vertical separation between the product name and the product price should be always the same, that is the one that currently the 2+ lines product name have. I don't know why, but now in the single line for the product name cases, the height is higher There should be a dynamic calculation for the price font-size. Right now it seems that is fixed. In case it cannot be done, due to performance issues, I would suggest two different aproaches: * Calculate the maximum length in a dummy hidden product button, and change the font-size only in the buttons with this length or a higher one. * Add several more rules having more ranges of screen aspect ratio and price length (even add 'calc' functions). Video: http://screencast.com/t/MGrmQliKD [^] |
|
(0092185) guilleaer (manager) 2016-12-07 13:18 edited on: 2016-12-07 13:20 |
Code review apart from the David baz 1. I think that this changeset [http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^]] is not doing nothing 2. If we use flex, why dont't use it for the whole render product line? 3. there are some fixed widths already defined. In general it does not make sense using flexbox 4. I have attached an image with the layout that I'm propose 5. I don't really know when filterAttr component is used but we should think on it in the design I have attached an image[IMG_20161207_131551-01.jpg] (handmade) including the layout that I would do if we want to use flexbox |
|
(0092428) hgbot (developer) 2016-12-16 08:36 |
Repository: erp/pmods/org.openbravo.mobile.core Changeset: 740090ed403c4168ef61f27221eb117b4d588089 Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com> Date: Wed Dec 14 14:10:14 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/740090ed403c4168ef61f27221eb117b4d588089 [^] Related to issue 34619: Add new styles required by flexbox --- M web/org.openbravo.mobile.core/assets/css/ob-standard.css --- |
|
(0092432) hgbot (developer) 2016-12-16 08:38 |
Repository: erp/pmods/org.openbravo.retail.posterminal Changeset: 55a1eb86bc404633180f134dcb571c8afa9afa5d Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com> Date: Thu Dec 15 18:19:55 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d [^] Fixed issue 34619: Refactor of product browser component using flexbox - Fixed padding - Price font is resized when conditions requires it. (narrow screen and big price) - The whole component has been refactored using flexbox which makes the component simpler. - Redraw function is just executed one time when it is called many times - Check that component is not being destroyed when redraw function is executed --- M web/org.openbravo.retail.posterminal/css/obpos-main.css M web/org.openbravo.retail.posterminal/js/components/renderproduct.js --- |
|
(0092877) dbaz (developer) 2016-12-20 20:38 |
The left and top product image borders are missig now. Also, this part is not solved: There should be a dynamic calculation for the price font-size. Right now it seems that is fixed. In case it cannot be done, due to performance issues, I would suggest two different aproaches: * Calculate the maximum length in a dummy hidden product button, and change the font-size only in the buttons with this length or a higher one. * Add several more rules having more ranges of screen aspect ratio and price length (even add 'calc' functions). Video: http://screencast.com/t/DI6UY9duHNGN [^] In the current approach https://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d#l2.166 [^] it seems that only length > 11 and width <= 874 are being taked into account to determine the font-size, whose possible values are fixed to 12px or 16px. Probably this this.$.price.addStyles('font-size: 12px;'); could be turned into something like var adjustedFontSize = f(this.model.get('standardPrice').length, document.body.clientWidth); this.$.price.addStyles('font-size: ' + adjustedFontSize); where adjustedFontSize should be modelized, in a similar way it was done in these calcs: https://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/80b0433fad39092f61b92d35efd6ca22d714dd00#l1.76 [^] As said before, another less accurate but easier to implement solution could be add more intervals, like: length > 11 and width <= 874 -> font-size: 12px; length > 12 and width <= AAA -> font-size: XXpx; length > 13 and width <= BBB -> font-size: YYpx; length > 14 and width <= CCC -> font-size: ZZpx; length > 15 and width <= DDD -> font-size: TTpx; length > 16 and width <= EEE -> font-size: UUpx; length > 17 and width <= FFF -> font-size: VVpx; length > 18 and width <= GGG -> font-size: WWpx; |
|
(0092897) hgbot (developer) 2016-12-21 11:18 |
Repository: erp/pmods/org.openbravo.mobile.core Changeset: e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com> Date: Wed Dec 21 11:00:50 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 [^] Fixed issue 34619: Product image border is now correctly shown --- M web/org.openbravo.mobile.core/assets/css/ob-standard.css M web/org.openbravo.mobile.core/source/utils/ob-utilitiesui.js --- |
|
(0092898) hgbot (developer) 2016-12-21 11:18 |
Repository: erp/pmods/org.openbravo.retail.posterminal Changeset: 0628560f418eb8f248efd1e4d46fa1e162870973 Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com> Date: Wed Dec 21 11:00:30 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/0628560f418eb8f248efd1e4d46fa1e162870973 [^] Related to issue 34619: Product image border is now correctly shown --- M web/org.openbravo.retail.posterminal/js/components/renderproduct.js --- |
|
(0092964) guilleaer (manager) 2016-12-23 11:11 |
New issue created related to this one: [ 0034818: Font Resize Mechanism used by "Render Product Line" component is not the same used by "Render Order Line" component] - > https://issues.openbravo.com/view.php?id=34818 [^] |
|
(0092980) marvintm (manager) 2016-12-23 15:08 |
After discussing with the team involved in deploying the solution for the affected customer, we have concluded that the current solution allows to display every possible real price we may encounter. However, just for consistency we will change the current implementation to use the same FitText classes which the rest of the POS components now use. An issue has been reported for this: https://issues.openbravo.com/view.php?id=34818 [^] The current solution is considered correct, though, so we will close this issue for now. |
|
(0092994) dbaz (developer) 2016-12-26 16:09 |
There is one pending point mentioned in the "Proposed Solution" section: * The product name should take a maximum of 4 lines. If this maximum is reached, ellipsis (...) should be used. Also, with the current implementation (max-height) there is a UI issue, because some characters of the 4th line could be clipped. In the following video it is shown how the "g" character of the 4th line is clipped. Also, a CSS solution is proposed to get the ellipsis in the fourth line. http://screencast.com/t/pVPSFPruuvOH [^] PS: The suggested solution is only valid for webkit browsers (the currently supported ones). In the future, if more browsers are supported, this solution should be reviewed. |
|
(0093027) hgbot (developer) 2016-12-27 17:55 |
Repository: erp/pmods/org.openbravo.retail.posterminal Changeset: fe44cab38ad179fa619fd35dabfe65c8a4440f45 Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com> Date: Tue Dec 27 17:54:34 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/fe44cab38ad179fa619fd35dabfe65c8a4440f45 [^] Fixed issue 34619: Ellipsis is shown when product identifier requires more than 4 lines to render --- M web/org.openbravo.retail.posterminal/css/obpos-main.css M web/org.openbravo.retail.posterminal/js/components/renderproduct.js --- |
|
(0093045) dbaz (developer) 2016-12-28 19:41 |
The 4 lines trim and the ellipsis are ok. Regarding to price visualization, 9 digit prices ('Baby carrier' in the video) are experiencing problems in 393x700. Even more, due to the changes of the last changeset, now there are also visualization problems with 8 digit prices ('Alpine skiing backpack 27 L' in the video) in 393x700. The affected customer needs at least 9 digits, so these both cases need to be fixed. Video: http://screencast.com/t/yZweupUSy [^] |
|
(0093047) hgbot (developer) 2016-12-28 23:06 |
Repository: erp/pmods/org.openbravo.retail.posterminal Changeset: f4f3d7fc65c91f496f321ba803fd1580b0b9abfc Author: Guillermo Alvarez de Eulate <guillermo.alvarez <at> openbravo.com> Date: Wed Dec 28 23:05:37 2016 +0100 URL: http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/f4f3d7fc65c91f496f321ba803fd1580b0b9abfc [^] Fixed issue 34619: Prices with strlenght < 14 are correctly shown in all resolutions --- M web/org.openbravo.retail.posterminal/js/components/renderproduct.js --- |
|
(0093051) dbaz (developer) 2016-12-29 13:18 |
Reviewed @ changeset: 7758 - f4f3d7fc65c9 |
|
Notes |
|
Issue History |
|||
| Date Modified | Username | Field | Change |
| 2016-11-24 17:31 | dbaz | New Issue | |
| 2016-11-24 17:31 | dbaz | Assigned To | => Retail |
| 2016-11-24 17:31 | dbaz | Triggers an Emergency Pack | => No |
| 2016-11-24 17:32 | dbaz | Relationship added | has duplicate 0033091 |
| 2016-11-24 17:32 | dbaz | File Added: Current.png | |
| 2016-11-24 17:33 | dbaz | File Added: ProductButton_Smartphone_noBestSellers.png | |
| 2016-11-24 17:33 | dbaz | File Added: ProductButton_Smartphone.png | |
| 2016-11-24 17:33 | dbaz | File Added: ProductButton_4-3.png | |
| 2016-11-24 17:34 | dbaz | File Added: ProductButton_4-3_ContextualMenuAreaOfInfluence.png | |
| 2016-11-24 17:34 | dbaz | File Added: ProductButton_16-9.png | |
| 2016-11-24 17:34 | dbaz | File Added: ProductButton_16-9_SEARCH.png | |
| 2016-11-24 17:35 | dbaz | Relationship added | blocks 0034538 |
| 2016-11-24 17:50 | psarobe | Type | feature request => defect |
| 2016-12-01 17:24 | marvintm | Assigned To | Retail => migueldejuana |
| 2016-12-01 17:24 | marvintm | Status | new => scheduled |
| 2016-12-02 13:53 | migueldejuana | File Added: issue34619Core.commit | |
| 2016-12-02 13:53 | migueldejuana | File Added: issue34619Posterminal.commit | |
| 2016-12-05 22:28 | hgbot | Checkin | |
| 2016-12-05 22:28 | hgbot | Note Added: 0092099 | |
| 2016-12-05 22:28 | hgbot | Status | scheduled => resolved |
| 2016-12-05 22:28 | hgbot | Resolution | open => fixed |
| 2016-12-05 22:28 | hgbot | Fixed in SCM revision | => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^] |
| 2016-12-05 22:32 | hgbot | Checkin | |
| 2016-12-05 22:32 | hgbot | Note Added: 0092102 | |
| 2016-12-05 22:32 | hgbot | Fixed in SCM revision | http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/88be6aa4ded21aaf14a73d0b8c382eda8ace085a [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/cd26e0a257c51f2cf59e759b965b3d0f71d5074e [^] |
| 2016-12-06 19:55 | marvintm | Relationship added | has duplicate 0034468 |
| 2016-12-07 12:28 | dbaz | Note Added: 0092181 | |
| 2016-12-07 12:28 | dbaz | Status | resolved => new |
| 2016-12-07 12:28 | dbaz | Resolution | fixed => open |
| 2016-12-07 13:18 | guilleaer | Note Added: 0092185 | |
| 2016-12-07 13:19 | guilleaer | File Added: IMG_20161207_131551-01.jpg | |
| 2016-12-07 13:20 | guilleaer | Note Edited: 0092185 | View Revisions |
| 2016-12-16 08:36 | hgbot | Checkin | |
| 2016-12-16 08:36 | hgbot | Note Added: 0092428 | |
| 2016-12-16 08:38 | hgbot | Checkin | |
| 2016-12-16 08:38 | hgbot | Note Added: 0092432 | |
| 2016-12-16 08:38 | hgbot | Checkin | |
| 2016-12-16 08:38 | hgbot | Note Added: 0092433 | |
| 2016-12-16 08:38 | hgbot | Status | new => resolved |
| 2016-12-16 08:38 | hgbot | Resolution | open => fixed |
| 2016-12-16 08:38 | hgbot | Fixed in SCM revision | http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/cd26e0a257c51f2cf59e759b965b3d0f71d5074e [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d [^] |
| 2016-12-16 08:38 | hgbot | Status | new => resolved |
| 2016-12-16 08:46 | guilleaer | Note Deleted: 0092433 | |
| 2016-12-20 13:53 | marvintm | Review Assigned To | => marvintm |
| 2016-12-20 13:53 | marvintm | Status | resolved => closed |
| 2016-12-20 13:53 | marvintm | Fixed in Version | => RR17Q1 |
| 2016-12-20 20:38 | dbaz | Note Added: 0092877 | |
| 2016-12-20 20:38 | dbaz | Status | closed => new |
| 2016-12-20 20:38 | dbaz | Resolution | fixed => open |
| 2016-12-20 20:38 | dbaz | Fixed in Version | RR17Q1 => |
| 2016-12-21 11:18 | hgbot | Checkin | |
| 2016-12-21 11:18 | hgbot | Note Added: 0092897 | |
| 2016-12-21 11:18 | hgbot | Status | new => resolved |
| 2016-12-21 11:18 | hgbot | Resolution | open => fixed |
| 2016-12-21 11:18 | hgbot | Fixed in SCM revision | http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/55a1eb86bc404633180f134dcb571c8afa9afa5d [^] => http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 [^] |
| 2016-12-21 11:18 | hgbot | Checkin | |
| 2016-12-21 11:18 | hgbot | Note Added: 0092898 | |
| 2016-12-23 11:11 | guilleaer | Relationship added | related to 0034818 |
| 2016-12-23 11:11 | guilleaer | Note Added: 0092964 | |
| 2016-12-23 13:59 | guilleaer | Assigned To | migueldejuana => guilleaer |
| 2016-12-23 15:08 | marvintm | Note Added: 0092980 | |
| 2016-12-23 15:08 | marvintm | Status | resolved => closed |
| 2016-12-23 15:08 | marvintm | Fixed in Version | => RR17Q1 |
| 2016-12-26 16:09 | dbaz | Note Added: 0092994 | |
| 2016-12-26 16:09 | dbaz | Status | closed => new |
| 2016-12-26 16:09 | dbaz | Resolution | fixed => open |
| 2016-12-26 16:09 | dbaz | Fixed in Version | RR17Q1 => |
| 2016-12-27 17:55 | hgbot | Checkin | |
| 2016-12-27 17:55 | hgbot | Note Added: 0093027 | |
| 2016-12-27 17:55 | hgbot | Status | new => resolved |
| 2016-12-27 17:55 | hgbot | Resolution | open => fixed |
| 2016-12-27 17:55 | hgbot | Fixed in SCM revision | http://code.openbravo.com/erp/pmods/org.openbravo.mobile.core/rev/e05e1dcab1e391d6c27b1cb95742f3c2cd4431c4 [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/fe44cab38ad179fa619fd35dabfe65c8a4440f45 [^] |
| 2016-12-28 19:41 | dbaz | Note Added: 0093045 | |
| 2016-12-28 19:41 | dbaz | Status | resolved => new |
| 2016-12-28 19:41 | dbaz | Resolution | fixed => open |
| 2016-12-28 23:06 | hgbot | Checkin | |
| 2016-12-28 23:06 | hgbot | Note Added: 0093047 | |
| 2016-12-28 23:06 | hgbot | Status | new => resolved |
| 2016-12-28 23:06 | hgbot | Resolution | open => fixed |
| 2016-12-28 23:06 | hgbot | Fixed in SCM revision | http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/fe44cab38ad179fa619fd35dabfe65c8a4440f45 [^] => http://code.openbravo.com/erp/pmods/org.openbravo.retail.posterminal/rev/f4f3d7fc65c91f496f321ba803fd1580b0b9abfc [^] |
| 2016-12-29 10:05 | guilleaer | Review Assigned To | marvintm => dbaz |
| 2016-12-29 13:18 | dbaz | Note Added: 0093051 | |
| 2016-12-29 13:18 | dbaz | Status | resolved => closed |
| 2016-12-29 13:18 | dbaz | Fixed in Version | => RR17Q2 |
| 2016-12-30 21:58 | dbaz | Fixed in Version | RR17Q2 => RR17Q1 |
| 2017-04-03 18:23 | malsasua | Relationship added | related to 0035679 |
|
Issue History |
| Copyright © 2000 - 2009 MantisBT Group |
 |