Follow-up to #2408513: Refactor forum module CSS files inline with our CSS standards

Problem/Motivation

There is a inconsistency in how the .indented class is being used across modules and themes.

Proposed resolution

We create a couple of generic classes like this:

.indented {
  margin-left: 20px; /* LTR */
}
[dir="rtl"] .indented {
  margin-left: 0;
  margin-right: 20px;
}
.indented-double {
  margin-left: 40px; /* LTR */
}
[dir="rtl"] .indented-double {
  margin-left: 0;
  margin-right: 40px;
}

This way, modules can use these classes to give indentation to their elements.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task because code cleanup
Issue priority Not critical because code cleanup
Unfrozen changes Unfrozen because it only changes CSS/markup
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LewisNyman’s picture

Status: Needs work » Active
MathieuSpil’s picture

Assigned: Unassigned » MathieuSpil
Issue tags: +drupaldevdays
MathieuSpil’s picture

Assigned: MathieuSpil » Unassigned
Status: Active » Needs review
FileSize
3.96 KB

After a talk with Lewis, we decided to have a couple of generic classes defined inside system css:

.indented {
  margin-left: 20px; /* LTR */
}
[dir="rtl"] .indented {
  margin-left: 0;
  margin-right: 20px;
}
.indented-double {
  margin-left: 40px; /* LTR */
}
[dir="rtl"] .indented-double {
  margin-left: 0;
  margin-right: 40px;
}

Refactoring all the code that uses this, also removed comment.theme.css because that was the only selectors it was using.

Status: Needs review » Needs work

The last submitted patch, 3: consistent-indented-class-2470729-3.patch, failed testing.

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 3: consistent-indented-class-2470729-3.patch, failed testing.

Manjit.Singh’s picture

@MathieuSpil Adding blank line at the end of file just for testbot.

MathieuSpil’s picture

FileSize
4.01 KB

Because of recent commit of Tim, the patch no longer applied. Should be fixed now.
I didn't change anything about line endings, so not sure if your change in patch #7 is needed?

MathieuSpil’s picture

Status: Needs work » Needs review
Manjit.Singh’s picture

@MathieuSpil I think you have added css in system.theme.css file at the last and forget to add blank line.
Please correct if i am wrong.

MathieuSpil’s picture

Ah, my bad.
Indeed, good catch!

Included my fix + the blank line.

Manjit.Singh’s picture

Yeah looking fine now :) Thanks

LewisNyman’s picture

Issue summary: View changes
Issue tags: +Needs screenshots

Ok great :) We just need some before/after screenshots to show any UI changes

MathieuSpil’s picture

Issue summary: View changes
emma.maria’s picture

Status: Needs review » Needs work

I have investigated the indented class as part of this issue #2512468: Regression: Indented styles for indented comments are missing in Bartik..

For this issue the indented styles now need to exist in Classy. We have split system.theme.css files here #2395853: Split system.module.css and system.theme.css files into SMACSS style components and then these files are being moved over to Classy within this issue #2489460: [Meta] Move module.theme.css files to Classy or Seven.

The forum module also uses the .indented class. The forum-list.html.twig template within Classy adds it.

Also comments in Classy are indented by 25px, Bartik uses 40px. With the indented styles set in #11 there will be visual changes on indented comments for both of these themes.

+++ b/core/modules/system/css/system.theme.css
@@ -597,3 +597,21 @@ form .field-multiple-table .field-multiple-drag .tabledrag-handle {
+.indented {
+  margin-left: 20px; /* LTR */
+}
+[dir="rtl"] .indented {
+  margin-left: 0;
+  margin-right: 20px;
+}
+.indented-double {
+  margin-left: 40px; /* LTR */
+}
+[dir="rtl"] .indented-double {
+  margin-left: 0;
+  margin-right: 40px;
+}
MathieuSpil’s picture

@emma.maria We should indeed check if the changes are desirable or not. Also next to moving this css to classy, what do you suggest?

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

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

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should 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.

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

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.