#2980029: Improve Umami demo's support for managing field display settings proposes changes to Demo Umami's 'card' view modes in order to support a user making changes to the Manage Display settings for the Article and Recipe content types and for these changes to be reflected in the theme in an intuitive way for demonstrating how Drupal core's view modes are intended to work.

The proposed changes include rationalising the view modes currently in use as part of this work. Highlighted Small, Highlighted Medium, Highlighted Top and Highlighted Bottom are proposed to become:

'Card' view mode for the presentation of articles and recipes on their landing pages and in asides. This view mode will include the 'Difficulty' field meta for recipes.

'Card common' view mode for presenting articles and recipes in promotional contexts where we only want to present fields that are common between the content types. This view mode is used for the front page.

'Card common alt' view mode. This view mode is as per 'Card common' but illustrates the use of a different image style for the cards by rendering the image as a square ratio. This view mode is used to create the promotional band of cards at the head of the front page.

Tasks:

  • Create a patch that provides the necessary changes to Demo Umami's configuration and the Umami theme to reflect the designs in the parent issue
  • Patch review and testing
  • x-browser testing
  • Accessibility testing
  • Testing for how well the alterations support the types of field display changes a user exploring Drupal might make in the Manage Display settings for card view modes on Article and Recipe content types
CommentFileSizeAuthor
#13 drupal_core-umami-cards-2982781-13-8.6.x.patch42.63 KBkjay
#10 drupal_core-umami-cards-2982781-10-8.6.x.patch42.54 KBkjay
#3 Screen Shot 2018-07-04 at 16.18.44.png800.36 KBjohn cook
#3 Screen Shot 2018-07-04 at 16.18.35.png929.75 KBjohn cook
#3 Screen Shot 2018-07-04 at 16.18.09.png400.33 KBjohn cook
#3 Screen Shot 2018-07-04 at 16.18.00.png486.41 KBjohn cook
#3 Screen Shot 2018-07-04 at 16.17.29.png1.52 MBjohn cook
#3 Screen Shot 2018-07-04 at 16.17.12.png1.95 MBjohn cook
#3 Screen Shot 2018-07-04 at 16.16.53.png524.32 KBjohn cook
#3 Screen Shot 2018-07-04 at 16.16.38.png744.86 KBjohn cook
#3 Screen Shot 2018-07-04 at 16.16.08.png1.88 MBjohn cook
#3 Screen Shot 2018-07-04 at 16.15.41.png855.11 KBjohn cook
#2 drupal_core-umami-cards-2982781-1-8.6.x.patch42.88 KBkjay

Comments

kjay created an issue. See original summary.

kjay’s picture

kjay commented
Status: Active » Needs review
StatusFileSize
new drupal_core-umami-cards-2982781-1-8.6.x.patch42.88 KB

Here's a patch and description of all the things I've changed ready for review.

Card view mode:

- Creates a new view mode called 'Card'
- Set 'Card' view mode to adopt the current settings of the 'Highlighted small' view mode for Article
- Set 'Card' view mode to adopt the current settings of the 'Highlighted small' view mode for Recipe except for hiding links, setting the label for the 'Difficulty' field to be inline, and moving 'Difficulty' to appear prior to 'Image'
- Set the following Views: Recipes, Taxonomy term, Articles aside, and Featured Articles to use the new 'Card' view mode in place of 'Highlighted small'
- Disables 'Highlighted small' view mode from Article and Recipe content types
- Deleted the 'Highlighted small' view mode

Card common view mode

- Creates a new view mode call 'Card common'
- Adds 'Card common' to article and recipe display settings
- For both Article and Recipe content type, sets 'Image' to be the only field available to this view mode using responsive image, 3x2
- Remove 'Highlighted Top' and 'Highlighted Bottom' from display settings for Article and Recipe content types. These two view modes are replaced by this 'Card common' view mode
- Adjusts the 'Block: Promoted Items - Single' display on 'Promoted items' View to use this 'Card common' view mode
- Adjusts the 'Page' display on 'Frontpage' View to use this 'Card common' view mode
- Deletes 'Highlighted Bottom' view mode
- Deletes 'Highlighted Top' view mode

Card common alt view mode

- Creates a new view mode call 'Card common alt'
- Adds 'Card common alt' to article and recipe display settings
- For both Article and Recipe content type, sets 'Image' to be the only field available to this view mode using responsive image, square
- Remove 'Highlighted Medium' from display settings for Article and Recipe content types. This view mode is replaced by this 'Card common alt' view mode
- Adjusts the 'Attachment: Promoted Items Double' display on 'Promoted items' View to use this 'Card common alt' view mode
- Deletes 'Highlighted Medium' view mode

