Some ingredients in the prefs (eg. fish) aren't great for submitting searches. So if people have selected fish, for example, I'm going to add a few more granular ingredients (eg. salmon, tuna, mackerel, cod, etc) to the query string.

This is probably a bug I introduced in my last round of "tweaks", so I'll take a look at it myself.

The nutritional information section looks like it could use one or two more stats—looks like it's missing something right now.

• Add one (or two more stats) to the section
• Refactor CSS so that the stats stretch out to fill the space as the window resizes.

Icons:
https://www.flaticon.com/packs/food-set-2/2

Recipe API:
https://developer.edamam.com/

What else?

I installed the production version of the extension on a laptop with a smaller screen today, and found that the to-do panel is displayed in front of the settings panel, when both panels are opened at the same time.

Between midnight and 3am, user is greeted with "Good Afternoon".

If the user pauses for a few seconds while typing in a new focus, the interface should prompt them to hit Enter to set their focus.

This feature stopped working with the last commit.

& missing before orientation=landscape

The quote feature extends off of the bottom of the screen when the user hovers over the quote. This causes a scrollbar to appear, and shifts all the content left.

My usual behaviour for closing popups is to click outside the window, or click on some kind of close icon eg. "x". It took me a while to figure out that I needed to click on the settings cog again to close the panel.

Suggestion: Add a listener for clicking outside the pane, and/or a "close window" button.

I've seen this error twice, but can't recreate it deliberately.
It happened, both times, after I cleared Chrome Storage in order to do some testing.

Quote text reads "undefined".
I didn't check the author last time, but this time the author is Anonymous.

The problem: When the user scrolls to the bottom of a settings panel, then closes the settings, the panel remains scrolled. When the user reopens settings, it opens to the same panel, in it's pre-scrolled condition, which makes for poor UX. (Currently, this issue only manifests in the recipes panel).

The text on the recipes panel was styled using the old font, and needs to be tweaked for clarity/readability with the new font.

Also, this would be a good time to clean up the CSS and HTML.

Issue: If the recipe title is long or there are several tags, the wrapping is unpredictable, and doesn't look awesome.

Suggestion:

• If the line is going to wrap, break it before the tags start, so all tags wrap to the next line together.
• Also, the padding needs tweaking. I bumped the positioning up a little for the tags because they were too low, but when they wrap it causes them to overlap the title. Maybe try adding some padding/margin to the bottom of the title to fix this.

