Issue #1217012 by jyve, aspilicious, brianV, jvc26: Clean up CSS for the Node module

core/modules/node/node.admin.css

+
+/**
+ * @file
+ * Styles for administration pages.
+ */
+
+/**
+ * Revisions overview screen.
+ */
+.revision-current {
+  background: #ffc;
+}

core/modules/node/node.css

-
-.node-unpublished {
-  background-color: #fff4f4;
-}
-.preview .node {
-  background-color: #ffffea;
-}
-td.revision-current {
-  background: #ffc;
-}

core/modules/node/node.info

@@ -7,4 +7,3 @@ files[] = node.module
 files[] = node.test
 dependencies[] = entity
 configure = admin/structure/types
-stylesheets[all][] = node.css

core/modules/node/node.module

@@ -1565,19 +1565,19 @@ function template_preprocess_node(&$variables) {
   // Gather node classes.
   $variables['classes_array'][] = drupal_html_class('node-' . $node->type);
   if ($variables['promote']) {
-    $variables['classes_array'][] = 'node-promoted';
+    $variables['classes_array'][] = 'promoted';
   }
   if ($variables['sticky']) {
-    $variables['classes_array'][] = 'node-sticky';
+    $variables['classes_array'][] = 'sticky';
   }
   if (!$variables['status']) {
-    $variables['classes_array'][] = 'node-unpublished';
+    $variables['classes_array'][] = 'unpublished';
   }
-  if ($variables['teaser']) {
-    $variables['classes_array'][] = 'node-teaser';
+  if ($variables['view_mode']) {
+    $variables['classes_array'][] = drupal_html_class('view-mode-' . $variables['view_mode']);
   }
   if (isset($variables['preview'])) {
-    $variables['classes_array'][] = 'node-preview';
+    $variables['classes_array'][] = 'preview';
   }
 
   // Clean up name so there are no underscores.

core/modules/node/node.pages.inc

@@ -449,7 +449,7 @@ function node_preview($node) {
 function theme_node_preview($variables) {
   $node = $variables['node'];
 
-  $output = '<div class="preview">';
+  $output = '';
 
   $preview_trimmed_version = FALSE;
 
@@ -469,7 +469,6 @@ function theme_node_preview($variables) {
   else {
     $output .= $full;
   }
-  $output .= "</div>\n";
 
   return $output;
 }
@@ -630,6 +629,9 @@ function node_revision_overview($node) {
     '#theme' => 'table',
     '#rows' => $rows,
     '#header' => $header,
+    '#attached' => array (
+      'css' => array(drupal_get_path('module', 'node') . '/node.admin.css'),
+    ),
   );
 
   return $build;

core/modules/node/node.tpl.php

@@ -26,13 +26,13 @@
  *   - node-[type]: The current node type. For example, if the node is a
  *     "Article" it would result in "node-article". Note that the machine
  *     name will often be in a short form of the human readable label.
- *   - node-teaser: Nodes in teaser form.
- *   - node-preview: Nodes in preview mode.
+ *   - view-mode-[view_mode]: The View Mode of the node e.g. teaser or full.
+ *   - preview: Nodes in preview mode.
  *   The following are controlled through the node publishing options.
- *   - node-promoted: Nodes promoted to the front page.
- *   - node-sticky: Nodes ordered above other non-sticky nodes in teaser
+ *   - promoted: Nodes promoted to the front page.
+ *   - sticky: Nodes ordered above other non-sticky nodes in teaser
  *     listings.
- *   - node-unpublished: Unpublished nodes visible only to administrators.
+ *   - unpublished: Unpublished nodes visible only to administrators.
  * - $title_prefix (array): An array containing additional output populated by
  *   modules, intended to be displayed in front of the main title tag that
  *   appears in the template.

core/modules/simpletest/tests/common.test

@@ -806,7 +806,7 @@ class CommonCascadingStylesheetsTestCase extends DrupalWebTestCase {
   function testAddCssFileWithQueryString() {
     $this->drupalGet('common-test/query-string');
     $query_string = variable_get('css_js_query_string', '0');
-    $this->assertRaw(drupal_get_path('module', 'node') . '/node.css?' . $query_string, t('Query string was appended correctly to css.'));
+    $this->assertRaw(drupal_get_path('module', 'node') . '/node.admin.css?' . $query_string, t('Query string was appended correctly to css.'));
     $this->assertRaw(drupal_get_path('module', 'node') . '/node-fake.css?arg1=value1&arg2=value2', t('Query string not escaped on a URI.'));
   }
 }

core/modules/simpletest/tests/common_test.module

@@ -270,7 +270,7 @@ function common_test_library_info() {
  */
 function common_test_js_and_css_querystring() {
    drupal_add_js(drupal_get_path('module', 'node') . '/node.js');
-   drupal_add_css(drupal_get_path('module', 'node') . '/node.css');
+   drupal_add_css(drupal_get_path('module', 'node') . '/node.admin.css');
    // A relative URI may have a query string.
    drupal_add_css('/' . drupal_get_path('module', 'node') . '/node-fake.css?arg1=value1&arg2=value2');
    return '';

core/modules/system/system.theme.css

@@ -37,6 +37,16 @@ tr.odd {
   padding: 0.1em 0.6em;
 }
 
+/**
+ * Publishing status.
+ */
+.unpublished {
+  background-color: #fff4f4;
+}
+.preview {
+  background-color: #ffffea;
+}
+
 /**
  * Markup generated by theme_tablesort_indicator().
  */

core/themes/bartik/css/style.css

@@ -570,33 +570,28 @@ h1#page-title {
 .node .content {
   font-size: 1.071em;
 }
-.node-teaser .content {
+.view-mode-teaser .content {
   font-size: 1em;
 }
-.node-teaser h2 {
+.view-mode-teaser h2 {
   margin-top: 0;
   padding-top: 0.5em;
 }
-.node-teaser h2 a {
+.view-mode-teaser h2 a {
   color: #181818;
 }
-.node-teaser {
+.view-mode-teaser {
   border-bottom: 1px solid #d3d7d9;
   margin-bottom: 30px;
   padding-bottom: 15px;
 }
-.node-sticky {
+.view-mode-teaser.sticky {
   background: #f9f9f9;
   background: rgba(0, 0, 0, 0.024);
   border: 1px solid #d3d7d9;
   padding: 0 15px 15px;
 }
-.node-full {
-  background: none;
-  border: none;
-  padding: 0;
-}
-.node-teaser .content {
+.view-mode-teaser .content {
   clear: none;
   line-height: 1.6;
 }
@@ -622,8 +617,8 @@ h1#page-title {
 .field-type-taxonomy-term-reference ul.links {
   font-size: 0.8em;
 }
-.node-teaser .field-type-taxonomy-term-reference .field-label,
-.node-teaser .field-type-taxonomy-term-reference ul.links {
+.view-mode-teaser .field-type-taxonomy-term-reference .field-label,
+.view-mode-teaser .field-type-taxonomy-term-reference ul.links {
   font-size: 0.821em;
 }
 .field-type-taxonomy-term-reference ul.links {
@@ -647,11 +642,11 @@ ul.links {
   color: #68696b;
   font-size: 0.821em;
 }
-.node-unpublished {
+.unpublished {
   margin: -20px -15px 0;
   padding: 20px 15px 0;
 }
-.node-unpublished .comment-text .comment-arrow {
+.unpublished .comment-text .comment-arrow {
   border-left: 1px solid #fff4f4;
   border-right: 1px solid #fff4f4;
 }

core/themes/bartik/template.php

@@ -101,15 +101,6 @@ function bartik_process_maintenance_page(&$variables) {
   }
 }
 
-/**
- * Override or insert variables into the node template.
- */
-function bartik_preprocess_node(&$variables) {
-  if ($variables['view_mode'] == 'full' && node_is_page($variables['node'])) {
-    $variables['classes_array'][] = 'node-full';
-  }
-}
-
 /**
  * Override or insert variables into the block template.
  */

core/themes/bartik/templates/node.tpl.php

@@ -26,13 +26,13 @@
  *   - node-[type]: The current node type. For example, if the node is a
  *     "Article" it would result in "node-article". Note that the machine
  *     name will often be in a short form of the human readable label.
- *   - node-teaser: Nodes in teaser form.
- *   - node-preview: Nodes in preview mode.
+ *   - view-mode-[view_mode]: The View Mode of the node e.g. teaser or full.
+ *   - preview: Nodes in preview mode.
  *   The following are controlled through the node publishing options.
- *   - node-promoted: Nodes promoted to the front page.
- *   - node-sticky: Nodes ordered above other non-sticky nodes in teaser
+ *   - promoted: Nodes promoted to the front page.
+ *   - sticky: Nodes ordered above other non-sticky nodes in teaser
  *     listings.
- *   - node-unpublished: Unpublished nodes visible only to administrators.
+ *   - unpublished: Unpublished nodes visible only to administrators.
  * - $title_prefix (array): An array containing additional output populated by
  *   modules, intended to be displayed in front of the main title tag that
  *   appears in the template.