Card styling:

- Introduces a new 'card' components directory with contained card.css in the Umami theme
- Introduces 'node--card.html.twig' in place of 'node--highlighted-small.html.twig'
- Introduces a new class of 'view-mode-card' to the article wrapper of node--card.html.twig in order to apply default 'card' styles. This should keep our styles across the various card types more DRY
- 'node--card.html.twig' displays its fields via {{ content }} as opposed to splitting out any specific fields. This is the key part for supporting field display settings in these cards
- 'node--card.html.twig' continues to hard-code the link through to the content
- 'node--card.html.twig' attaches the 'umami/view-mode-card' library
- Adjusts styles for the cards to reflect the designs, including normalising how we display meta fields such as 'Difficulty' (bold label)
- Introduces the 'card-common' components directory with contained card-common.css in the Umami theme
- Introduces 'node--card-common.html.twig' in place of 'node--highlighted-top.html.twig' and 'node--highlighted-bottom.html.twig'. Used to set the 'Read more' link prior to {{ content }}
- Introduces the 'card-common-alt' components directory with contained card-common-alt.css in the Umami theme
- Introduces 'node--card-common-alt.html.twig' in place of 'node--highlighted-medium.html.twig'. Used to set the 'Read more' link prior to {{ content }}
- Deleted the components directories for 'Highlighted Top', 'Highlighted Bottom', 'Highlighted Medium', 'Highlighted Small'
- Deleted the .libraries reference to the previous component directory contents
- Deleted the 'Highlighted Top', 'Highlighted Bottom', 'Highlighted Medium', 'Highlighted Small' html.twig template files

john cook’s picture

john cook commented
Issue summary: View changes
Status: Needs review » Needs work
StatusFileSize
new Screen Shot 2018-07-04 at 16.15.41.png855.11 KB
new Screen Shot 2018-07-04 at 16.16.08.png1.88 MB
new Screen Shot 2018-07-04 at 16.16.38.png744.86 KB
new Screen Shot 2018-07-04 at 16.16.53.png524.32 KB
new Screen Shot 2018-07-04 at 16.17.12.png1.95 MB
new Screen Shot 2018-07-04 at 16.17.29.png1.52 MB
new Screen Shot 2018-07-04 at 16.18.00.png486.41 KB
new Screen Shot 2018-07-04 at 16.18.09.png400.33 KB
new Screen Shot 2018-07-04 at 16.18.35.png929.75 KB
new Screen Shot 2018-07-04 at 16.18.44.png800.36 KB

The view mode configuration makes sense and removes the layout words from the view mode names. The views have all been updated to use the new view modes.

There are some differences between the old and new view modes.

Home page

highlighted-top -> card-common

Before (highlighted-top) After (card-common)
  • The image has gained a margin around it.

highlighted-medium -> card-common-alt

Before (highlighted-medium) After (card-common-alt)
  • The image has gained a margin around it.
  • The difficulty is missing.

highlighted-bottom -> card-common

Before (highlighted-bottom) After (card-common)
  • The image has gained a margin around it.
  • The image now appears at the bottom of the card.

Recipes page

highlighted-small -> card

Before (highlighted-small) After (card)
  • The image has gained a margin around it.
  • The fields are in the reverse order.

Articles page

highlighted-small -> card

Before (highlighted-small) After (card)
  • The image has gained a margin around it.
  • The title appears above the image.
kjay’s picture

kjay commented

Thank you @John Cook for your careful review

Here's some notes on your points:

a) highlighted-top -> card-common

The image has gained a margin around it.

The screenshot looks correct, as per the proposed design: Front page proposed design

If new fields are added / moved in the display settings for this card view mode, they will consistently have this margin.

b) highlighted-medium -> card-common-alt

  • The image has gained a margin around it.
  • The difficulty is missing.

As per a) above, the margin follows the proposed design. Difficulty was not supposed to be output in this promoted area. The original idea was to have these cards contain just the common fields between Article and Recipe content type. This helps to visually reinforce that there is something 'different' going on with this view mode vs the others from a demo perspective. Both of these points do seem to be working as intended.

c) highlighted-bottom -> card-common

  • The image has gained a margin around it.
  • The image now appears at the bottom of the card.

