Webseite improvements
COM8 opened this issue · 11 comments
We should improve the Website (https://tum-dev.github.io/eat-api/):
- Updated theme (and dark mode ?)
- Allow switching between weeks
- Option to show the current day instead of the current week
- Fix showing dishes for the wrong week sometimes
- Perhaps an OpenStreetMap integration for showing dishes
Example:
I will start working on this
Is there still something to do with this issue?
Do we want to have the OpenStreetMaps integration?
Or was there simply an error, that it is not closed, while the pull request is now merged?
I would love to have an OpenStreetMaps integration here.
I found a couple of bugs with it:
- If you visit: https://tum-dev.github.io/eat-api you have to change the date once to get a menu for the day
- We should add text wrapping for dishes not only on word boundaries since for example on my iphone 7 the page stretches to far and I have to horizontal scroll
- The hline of the last table entry is missing
- I can not click on ingredients for a dish on a phone to get the tooltip
Okay, I will fix these issues soon.
I have another general question, for this I will open a new Pull Request, as the other one is already merged?
It is not possible/common to further work on the first Pull Request I opened for this issue?
Exactly. Please open new ones. Perhaps even two. One for OpenStreetMaps and one for the fixes.
For the fixes I opened pull request #57.
The problem with the wrapping on your iPhone was most probably regarding the ingredients below the dishes, which did not wrap at all.
Or do you have an example, were the words of the dish title are too long, so that we need in-word wrapping?
This issue should be all fixed now.
However, I have a few more ideas for the website:
- Adding the option to filter for ingredients (Show only meals without specified ingredients)
- Add auto linting/formatting to the website branch (via precommit for example) (+ Optionally check the linting via GitHub Actions)
- Use native JS modules, to split code into multiple files (this is probably only possible in modern browsers, however by using the native function, it should be possible, to not have to use build-tools) (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
For the fixes I opened pull request #57.
The problem with the wrapping on your iPhone was most probably regarding the ingredients below the dishes, which did not wrap at all. Or do you have an example, were the words of the dish title are too long, so that we need in-word wrapping?
Sorry forgot to reply here. This is an example where I can move the page a bit to the right and left. You are right. I don't think this can be solved by allowing words to wrap.
RPReplay_Final1637767662.MP4
This issue should be all fixed now.
However, I have a few more ideas for the website:
* Adding the option to filter for ingredients (Show only meals without specified ingredients)
Sounds nice. This should then be something we can specify in the URL, since I as a user would not like to have to specify it again when I created a bookmark.
* Add auto linting/formatting to the website branch (via precommit for example) (+ Optionally check the linting via GitHub Actions)
Yes, please!
* Use native JS modules, to split code into multiple files (this is probably only possible in modern browsers, however by using the native function, it should be possible, to not have to use build-tools) (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
Sounds also reasonable.
For the fixes I opened pull request #57.
The problem with the wrapping on your iPhone was most probably regarding the ingredients below the dishes, which did not wrap at all. Or do you have an example, were the words of the dish title are too long, so that we need in-word wrapping?Sorry forgot to reply here. This is an example where I can move the page a bit to the right and left. You are right. I don't think this can be solved by allowing words to wrap.
RPReplay_Final1637767662.MP4
Okay, I thought that this should be fixed now, as the ingredient icons should now wrap on the iPhone.
However, I just noticed that there is some bug in Safari, that the whole page is not working properly. I will look into it later! :)
With #61 the Safari issue should be fixed.
Further, it would be great, if you could test again, whether there appears a vertical scrollbar anymore.