[Community Thread] General UI Design

[hay-kot]

Looking for feedback, comments, or general ideas on the UI design. and thoughts moving forward.

[mrherman]

Right now just the knife and fork logo in the upper left takes you back to the home page, I think clicking the word "Mealie" should also take you back. My expectation is that everything in the upper left should take be a link back to the home page.

Also, not a fan of having to hover over the + button to get a add via url button. Maybe have add via URL on the add new recipe page?

[hay-kot]

Right now just the knife and fork logo in the upper left takes you back to the home page, I think clicking the word "Mealie" should also take you back. My expectation is that everything in the upper left should take be a link back to the home page.

I agreed. I think I've got this working in the dev branch, should get pushed to main later this week.

Also, not a fan of having to hover over the + button to get a add via url button. Maybe have add via URL on the add new recipe page?

This was also brought up before by mobile users as accessing the add by link is not accessible on mobile. My current solution is to open the menu on hover & click and add an extra button. This is set up in the dev branch and I'm open to feedback on other solutions.

[mrherman]

When adding a recipe via URL and it fails the pop-up changes to the below showing an error message. There is no close button (although clicking outside of the pop-up will close it). Also, after being closed when you click add via url again the same error is still there (presumably because the popup dom is just being reused and the error never cleared). Functionally this doesn't cause an issue (you can still submit a new url); however, it does cause confusion.

[hay-kot]

When adding a recipe via URL and it fails the pop-up changes to the below showing an error message. There is no close button (although clicking outside of the pop-up will close it). Also, after being closed when you click add via url again the same error is still there (presumably because the popup dom is just being reused and the error never cleared). Functionally this doesn't cause an issue (you can still submit a new url); however, it does cause confusion.

I've added a close button and reset the error on close/clickout. Thanks!

[kirkybaby]

This isn't a major concern, more of an observation. When I visit my installation in a browser on a computer, the title on the tab just says "frontend" and the favicon is a green V. I would have expected the Mealie icon (I do inderstand this is still a work in progress as well lol) and the title to be Mealie so we can tell what the tab is properly. Is this expected, or something I can change on my end?

[hay-kot]

This isn't a major concern, more of an observation. When I visit my installation in a browser on a computer, the title on the tab just says "frontend" and the favicon is a green V. I would have expected the Mealie icon (I do inderstand this is still a work in progress as well lol) and the title to be Mealie so we can tell what the tab is properly. Is this expected, or something I can change on my end?

This should be fixed in the initial patch, try updating your container or refreshing your browser cache. Be sure to backup the database before updating just in case!

[kirkybaby]

This isn't a major concern, more of an observation. When I visit my installation in a browser on a computer, the title on the tab just says "frontend" and the favicon is a green V. I would have expected the Mealie icon (I do inderstand this is still a work in progress as well lol) and the title to be Mealie so we can tell what the tab is properly. Is this expected, or something I can change on my end?

This should be fixed in the initial patch, try updating your container or refreshing your browser cache. Be sure to backup the database before updating just in case!

Yea, weird. Doesn't seem like I can update, so must be on the latest patch. Is there anywhere that I can see what build I am running? Even tried a few different browsers that I had never visited it from before and still getting the same thing.

[hay-kot]

This isn't a major concern, more of an observation. When I visit my installation in a browser on a computer, the title on the tab just says "frontend" and the favicon is a green V. I would have expected the Mealie icon (I do inderstand this is still a work in progress as well lol) and the title to be Mealie so we can tell what the tab is properly. Is this expected, or something I can change on my end?

This should be fixed in the initial patch, try updating your container or refreshing your browser cache. Be sure to backup the database before updating just in case!

Yea, weird. Doesn't seem like I can update, so must be on the latest patch. Is there anywhere that I can see what build I am running? Even tried a few different browsers that I had never visited it from before and still getting the same thing.

The initial release had no version and there was no way to tell, a bad choice on my part. This has been resolved in the master branch and should be contained in the latest docker container. In the site-settings page, at the bottom you should see this.

If you don't, try pulling the most recent image from dockerhub with docker-compose pull

[kirkybaby]

This isn't a major concern, more of an observation. When I visit my installation in a browser on a computer, the title on the tab just says "frontend" and the favicon is a green V. I would have expected the Mealie icon (I do inderstand this is still a work in progress as well lol) and the title to be Mealie so we can tell what the tab is properly. Is this expected, or something I can change on my end?

This should be fixed in the initial patch, try updating your container or refreshing your browser cache. Be sure to backup the database before updating just in case!

Yea, weird. Doesn't seem like I can update, so must be on the latest patch. Is there anywhere that I can see what build I am running? Even tried a few different browsers that I had never visited it from before and still getting the same thing.

The initial release had no version and there was no way to tell, a bad choice on my part. This has been resolved in the master branch and should be contained in the latest docker container. In the site-settings page, at the bottom you should see this.

If you don't, try pulling the most recent image from dockerhub with docker-compose pull

Thanks for the quikc replies! docker-pull and a re-up did the trick! Thanks again, this is working great so far!