As per a), the margin is as intended. The image appearing at the bottom of the card order is intended for rationalising the cards in use. We have enough examples of these view modes and so changing the design here to use an existing card simplifies the features.

d) highlighted-small -> card

  • The image has gained a margin around it.
  • The fields are in the reverse order.

As per a), margin as intended. The fields now switch to an order that intuitively supports changes being made to them in the Manage Display settings. New fields will appear and be sorted as per the display settings between the title of the card and the view content link. Since Drupal does not currently support display settings for the title or the view content link, it still could be confusing for a demo user that these are not available for adjusting, but this design alteration presents the most commonly used card view mode in an intuitive order. This screenshot shows this working as proposed.

e) highlighted-small -> card

As per d) but for Article cType. Screenshot shows the patch working as designed.

kjay’s picture

kjay commented
Status: Needs work » Needs review

Setting back to needs review since @john cook's review shows the patch to be working as designed

john cook’s picture

john cook commented
Status: Needs review » Reviewed & tested by the community

With kjay's comments in #4, I'm happy to set this to RTBC.

john cook’s picture

john cook commented
Status: Reviewed & tested by the community » Needs review

Setting to needs review by request of kjay.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

markconroy’s picture

markconroy commented
Status: Needs review » Needs work

The HTML within node--common.html.twig and node--common-alt is identical, except for the libraries that they load. Let's leave node--common.html.twig as is, except wrap the specific/differing library in a twig block

{% block libraries %}
  {{ attach_library('umami/view-mode-card-common') }}
{% endblock %}

And then in node--common-alt.html.twig we can extend it like so (shows a good use of Twig extend):

{% extends node--common.html.twig %}
{% block libraries %}
  {{ attach_library('umami/view-mode-card-common-alt') }}
{% endblock %}

Is the 'card' view mode used anywhere for 'article' content type? If not, maybe we should delete it? Or maybe leave it there in case someone wants to use it in a view later.

We should run csscomb.json over these css files as well, to keep them in line with drupal coding standards.

card.css

For this .view-mode-card .node__title .node__link I think we can be less specific, the .node__link will always be inside the .node__title, so let's change that to just .view-mode-card .node__link

Same with .view-mode-card .node__link .field--name-title, I think .view-mode-card .field--name-title will do.

We have two sections where we style the same selector, let's combine them:

.view-mode-card .field--name-title {
  font-size: 1.424rem;
  font-weight: 400;
}

...

.view-mode-card .node__link .field--name-title {
  text-decoration: none;
  color: #000;
}

And let's move this block up above that, so the theming for the .node__title (wrapper) is before the .field--name-title

.view-mode-card .node__title {
  flex-grow: 1;
}

After that, looks like we'll be ready to roll with this one.

kjay’s picture

kjay commented
Status: Needs work » Needs review
StatusFileSize
new drupal_core-umami-cards-2982781-10-8.6.x.patch42.54 KB

New patch but no interdiff for this one - I'm getting errors with one of the yml files when I do interdiff.

This patch addresses the issues listed in #9. @markconroy. I believe Article Card Display Mode is required being used for the cards listing on /articles.

I have applied this patch to a fresh 8.6 install and it applies fine.

Status: Needs review » Needs work

The last submitted patch, 10: drupal_core-umami-cards-2982781-10-8.6.x.patch, failed testing. View results

markconroy’s picture

markconroy commented

Can we make sure @smaz gets a credit on this please?

kjay’s picture

kjay commented
StatusFileSize
new drupal_core-umami-cards-2982781-13-8.6.x.patch42.63 KB

I think I have this correct. My previous patch is failing because as @eli-t has pointed out, I needed to merge the latest config from 8.6.x into my patch branch before creating the attached.

I've applied the attached patch locally without issue and the config looks provides the revised display modes and moderation feature on the node edit form.

smaz’s picture

smaz
Primary language English
Location England, UK
commented
Status: Needs work » Needs review

Setting to needs review.

markconroy’s picture

markconroy commented
Status: Needs review » Reviewed & tested by the community

Ready for R2D2 RTBC

  • Gábor Hojtsy committed 1221577 on 8.7.x 
    Issue #2982781 by kjay, John Cook, markconroy, smaz: Support display...
gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Version: 8.7.x-dev » 8.6.x-dev
Status: Reviewed & tested by the community » Fixed

Committed bc0e16c and pushed to 8.7.x and 8.6x. Thanks!

  • Gábor Hojtsy committed bc0e16c on 8.6.x 
    Issue #2982781 by kjay, John Cook, markconroy, smaz: Support display...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.