Improve Umami demo's support for managing field display settings

The umami designs #2900720: Designs for the Out of the Box experience intiative were created in support of a Drupal demo that closely mimics the kind of polished layouts you find in real-world food magazine websites. Layouts for some of the features and fields are more complex and our plan is to deliver these layouts through the new upcoming layout features in core. Since Umami is to be built on stable core features only, the theme currently hard-wires some features in favour of following the designs and methods you might use if theming this type of site in a client-specific scenario.

It is our plan to demo any layout features in Drupal core as soon as they are stable. In the mean time, we have the option to revisit aspects of the original designs in order to consider better supporting the existing Manage Display field settings and display modes of Drupal core.

The main benefits in doing so are improved support for curious demo users who choose to experiment by making changes to the manage display settings, and readying the theme to be more adaptable to new core layout functionality. Since we are demoing display settings as they are today, we probably do want to ensure that any user-made changes are properly reflected and make sense in a demo context.

I believe the proposed design/layout changes on this issue will therefore help to provide a core demo that is more functional, with only limited impact on the quality of the final design. We should also be in a better position to progressively enhance the theme's design as layout modules become supported by the demo.

Proposed alterations

The following theme features are proposed to be adjusted for 8.6 and the attached visuals support these descriptions:

Article and recipe 'Card' display modes

Changing the cards will affect the front page, articles listing, recipes list and promoted items on recipe and article pages.

1. Present the title as the first field, followed by any fields set as visible in manage display, followed by the 'view' link. Perhaps with a CSS-only exception to this field order for the 3 front page promoted cards
2. Removal of edge-to-edge images to better support the possibility of any field being presented in a card and with more predictable presentation results
3. Use of flexbox to progressively enhance horizontal alignment (we may have to compromise on older browsers). Following a title-first layout exposes us to the problem of different length headings dictating the alignment of subsequent fields across a row of cards. Images will, for example, be noticeably out of whack with others in the same row on larger screen widths. I've carried out some experiments in flexbox to see if we can fix this with CSS only https://jsfiddle.net/kjays/6sz1o4qp

Article content type

The article content type is affected by these proposed changes only slightly.

1. Author and date will be displayed immediately after title
2. Category, lead image and body will be displayed as per the content type's manage display settings
3. Image presentation will be adjusted to fill the full width of the content column and no longer be 'pulled'. Images for the demo are currently included in Drupal core and so we need to keep their size right down (currently 768px wide). If images stretched to 100% of the container width begin looking too grainy, then max-width of the image can be limited to 768px as a compromise for now

Recipe content type

The existing layout for the recipe content type is all set to provide a great demo of upcoming layout features and as such, its current presentation needs to be more heavily adjusted in support of the existing manage display features. Proposed changes include:

1. All fields to be presented in a single stacked column
2. Summary moved to be the first field after the hard-wired title field
3. Lead recipe image field continues to be sourced by a 768px wide image. I propose we limit display of this image to that width in order to avoid the image becoming way oversized and out of keeping with the purpose of the page
4. We don't have a sidebar on this content type to restrain the width of the main content column and we will therefore end up with a lot of empty space down the right side of the content. We have the option to lessen the negative visual impact of this space by styling the wrapper for the image and ingredients fields to have some form of a background pattern/style so that at larger screen sizes, we have at least some form of feature design filling the page's width
5. Preparation, cooking time, number of servings and difficulty fields will need to be themed as isolated field components so that they work in any placement. Icons will likely need to be included from CSS or specific field templates. (CSS is likely the preferred option given previous experiments I carried out with the field layout module)
6. The Ingredients field is likely to always contain short lengths of content. I propose a simple flexbox (or other) 2 column list presentation with max-width and the option to background-fill the field as a band to fill the negative space
7. The Method field can be presented as a width-limited (for easier reading) list as per the current styling.

Remaining tasks

• Adjust the visuals for any errors or changes required from our discussions
• Create issues to cover each of the proposed changes
• Code and cross-browser reviews for each of the child patches