Suggested commit message:

git commit -m 'Issue #2643250 by Chi, emma.maria, talhaparacha, Himanshu5050: Bartik: replace the field--name-field-user-picture class with field--name-user-picture in the CSS'

The referenced class should be field--name-user-picture.

.node__meta .field--name-field-user-picture img {
  float: left; /* LTR */
  margin: 1px 20px 0 0; /* LTR */
}
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Chi created an issue. See original summary.

Chi’s picture

Chi’s picture

Status: Active » Needs review
dawehner’s picture

Status: Needs review » Needs work
Issue tags: +Needs screenshots

It would be nice to have before and after pictures.

Chi’s picture

Title: Bartik's styling of user picture is broken » Bartik: remove non existing field--name-field-user-picture class
Status: Needs work » Needs review
Issue tags: -Needs screenshots
FileSize
992 bytes

There is no visual difference because that picture also has field--type-image class. I propose removing that classes at all.

emma.maria’s picture

Category: Bug report » Task
Priority: Normal » Minor
Issue tags: +CSS, +Novice, +Needs screenshots

This issue needs screenshots to show that removing the code causes no visual differences to the element it affects.

emma.maria’s picture

Version: 8.0.x-dev » 8.2.x-dev
Himanshu5050’s picture

Hey,
I go with @chi, as no visual difference is observed before and after applying the patch, still I attempt to show with snapshots.

Before applying Patch:
Before applying patch

Patch Applied:

$ git apply 2643250-5.patch

hsha20@DLUHSHA2011265 MINGW64 /c/xampp/htdocs/d8 (drupal-select-box-un-styled)
$ git status
On branch drupal-select-box-un-styled
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   core/themes/bartik/css/components/field.css
        modified:   core/themes/bartik/css/components/node.css

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .buildpath
        .project
        .settings/
        2643250-5.patch
        sites/default/files/
        sites/default/settings.php

no changes added to commit (use "git add" and/or "git commit -a")

After patch applied:
After patch applied

Checked for default user image (user_picture) and create custom image field (field_user_image) to capture scenario in snapshots.

emma.maria’s picture

Title: Bartik: remove non existing field--name-field-user-picture class » Bartik: replace the field--name-field-user-picture class with field--name-user-picture in the CSS.
Issue summary: View changes
Status: Needs review » Needs work
Issue tags: -Needs screenshots
FileSize
226.28 KB
222.81 KB

Just noticed something in the patch. We shouldn't be removing the section below in the patch as it adds specific styling to the user picture in nodes. These styles are broken at head right now and we need to replace the class in the CSS with what we have in the markup, not remove it entirely.

+++ b/core/themes/bartik/css/components/node.css
@@ -40,15 +40,6 @@
-.node__meta .field--name-field-user-picture img {
-  float: left; /* LTR */
-  margin: 1px 20px 0 0; /* LTR */
-}
-[dir="rtl"] .node__meta .field--name-field-user-picture img {
-  float: right;
-  margin-left: 20px;
-  margin-right: 0;
-}

Please can the above code be put back into the patch plus the class replaced with the current one in the markup... field--name-user-picture.

These styles are needed for the user picture layout in nodes, see below.

Before

After

talhaparacha’s picture

FileSize
83.06 KB
84.88 KB

The patch from #2 does what's asked in #9. Plus it also fixes the naming in the original class instead of removing it altogether. I think that patch should be used instead of creating a new one.

Accordingly, that patch applies cleanly to 8.2.x (commit # 463d844). No visual difference is observed before and after applying the patch as shown in the screenshots below.

Before:
Before applying patch

After:
After applying patch

talhaparacha’s picture

Status: Needs work » Needs review
emma.maria’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

Sweet!

So the patch to be considered for commit is in #2.

Thanks all!!!

Suggested commit message:

git commit -m 'Issue #2643250 by Chi, emma.maria, talhaparacha, Himanshu5050: Bartik: replace the field--name-field-user-picture class with field--name-user-picture in the CSS'

chris.smith’s picture

Tested at Drupal Toronto sprint. +1 to RBTC.

star-szr’s picture

Status: Reviewed & tested by the community » Fixed

Committed d3ef26b (#2) and pushed to 8.2.x. This gets all the cases of the old class name. Thanks!

  • Cottser committed d3ef26b on 8.2.x
    Issue #2643250 by Chi, emma.maria, talhaparacha, Himanshu5050: Bartik:...

Status: Fixed » Closed (fixed)

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