[go: up one dir, main page]

Multi-Modal Sermons List with Navigation

As a user, I need a navigation menu on the sermons list, so that I can visit other parts of the application

Acceptance Criteria:

  • GIVEN a device with a screen size of less than 600dp

    • WHEN viewing the sermons list
      • THEN a bottom navigation bar appears
      • THEN the bar has three items
      • AND the first item says "Sermons"
      • AND the first item has a material icon of library_music
      • AND the second item says "Downloads"
      • AND the second item has a material icon of get_app
      • AND the third item says "Account"
      • AND the third item has a material icon of person
      • THEN the background and selected item colors use the system's default values
      • AND the selected item is "Sermons"
    • WHEN clicking any navigation item
      • THEN the item is clickable, but takes the user nowhere different

  • GIVEN a device with a screen size of 600dp or more

    • WHEN viewing the sermons list
      • THEN the bottom navigation bar disappears
      • THEN a left navigation drawer is available
      • AND the drawer can be brought out by clicking the hamburger icon or swiping from the left
      • THEN the navigation bar is 160dp tall
      • AND the hamburger icon is at the top-left
      • AND the page title is at the bottom, padded from the left and right by 72dp
      • THEN the contents of the screen appear in a card
      • AND the card is 72dp from the left and right
      • AND the card is 0dp from the bottom of the screen and 0dp from the bottom of the toolbar
      • THEN the background of the screen is #EEEEEE
      • THEN the background of the card is #FFFFFF
      • THEN the card stretches no wider than 540dp
      • THEN the card uses the default elevation
    • WHEN viewing the navigation drawer
      • THEN the drawer has an account section
      • AND the account section's height uses the library's default value
      • THEN the user's profile icon is at the top of the account section
      • AND the icon uses the library's default value
      • THEN below the icon is the user's name from Auth0
      • AND the styling uses the library's default styles
      • THEN below the name is the user's email from Auth0
      • AND the styling uses the library's default styles
      • THEN the drawer has four items
      • AND the first item says "Sermons"
      • AND the first item has a material icon of library_music
      • AND the second item says "Downloads"
      • AND the second item has a material icon of get_app
      • AND the third item says "Account"
      • AND the third item has a material icon of person
      • AND the fourth item says "Logout"
      • AND the fourth item has a material icon of cancel
      • AND there is a divider between the third and fourth items
      • THEN the background of the drawer is #FFFFFF
      • THEN the selected item uses the colorPrimary for the icon text and background color
      • AND the selected item is "Sermons"
    • WHEN clicking any navigation item
      • THEN the item is clickable, but takes the user nowhere different

  • GIVEN a device with a screen size of 840dp or more

    • WHEN looking at the naivation drawer
      • THEN it looks and behaves the same as the 600dp variant
    • WHEN looking at the sermons list
      • THEN it is still in a card as defined in the 600dp variant
      • THEN the card oriented in the left half of the screen
    • WHEN looking to the right of the sermons list
      • THEN there is a blank card on the right half of the screen without any functionality
      • THEN the background of the card is #FFFFFF
      • THEN the card stretches no wider than 540dp
      • THEN the card is padded to the right of the sermons list card by 24dp
      • AND The card is padded from the right edge of the screen by 72dp
      • THEN the card's elevation is 5dp
      • THEN the toolbar for this card appears over the activity's toolbar
      • AND the height of the toolbar is ?attr/actionBarSize
      • AND the toolbar is white
      • AND the toolbar is empty

Developer Notes:

  • Use the Material Drawer library to build the navigation drawer for tablets
  • The blank card to the right of the sermons list will eventually hold the details for the selected sermon, but is non-functional and blank for now

References: