Openbravo Issue Tracking System - POS2
View Issue Details
0052080POS2POSpublic2023-04-06 17:332023-05-11 00:44
AugustoMauch 
jarmendariz 
normalminorhave not tried
closedfixed 
5
 
23Q3 
No
0052080: [React POS Portrait] Payment Panel should be responsive
See https://openbravo.atlassian.net/browse/RM-5641 [^]

The Payment Panel should be responsive by itself, so it will be displayed properly regardless if we are in landscape or portrait, at with any screen resolution.

It will have two different behaviors.

If its width is higher (or equal) than 490px it should continue displaying as it is now (see image 1)

If its width is lower than 490px, and if the right one is empty, it should show only one single column (the left one) as it is (see image 2)

If its width is lower than 490px, and if the right one has content, it should show both columns, but with an applied zoom of 70%, in order to ensure both columns content is properly displayed, even in the more adverse case (see image 3)

PS: TIP for developers (As in “List view” project): You cannot rely solely in the clientWidth of the component in order to determina if >=490px or not, since there is a dynamic conversion due to the dynamic font-size defined at :root level.

The width you need to calculate the previous logic, comes from this operation

document.getElementById(<-- Payment Panel ID -->).clientWidth*10 / parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'))



-
No tags attached.
png Image1.png (6,057) 2023-04-26 12:20
https://issues.openbravo.com/file_download.php?file_id=18437&type=bug
png

png Image2.png (5,082) 2023-04-26 12:20
https://issues.openbravo.com/file_download.php?file_id=18438&type=bug
png

png Image3.png (5,082) 2023-04-26 12:20
https://issues.openbravo.com/file_download.php?file_id=18439&type=bug
png
Issue History
2023-04-06 17:33AugustoMauchNew Issue
2023-04-06 17:33AugustoMauchAssigned To => Retail
2023-04-06 17:33AugustoMauchTriggers an Emergency Pack => No
2023-04-17 16:29hgbotNote Added: 0148499
2023-04-26 10:44AugustoMauchAssigned ToRetail => jarmendariz
2023-04-26 12:19AugustoMauchTypedefect => feature request
2023-04-26 12:19AugustoMauchDescription Updatedbug_revision_view_page.php?rev_id=25955#r25955
2023-04-26 12:20AugustoMauchFile Added: Image1.png
2023-04-26 12:20AugustoMauchFile Added: Image2.png
2023-04-26 12:20AugustoMauchFile Added: Image3.png
2023-04-26 12:21AugustoMauchStatusnew => scheduled
2023-05-11 00:44hgbotResolutionopen => fixed
2023-05-11 00:44hgbotStatusscheduled => closed
2023-05-11 00:44hgbotFixed in Version => 23Q3
2023-05-11 00:44hgbotNote Added: 0149584
2023-05-11 00:44hgbotNote Added: 0149585

Notes
(0148499)
hgbot   
2023-04-17 16:29   
Merge Request created: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1694 [^]
(0149584)
hgbot   
2023-05-11 00:44   
Directly closing issue as related merge request is already approved.

Repository: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2 [^]
Changeset: 9c606794b247fc3cacdbad9fd48c30cc10cdb93d
Author: iabbas21 <irfan.abbas@soprasteria.com>
Date: 10-05-2023 18:01:14
URL: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/commit/9c606794b247fc3cacdbad9fd48c30cc10cdb93d [^]

Fixed ISSUE-52080: Payment panel should be responsive on portrait mode.

Payment panel should show specific UI in range >=490px and <490px

---
M web-jspack/org.openbravo.pos2/src/components/Payments/PaymentPanel/PaymentPanel.jsx
M web-jspack/org.openbravo.pos2/src/components/Payments/PaymentPanel/PaymentPanel.scss
---
(0149585)
hgbot   
2023-05-11 00:44   
Merge request merged: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/merge_requests/1694 [^]