[mrherman]

When you search for a recipe, the search box fills itself in with the recipe name used as part of the url and stays there; so the next time you search you have to delete this auto filled recipe name. SO I have a recipe called fluffy pancakes, I search for pancakes and see it and select it and go to the page as expected. But when I hit search (at the top of the page) again the text box is filled in with fluffy-pancakes making me delete it then type my new search.

[WhiskeyTech]

Hello! I'm absolutely in love with this project. My friend and I have this setup on a server as a shared recipe service for us and our friends. I love the roadmap and cant wait for user management to be implemented. The UI and sleek and I like the direction you're going with it, but I only have one suggestion. The image used for recipes looks great on the main page but is formatted weirdly when you click into a recipe, so unless I have a very high resolution photo, they don't look great in the recipe window as well as they are weirdly zoomed in cutting off the tops and bottoms of the pictures.

[hay-kot]

Hello! I'm absolutely in love with this project. My friend and I have this setup on a server as a shared recipe service for us and our friends. I love the roadmap and cant wait for user management to be implemented. The UI and sleek and I like the direction you're going with it, but I only have one suggestion. The image used for recipes looks great on the main page but is formatted weirdly when you click into a recipe, so unless I have a very high resolution photo, they don't look great in the recipe window as well as they are weirdly zoomed in cutting off the tops and bottoms of the pictures.

This has been on my mind. I'm unsure of the best way to address it. My 2 thoughts were to 1) Change the view entirely to have a less image-focused view, or 2) provide 2 views to choose from in the admin panel.

Any other suggestions or feedback on those options?

[kirkybaby]

I was actually just thinking about the same thing today. My thought would be to have 1 image in both spots as the default (the way it is currently) with the option to upload a secondary image that was more of a "banner" image that would show up within the recipe itself. Also, some info on recommended image dimensions for these 2 spots. Just my 2 cents

…

On Mon, Jan 11, 2021, 6:47 PM Hayden ***@***.***> wrote: Hello! I'm absolutely in love with this project. My friend and I have this setup on a server as a shared recipe service for us and our friends. I love the roadmap and cant wait for user management to be implemented. The UI and sleek and I like the direction you're going with it, but I only have one suggestion. The image used for recipes looks great on the main page but is formatted weirdly when you click into a recipe, so unless I have a very high resolution photo, they don't look great in the recipe window as well as they are weirdly zoomed in cutting off the tops and bottoms of the pictures. This has been on my mind. I'm unsure of the best way to address it. My 2 thoughts were to 1) Change the view entirely to have a less image-focused view, or 2) provide 2 views to choose from in the admin panel. Any other suggestions or feedback on those options? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#38 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOMJ4TSLCZXPLXR5KLJBARTSZOEZVANCNFSM4VWZ7TPA> .

[WhiskeyTech]

Hello! I'm absolutely in love with this project. My friend and I have this setup on a server as a shared recipe service for us and our friends. I love the roadmap and cant wait for user management to be implemented. The UI and sleek and I like the direction you're going with it, but I only have one suggestion. The image used for recipes looks great on the main page but is formatted weirdly when you click into a recipe, so unless I have a very high resolution photo, they don't look great in the recipe window as well as they are weirdly zoomed in cutting off the tops and bottoms of the pictures.

This has been on my mind. I'm unsure of the best way to address it. My 2 thoughts were to 1) Change the view entirely to have a less image-focused view, or 2) provide 2 views to choose from in the admin panel.

Any other suggestions or feedback on those options?

I really like the system being imaged focused so I wouldn't go down that route. My two ideas would be:
1: Make the image on the recipe page be the same aspect ratio as the admin page and just move some stuff around like the tile, rating, and categories/tag but keeping the image large (Smaller than it is now) but not too large.
2: Make the two images separate images with separate aspect ratios. This would allow for a very nice admin page image and a very customizable banner image on the recipe page, you could get very creative by making the two images separate. If you're going down this route, I would suggest an aspect ratio suggestion tool tip of some kind so people know what to look for for their pictures or know how they should edit them.

Just my opinion, but if you have any questions on the two items above, just let me know.

[nickcj931]

Just tagging UI suggestion mentioned by me here to help keep track
#63 (comment)

[W1ndst0rm]

Just a quick thought

In the header, clicking on Mealie takes you back to the homepage when you click on it. This is great, but isn't communicated well in the UI. It would be better if it was styled with cursor: pointer; so it behaved the same as other links and buttons on the site.

It may even be worth combining it into the same button element as the icon since they are functionally doing the same thing, and it would be nice to have the hover style match as well.

[hay-kot]

Just a quick thought

In the header, clicking on Mealie takes you back to the homepage when you click on it. This is great, but isn't communicated well in the UI. It would be better if it was styled with cursor: pointer; so it behaved the same as other links and buttons on the site.

It may even be worth combining it into the same button element as the icon since they are functionally doing the same thing, and it would be nice to have the hover style match as well.

I was able to get this fixed. Thanks for the suggestion!

[hay-kot]

Closing in favor of the new discussions feature #229