AdrianGub
commented
10 months ago - [x] The first element is the title "Allergens List A-Z".
- [x] The second element is a list of blue buttons displaying all the letters. If hovered they become darker.
- [x] If a button is pressed, the page will automatically scroll down until the selected letter section and squares it.
- [x] The third element are the letters sections. All of them are headed by a blue title that displays the letter and then followed by a list of all possible alergens starting by that letter.
- [x] If an allergen is hovered, the background color of the allergen will turn blue.
- [x] If an allergen is pressed, the background color will turn orange and a Selected Allergens popup will appear at the right side of the screen.
- [x] If an allergen is pressed again, it will get removed from the list.
- [x] The popup will include the list of the selected allergens.
- [x] Each allergen is followed by a cross button to remove the allergens of the list.
- [x] A "Search" blue button will appear at the end of the popup. If hovered it turns darker.
- [x] If "Search" button is clicked, in case there are matching recipes with the allergens, an alert will appear displaying "No matching recipes were found" as we want to show all the recipes that don't have the selected allergens. The selected allergens list will get empty.
- [x] If "Search" button is clicked, in case there are no matching recipes with the allergens, the page will show a list of all the recipes that do not contain the selected allergens. The selected allergens list will get empty.
- [x] At the top side of the page, a breadcrumb will appear to ease the user's navigation. If any item of the breadcrumb is hovered, it will become blue.
- [x] If Homepage item is pressed, the user will be redirected to the Home Page.
- [x] If Allergens Filter item is pressed, the user will be redirected to the Allergens Filter Page.