Continuing the task from last week, I modified the arrangement of the item box in the main page as well as the “price” and the “stock 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 “Code” and “Record/Stock” labels and adding the new table in the item details panel. In the content of the “Code” tab, I added the Barcode of the item and arrange them horizontally and space evenly. In the content of the “Record / Stock” tab, I added the “History Sales Record” table and “Stock” 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’s sub navigator, the “Filter” sidebar which is on the right-hand side of the item page – 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 “Pagination” 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.
Sharing About Technology