16 create main content to menu screen

[liinnjohansson]

close #16

Every Text-field has the fontFamily "Roboto". According to design the time and price textfields have "Tomorrow" as fontFamily. If another fontFamily is required, changes can be made easily afterwards.

The MenuSheet is a ScrollView, responsive depending on the fill of the text, and has a max height of 427. This is because it shouldn't wrap the entire height of the screen.

The background needs to be adjusted when we decide how it is supposed to look on both loading screen and this screen.

The restaurant info is fetched by hardcoded id-value (1) and day-value (monday). It should in further development get id as a parameter and in some way get knowledge about selected day as well.

ALSO: Added a new tab for menu, to be able to see it in the app before navigation is completed.

[EmelieBrobergs]

The base layout looks good on my phone, Huawei P30, but I can't test the scrolling function, but the code looks OK with View / ScrollView.

Layout question: Do we like the look when only one dish on menu ? See picture.

The price string is correct towards design, should we have price from or just a price for lunch? For equality in the app..?

Added file MenuScreen.tsx should call on a component file with the code you have written. It should not be placed in the screen file. Should be a easy fix to move the code and import it as a tag. And you should be able to sand a id to the new file! ;)

[liinnjohansson]

It is a totally valid question about the layout when there is only a single or at least a fewer dishes in display. It has been on my mind. And the ability to scroll I think is not really neccessary, I just followed the description for the issue. It can easily be transformed to a view that is flexible depending on content. I think that is better!

I can modify to a from price, so we have the same on each screen, and then later on we can chnge if we want to.

And I will surely break out the code from the screen-file and add it to a new component!

[EmelieBrobergs]

Code suggestion for import of id

export default function MenuScreen( bistro: BistroData, { navigation }: RootTabScreenProps<"Menu">) {
  const id = bistro.id;
  const { storedBistros } = useContext(BistroContext);
  const selectedBistro = storedBistros.find((bistro) => bistro.id === id);

[liinnjohansson]

Does it look better like this? Now the MenuSheet is totally responsive depending on the content.

[liinnjohansson]

Or is this better ?

[EmelieBrobergs]

I think I liked it better a bit bigger. But that the prise should be at the same place of the screen even if the dish amount varies. Like, always in the bottom corner? And if the menu have a lot of dishes the scrolling function is good to have I think! In smaller phones the text will take more rows?

[eminamuratspahic]

I think we should go with the bigger box as Emelie preferred. I believe that the background image is somehow tricky for the eye. Maybe we should change it to something more pleasant for the eye since there sometimes will be a lot of text depending on how big a menu will be. That's a minor issue :)

[liinnjohansson]

MenuSheet is a component now, while MenuScreen displays that component. The menu is scrollable if to much content. The price is aligned in bottom all the time and now it says "from price"