New page

[Xuhui-Wang-9988]

Page Changes Description

Description

This document outlines the changes made to page structure and functionalities. It includes all the changes made during week 4 to week 5 that have not been merged into the main. It provides a detailed comparison of the modifications, highlighting new features, improvements, and any potential breaking changes. This description is based on the comparison of new page and main, which contains a comprehensive diff of the alterations.

Types of change

• [x] Bug fix (non-breaking change which fixes issues)
• [x] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] Add local assets for footer and navibar in page display
• [x] Add navigation bar and footers and fix it to fit various size of view (mobile view

• [x] This change requires a documentation update

  Specific Changes made

  1. change the font size and line space of options in drop-down selection box

2. customised drop-down charts from my_config_file and set-up text and other contents This is the example code block for changes:

3. Option for drop-down selection This is the example code block for what we have done and it shown on page as:

4. changes on footer to fit the mobile view

Addtioinaly, as shown on the navibar, the top-left icon has not been decided, we now used the basic icon of the CBE project

5. change of navibar to fit the mobile view

6. change on footer and navibar to add hyperlink

This is example code block from navibar file: it shown on page as: The icon of GitHub can jump to the project repository once clicked.

8. Edit texts on footer and navibar

9. changes of code blocks for formal coding

How Has This Been Tested?

The page changes have been tested through the following methods:

1. Manual testing of each modified component
2. Integration testing to ensure new features work correctly with existing functionality
3. Cross-browser testing for compatibility
4. Responsive design testing on various device sizes

Checklist

• [x] the code follows the style guidelines of this project
• [x] we have performed a self-review of my code
• [x] we have local tests before pushing the code to remote branch
• [ ] we have changed displayed description under different visualisations
• [ ] we have fixed the view of pages under different size of view (device size)
• [x] we have fixed the view of footer & navibar under different size of view (device size)
• [ ] For each single time done with coding, type in black in terminal to format the code

For a complete understanding of the changes, it is recommended to review the push request in conjunction with this description.

[FedericoTartarini]

Thank you all very much for working on this. I am extremely happy to see that all this work has been done.

Unfortunately, it is almost impossible to properly review the code since there are a lot of commits and most of them are related to code formatting. @t-kramer shall we accept the pull request and then review the code separately?

[t-kramer]

Thank you all very much for working on this. I am extremely happy to see that all this work has been done.

Unfortunately, it is almost impossible to properly review the code since there are a lot of commits and most of them are related to code formatting. @t-kramer shall we accept the pull request and then review the code separately?

Sounds good to me.