Follow-up to #2335523: Remove node.module.css from node/drupal.node library and deprecate node/form library

Problem/Motivation

The layout-column classes don't meet our CSS standards - https://www.drupal.org/node/1886770

Proposed resolution

Change the classes and replace all instances of them in core

Remaining tasks

Write the patch
Test

User interface changes

None

API changes

None

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task coding standards
Issue priority Not critical because coding standards
Unfrozen changes Unfrozen because it only changes CSS/markup

Comments

lewisnyman’s picture

Component: node system » CSS
Issue summary: View changes
Status: Reviewed & tested by the community » Active
axe312’s picture

This might overlap with #2471791: Improve the CSS layout framework for Drupal's admin interface since it proposes a replacement for these layout classes.

lewisnyman’s picture

hmm true, but I'm think we should do this anyway because #2471791: Improve the CSS layout framework for Drupal's admin interface need bikeshedding and might not happen for a while.

jaxxed’s picture

The following need to be exchanged?:

.layout-column.half => .layout-column--half
.layout-column.three-quarter => .layout-column--three-quarter
.layout-column.third =>.layout-column--third
.layout-column.two-thirds =>.layout-column--two-thirds

lewisnyman’s picture

Yep

martins.kajins’s picture

Status: Active » Needs review
StatusFileSize
new540 bytes

Changed CSS class names so they are according to Drupal Coding standards.
.layout-column.half --> .layout-column--half
.layout-column.three-quarter --> .layout-column--three-quarter
.layout-column.third -->.layout-column--third

lewisnyman’s picture

Status: Needs review » Needs work

@martins.kajins We also have to go through the markup to to make sure the classes there match the CSS.

martins.kajins’s picture

Status: Needs work » Needs review
StatusFileSize
new2.99 KB

Updated previous patch and changed CSS classes in markup.

jaxxed’s picture

Status: Needs review » Reviewed & tested by the community

@LewisNyman the latest patch looks good to me.

Note that I couldn't find any ".layout-column.third -->.layout-column--third" changes

lewisnyman’s picture

Status: Reviewed & tested by the community » Needs work

I found one instance of the layout-column.quarter:

/Library/WebServer/Documents/core/modules/help/src/Controller/HelpController.php:
   78        '#type' => 'container',
   79        'links' => array('#theme' => 'item_list'),
   80:       '#attributes' => array('class' => array('layout-column', 'quarter')),
   81      );
   82      $output = array(
rajeevk’s picture

Changes done as per @LewisNyman comment & patch/interdiff attached.

lewisnyman’s picture

Status: Needs review » Needs work

Ah you know what I just realised? We have to include both the layout-column class and the layout-column--variant classes.

+++ b/core/modules/help/src/Controller/HelpController.php
@@ -77,7 +77,7 @@ protected function helpLinksAsList() {
-      '#attributes' => array('class' => array('layout-column', 'quarter')),
+      '#attributes' => array('class' => array('layout-column--quarter')),

As an example this would be 'class' => array('layout-column','layout-column--quarter')

rajeevk’s picture

Attaching patch again..

lewisnyman’s picture

Status: Needs review » Needs work
+++ b/core/modules/config_translation/templates/config_translation_manage_form_element.html.twig
@@ -15,10 +15,10 @@
-  <div class="layout-column half translation-set__source">
+  <div class="layout-column--half translation-set__source">
...
-  <div class="layout-column half translation-set__translated">
+  <div class="layout-column--half translation-set__translated">

+++ b/core/modules/system/templates/admin-page.html.twig
@@ -17,7 +17,7 @@
-    <div class="layout-column half">
+    <div class="layout-column--half">

+++ b/core/modules/update/templates/update-version.html.twig
@@ -19,12 +19,12 @@
+    <div class="project-update__version-title layout-column--quarter">{{ title }}</div>
+    <div class="project-update__version-details layout-column--quarter">
...
+    <div class="layout-column--half">

Thanks, we still need to do this for these instances

rajeevk’s picture

irina.rozite’s picture

Status: Needs review » Reviewed & tested by the community

Latest patch looks good to me and it's as requested in comment #14

Status: Reviewed & tested by the community » Needs work

lewisnyman’s picture

Status: Needs work » Reviewed & tested by the community

Ghost fail

Status: Reviewed & tested by the community » Needs work

saki007ster’s picture

Status: Needs work » Needs review

Patch in comment #15 is fine.

jaxxed’s picture

Status: Needs review » Reviewed & tested by the community

Has been RTBCed already 2x

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed cec8f5e and pushed to 8.0.x. Thanks!

  • alexpott committed cec8f5e on 8.0.x
    Issue #2471739 by RajeevK, martins.kajins, LewisNyman, jaxxed: Convert...
alexpott’s picture

Status: Fixed » Needs work

This broke admin/config

  • alexpott committed b921d2b on 8.0.x
    Revert "Issue #2471739 by RajeevK, martins.kajins, LewisNyman, jaxxed:...
lewisnyman’s picture

Issue summary: View changes
StatusFileSize
new758.38 KB

Thanks Alex, here's the problem. We are missing the layout-column class:

pektinasen’s picture

alexpott’s picture

Status: Needs work » Needs review
lewisnyman’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: -Novice
StatusFileSize
new799.72 KB

Thanks, this looks correct:

Status: Reviewed & tested by the community » Needs work

lewisnyman’s picture

Status: Needs work » Reviewed & tested by the community
webchick’s picture

Status: Reviewed & tested by the community » Fixed

Looks like the previous problem with admin/config is now resolved.

Committed and pushed to 8.0.x. Thanks!

  • webchick committed 1a70fc1 on 8.0.x
    Issue #2471739 by RajeevK, martins.kajins, pektinasen, LewisNyman,...

Status: Fixed » Closed (fixed)

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