Continuing the task from last week, I modified the arrangement of the item box in the main page as well as the \u201cprice\u201d and the \u201cstock in the item box itself horizontally by solving it with CSS style and I controlling the spaces between each of the item box. Besides that, I also adding two navigator tabs with \u201cCode\u201d and \u201cRecord\/Stock\u201d labels and adding the new table in the item details panel. In the content of the \u201cCode\u201d tab, I added the Barcode of the item and arrange them horizontally and space evenly. In the content of the \u201cRecord \/ Stock\u201d tab, I added the \u201cHistory Sales Record\u201d table and \u201cStock\u201d table and space evenly between each of them.
I also modifying the styles of the item detail panel according to the colour, effect and position of the elements inside the panel, especially the division between them. I separate them into 3 part, the main part includes the image, name, stock, price, UoM and some description or remark, the second part include the navigator tab and the content of it, and the third part include the extra information such as the attributes.
On the other hand, I added the additional table as a panel to show the detail of the item and it will pop out when I clicked the particular button in the item detail panel. I also added the dropdown menu and it\u2019s sub navigator, the \u201cFilter\u201d sidebar which is on the right-hand side of the item page \u2013 able to filter the item according to the brand of the item and able to sort the price from lower price to lower or vice versa and yet the \u201cPagination\u201d feature which will control the page of maximum 20 items per page.
Lastly, I modified the position of the drawer navigation to the left-top of the Item Page and push all the elements to the right when I clicked the hamburger icon. Previously, it was appearing under the item list, Mr. Peter suggest me to create a new page that include the drawer and the header only to settle this problem, but actually it is just a division problem, I changed the arrangement of the code according to the division to overcome this problem. I also modified the styling of the dropdown menu with the colour, hover effect and the width of the menu list.
<\/p>\n","protected":false},"excerpt":{"rendered":"
Continuing the task from last week, I modified the arrangement of the item box in the main page as well as the \u201cprice\u201d and the \u201cstock in the item box itself horizontally by solving it with CSS style and I controlling the spaces between each of the item box. Besides that, I also adding two … <\/p>\n