nextcloud / nextcloud/cookbook

Update Recipe view

Open
#2,194 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement Frontend
Dominant language
HTML
Stars
641
Forks
113
Avg merge
21h 31m
Merged PRs (30d)
26

Description

After the design review on 2024-03-12, the layout for a recipe view should be updated:

  • Title
  • Image (with a max width)
  • Ingredients (1 column) + description, rating, tags, metadata, utensils (1 column)
  • Steps heading
  • Ingredients for one section (1 col) + steps for one section (1 col)
  • Ingredients for another section (1 col) + steps for another section (1 col)
  • Ingredients for another section (1 col) + steps for another section (1 col)

The goal is to not use a FAB in mobile. Just show the ingredients for the section before the instructions --> implement this by using a flex layout. In desktop it would be one row with ingredients and instructions, on mobile it would be one column

Desktop View
01 - Recipe View Layout

Mobile View
01 - Recipe View Layout mobile

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the recipe view UI and compare it with the linked desktop and mobile designs. The work is done when the title, image, recipe details, and section ingredients and steps match the requested layout, with ingredients before instructions on mobile and no mobile FAB.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.