Menu Pop up Hi Fi Prototype - mini/git-brunching GitHub Wiki

For single page and multi-page menus:

If no menu is available for a restaurant, this image appears in place of the menu image:

Functionality

• Clicking Cancel closes pop up.
• Clicking outside of the main panel also closes pop up.
• Clicking Make Booking take use to time selection and # of guests screen.
• Clicking the web button on the top right corner opens a separate tab with the restaurant's website.
• Clicking the location button on the left of the web button opens a new tab opens with google maps showing the restaurant's location
• For multi-page menus:
  • Buttons with left & right chevrons allow users to cycle through them.
  • The current page is also highlighted by one of the pagination dots at the bottom.

Styling

Most of these use pre-existing themes/classes like in this file: LandingPage.module.css

• Main Panel

  • background: white
  • box shadow: -1px 7px 35px -14px rgba(0,0,0,0.75)
  • size: as shown above is 655x864px but will probably change

• Name

  • font: Roboto bold 24px
  • color: black

• Horizontal line

  • color: #C8C8C8
  • thickness: 1px

• Menu Image

  • size: as shown above is 581x731 but will probably change

• Arrows

  • text: ' ‹ ' ' › '
  • font: Roboto bold 72px
  • color: white 50% opacity

• Pagination Dots

  • size: 10px
  • fill: white 50% opacity (100% on active dot)

• Buttons - Existing implementation here: BookingEditPopupButton.js

  • border-radius: 4px
  • height: 36.5px
  • width: 138px (or more if required)
  • font: Roboto 14px CAPS
  • text-alignment: vertically and horizontally centered
  • spacing: 20px

• Cancel Button

  • fill: white (on hover #45C766)
  • border: 1px #45C766
  • text color: #45C766 (on hover white)

• Make Booking Button

  • fill: #45C766 (on hover #459651)
  • border: 1px #459651
  • text color: white

• Web and Location Button

  • color: black
  • width: 30px (Can be changed)
  • height: 30px (Can be changed)