The UI of the reference page was modified to highlight the "Reference" label in the navigation bar and to center the search bar (both of which were completed by Om Patel in a previous sprint). I worked on modifying the layout of the individual references by only displaying the title of the reference and showing the full citation upon expanding the citation. I also worked on dividing the CSS and JS components associated with this page. I also updated the test cases associated with the Reference page to test the newly added components.
Why was it changed?
The UI changes were made in order to support a clean reference page. Later on, there will be a large number of citations added to this page and having a cluttered list of citations makes it significantly harder for users to sift through the search results. Therefore, the formal citations are enclosed and are available upon expansion of the individual reference item. The code for the reference page was separated into a .css file and a .js file to maintain clean coding practice and also to ease the process of making stylistic changes further into the development process. New unit tests were added to test the functionality of the new Reference page layout.
How was it changed?
I modified the UI of the reference page in the References.js file. The formal citations were encapsulated using a MaterialUI prebuilt component called Accordion. This component allows you to hide information and expand the hidden information as required. Two subcomponents of Accordion were also used. AccordionSummary was used to define the title of reference source (which is always visible). AccordionDetail was used to define the full citation (which is hidden). I also added a References.css file to house all the stylistic components. New unit tests were added to ensure the functionality of the Accordion and search bar components. To be more specific, they test the expansion and compression features of the references as well as the search/filtering capabilities of the search bar.
Fixes #14
What was changed?
The UI of the reference page was modified to highlight the "Reference" label in the navigation bar and to center the search bar (both of which were completed by Om Patel in a previous sprint). I worked on modifying the layout of the individual references by only displaying the title of the reference and showing the full citation upon expanding the citation. I also worked on dividing the CSS and JS components associated with this page. I also updated the test cases associated with the Reference page to test the newly added components.
Why was it changed?
The UI changes were made in order to support a clean reference page. Later on, there will be a large number of citations added to this page and having a cluttered list of citations makes it significantly harder for users to sift through the search results. Therefore, the formal citations are enclosed and are available upon expansion of the individual reference item. The code for the reference page was separated into a .css file and a .js file to maintain clean coding practice and also to ease the process of making stylistic changes further into the development process. New unit tests were added to test the functionality of the new Reference page layout.
How was it changed?
I modified the UI of the reference page in the References.js file. The formal citations were encapsulated using a MaterialUI prebuilt component called Accordion. This component allows you to hide information and expand the hidden information as required. Two subcomponents of Accordion were also used. AccordionSummary was used to define the title of reference source (which is always visible). AccordionDetail was used to define the full citation (which is hidden). I also added a References.css file to house all the stylistic components. New unit tests were added to ensure the functionality of the Accordion and search bar components. To be more specific, they test the expansion and compression features of the references as well as the search/filtering capabilities of the search bar.
Code Used to Enclose Full Citation:
Reference Page UI: