Once again, this week marks the end of another sprint, with even more progress taking place for our team’s component of the AMPATH mobile app, the left navigation bar. As I described during the previous sprint retrospective, our team was able to complete a minimum viable product (MVP), meaning that any consumers utilizing this app would have a minimally functioning navigation bar! This sprint was focused mostly on adding and polishing new features that could make this navigation bar better.
During our preparation for the upcoming sprint, we came up with a list of additions that would benefit our navigation bar component, not only in terms of aesthetic but also in terms of functionality. For styling changes, we decided that we wanted to make edits which promoted easier readability. Other changes that we wanted to make included adding a home button on the navigation bar so that users could redirect back to the main home page, creating a dropdown menu for some of our buttons in case a sub-menu was required, and fixing the navigation bar such that once a button was clicked, the menu would collapse, rather than staying open when switching to a new page.
My overarching task for this sprint was to focus on the styling changes that we wished to make to the navigation bar. This included making the text size for the navigation buttons larger, increasing the spacing between each button to make navigation between each tab easier, center-aligning the button text (rather than left-justified text) because our whole team preferred the center alignment, and changing the color of the whole app to a darker mode so that it makes it even easier for users to look at the app. Adjusting the font size of the button text required a quick edit in the CSS file, app.component.css, where the font-size attribute related to the container with our navigation bar buttons was increased. I used the following site to make this change. Likewise, switching the alignment of the button text was specified in this CSS file, in the same section which described the formatting of the same aforementioned container. I used the following site to verify which attribute to change and how to modify it properly.
In order to increase the spacing between the buttons, I simply added 2 line breaks between each button, modified in the HTML code for the app (saved in the app.component.html file provided by the Angular framework). Finally, to change the color scheme of the app, I used the following site in the Angular Material documentation to learn more about the different themes that are pre-built into Angular Material, as well as how to go about creating my own custom theme. I initially considered creating a custom theme, but I wanted to check out each of the pre-built themes beforehand in case I liked any of those instead. As part of the Angular Material Themes, each theme has a primary palette (which are colors most often used on the app), an accent palette (for interactive elements on the app or any floating screens or dialogs), and a warning palette (for any error messages or notifications). I did a trial and error of each of these 3 palettes, for each pre-built theme provided by Angular Material, listed on the Angular Material site, and I found that I, and the rest of the team, preferred the accent palette of the pink-bluegrey.css theme, which resulted in a “dark mode” of the app. In order to incorporate this theme into our app, I navigated to our global stylesheet, styles.css in the top level of our src folder, and added the following line: “@import ‘@angular/material/prebuilt-themes/pink-bluegrey.css’;” Then, in our HTML code, whenever a color attribute in our button tag came up, I specified that the accent palette would be used, which looked like: “color = accent”.
This was a very productive sprint, and I’m very glad that our team has the flexibility to add more features without having to be concerned about the basic functionality of the navigation bar being affected. For our final sprint, we are going to be focused on finishing most, if not all, of the rest of our additional features. We will also be wrapping everything up for the semester (holy moly it’s the end of the semester already?). Stay tuned for my last sprint retrospective, and thanks for reading!
From the blog CS@Worcester – Hi, I'm Kat. by Kat Law and used with permission of the author. All other rights reserved by the author.