I'm getting the following error when I double click on the time:
Error in response to storage.get: TypeError: Cannot read property 'hour12' of undefined at Object.chrome.storage.sync.get [as callback] (chrome-extension://bcophjanoidfloajjdncffigbhnnnolo/js/script-clock.js:54:32) at HTMLElement.timeHTMLSelector.addEventListener (chrome-extension://bcophjanoidfloajjdncffigbhnnnolo/js/script-clock.js:47:27)

It looks like the timeSetting variable hasn't been saved when the get call is made on line 47. Presumably because this is the first time I have run the feature.

Unsplash is giving us backgrounds that are in portrait, which are not optimal for our extension.

Sometimes when I hover over the image credit, the widgets don't fade out in order to showcase the image. The cursor has to be placed quite precisely to trigger the behaviour.
I've not checked the code yet, but I would imagine that we just need to move the event listener on to the parent element.

It would help to have a recipe (or an array of recipes) to populate the recipe panel if there is no internet connection. Currently it looks a little barren.

When the user hovers over credits for more than 3 seconds all elements on the page should fade except for the credits and the background.

I think it'd be cool to enable editing a task list name. At the moment, if someone wanted to rename a list, they'd have to delete the whole thing, along with list items and start over.

Using contenteditable=true in the HTML tag will enable changing the name, but accompanying functions would also have to be written to save that across tabs.

Problem:

• A quote does not render after the first, initial prompt for a user name.

-Initial name entry handles the case where the user tries to submit an empty string, but allows them to enter just white-space.
-When the user clicks on their name in the greeting to edit it, the feature will accept an empty string or white-space.

I've just handled a similar issue in feature/main-focus, using regex to look for any input that wasn't white-space. My code seems to be doing the job, but please let me know if you find a more robust solution.

Problem: Edamam (the food API service we're using) has a limit on the number of calls we can make—5000/month and 5/minute.

Suggestion 1
Load x number of recipes on the initial request. Then when the user tries to refresh the recipe, they don't put through a new request. This is an okay solution, but one issue would be that all of the recipes loaded would have the same search query and diet filter. eg. "chicken" and "low-fat". It would be weird for the user to keep getting the same type of recipes with every refresh.

Suggestion 2
Remove the reload button. This would only allow users to see one recipe per day. As it is a recipe of the day feature, this doesn't seem so bad in theory. In practice however, the recipes are so random that there's a fair chance that the result will be something that the user doesn't like.

Suggestion 3
Build in user preferences (and remove reload button). Instead of a random recipe automatically loading, have the panel set up so that the initial view presents a selection of preference filters for the user to choose from. Eg. The first view shows a series of food types that the user can pick from. Eg. Chicken, Cow, Pig, Vegetables, Pasta, Stew, etc. The next section would allow the user to pick from a variety of diets, eg. balanced, low-sodium, paleo, etc. And the last would allow them to select additional health tags, such as gluten free, peanut free, etc.

When reviewing and approving PR for the scrollbar styling, I noticed that it might make the UI simpler if we hide the scrollbars when not hovering over the div in question...

Hidden scrollbars:

Visible when hovering over the scrollable content:

The code to make this work is pretty simple (assuming I'm not doing it wrong):

  background-clip: padding-box;
  background-color: rgba(255, 255, 255, .25);
  border: 3px solid transparent;
  border-radius: 8px;
  visibility: hidden;
}

:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}```

When the page elements are made visible again, after showcasing the background image, the main focus congratulations message is displayed. The message should only display when the user marks the main focus as completed.

When a user deselects all of the ingredients, an empty query is sent to Edamam on the next request.

Not sure of the best way to deal with this, some options:

• display a message that not all ingredients can be deselected,
• not allow the the last ingredient to be deselected
• reset the ingredients back to "all"
• let the user deselect everything, but send some kind of general query (maybe one that searches based on source (eg. Jamie Oliver)

The image credit text shifts to the left as the rest of the content on the page is hidden (to showcase the background image).

This appears to be the result of using the jQuery .fadeOut() method, which adds a style of display: none; to all matched elements, removing them from the flow of the page. Removing the settings-icon-wrapper div causes the bottom row to shift left.

David has already proposed that we use;

the hidden utility we have for initial-wrapper & main-wrapper instead of inline style attribute

Can we use the same technique to resolve this issue?

I've noticed that the Settings panel is a little bit removed from the icon, and the little arrow thing (technical name) doesn't quite point at the cog. On the other hand, the To-do panel could perhaps give the todo link a little breathing room, and doesn't have a little arrow thing. The panel corners are also different.

Suggestions:

• Give to-do panel the same rounded corners as settings
• Give to-do panel a little more bottom padding (balanced with the whitespace around the other sides of the todo list)
• Give to-do panel a little arrow thing
• Match the settings panel external spacing to the to-do panel

The scrollbar on the recipe panel in settings needs styles explicitly setting.
Currently, it looks great on Mac, but has ugly grey default styling on Windows.

Currently, nutrition data is totaled across all servings and displayed as such. However, there is some ambiguity to the user as to whether that data is per serving or total. So, either:

1. Add and display the units of the data, e.g., "total"
2. Modify the data and display its units so that it is "per serving"

We have removed our API keys from future commits, but they are still accessible in the commit history. Is there a way to remove them?

Starting with a fresh copy of the extension, adding a new todo in General does not cause it to be printed to task-panel.

• Refreshing the page does not cause those tasks to be printed.
• By first adding a new list and then adding a task, tasks print.
• Previously entered tasks do not print.

Hovering over the quote causes the same behaviour as hovering over the background image information. ie, it hides the other content on the page in order to display the background image.