Commit 91d867f5 authored by alexpott's avatar alexpott

Issue #1982256 by mortendk, rteijeiro, tim.plunkett, LewisNyman, tlattimore,...

Issue #1982256 by mortendk, rteijeiro, tim.plunkett, LewisNyman, tlattimore, yannickoo, ry5n: Clean up html.html.twig markup.
parent f5a948f8
...@@ -2511,22 +2511,6 @@ function template_preprocess_html(&$variables) { ...@@ -2511,22 +2511,6 @@ function template_preprocess_html(&$variables) {
// Add a class that tells us whether the page is viewed by an authenticated user or not. // Add a class that tells us whether the page is viewed by an authenticated user or not.
$variables['attributes']['class'][] = $variables['logged_in'] ? 'logged-in' : 'not-logged-in'; $variables['attributes']['class'][] = $variables['logged_in'] ? 'logged-in' : 'not-logged-in';
// Add information about the number of sidebars.
if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
$variables['attributes']['class'][] = 'two-sidebars';
}
elseif (!empty($variables['page']['sidebar_first'])) {
$variables['attributes']['class'][] = 'one-sidebar';
$variables['attributes']['class'][] = 'sidebar-first';
}
elseif (!empty($variables['page']['sidebar_second'])) {
$variables['attributes']['class'][] = 'one-sidebar';
$variables['attributes']['class'][] = 'sidebar-second';
}
else {
$variables['attributes']['class'][] = 'no-sidebars';
}
// Populate the body classes. // Populate the body classes.
if ($suggestions = theme_get_suggestions(arg(), 'page', '-')) { if ($suggestions = theme_get_suggestions(arg(), 'page', '-')) {
foreach ($suggestions as $suggestion) { foreach ($suggestions as $suggestion) {
...@@ -2539,11 +2523,6 @@ function template_preprocess_html(&$variables) { ...@@ -2539,11 +2523,6 @@ function template_preprocess_html(&$variables) {
} }
} }
// If on an individual node page, add the node type to body classes.
if ($node = menu_get_object()) {
$variables['attributes']['class'][] = drupal_html_class('node-type-' . $node->getType());
}
// Initializes attributes which are specific to the html and body elements. // Initializes attributes which are specific to the html and body elements.
$variables['html_attributes'] = new Attribute; $variables['html_attributes'] = new Attribute;
......
...@@ -577,6 +577,16 @@ function node_is_page(EntityInterface $node) { ...@@ -577,6 +577,16 @@ function node_is_page(EntityInterface $node) {
return (!empty($page_node) ? $page_node->id() == $node->id() : FALSE); return (!empty($page_node) ? $page_node->id() == $node->id() : FALSE);
} }
/**
* Implements hook_preprocess_HOOK() for HTML document templates.
*/
function node_preprocess_html(&$variables) {
// If on an individual node page, add the node type to body classes.
if ($node = menu_get_object()) {
$variables['attributes']['class'][] = drupal_html_class('node-type-' . $node->getType());
}
}
/** /**
* Implements hook_preprocess_HOOK() for block templates. * Implements hook_preprocess_HOOK() for block templates.
*/ */
......
...@@ -63,7 +63,7 @@ html[dir="rtl"] { ...@@ -63,7 +63,7 @@ html[dir="rtl"] {
#overlay-title:focus { #overlay-title:focus {
outline: 0; outline: 0;
} }
.overlay #skip-link a { .overlay .skip-link {
color: #fff; /* This is white to contrast with the dark background behind it. */ color: #fff; /* This is white to contrast with the dark background behind it. */
} }
......
...@@ -35,11 +35,9 @@ ...@@ -35,11 +35,9 @@
{{ scripts }} {{ scripts }}
</head> </head>
<body{{ attributes }}> <body{{ attributes }}>
<div id="skip-link"> <a href="#main-content" class="visually-hidden focusable skip-link">
<a href="#main-content" class="visually-hidden focusable"> {{ 'Skip to main content'|t }}
{{ 'Skip to main content'|t }} </a>
</a>
</div>
{{ page_top }} {{ page_top }}
{{ page }} {{ page }}
{{ page_bottom }} {{ page_bottom }}
......
...@@ -13,6 +13,22 @@ ...@@ -13,6 +13,22 @@
* Adds body classes if certain regions have content. * Adds body classes if certain regions have content.
*/ */
function bartik_preprocess_html(&$variables) { function bartik_preprocess_html(&$variables) {
// Add information about the number of sidebars.
if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
$variables['attributes']['class'][] = 'two-sidebars';
}
elseif (!empty($variables['page']['sidebar_first'])) {
$variables['attributes']['class'][] = 'one-sidebar';
$variables['attributes']['class'][] = 'sidebar-first';
}
elseif (!empty($variables['page']['sidebar_second'])) {
$variables['attributes']['class'][] = 'one-sidebar';
$variables['attributes']['class'][] = 'sidebar-second';
}
else {
$variables['attributes']['class'][] = 'no-sidebars';
}
if (!empty($variables['page']['featured'])) { if (!empty($variables['page']['featured'])) {
$variables['attributes']['class'][] = 'featured'; $variables['attributes']['class'][] = 'featured';
} }
......
...@@ -114,7 +114,7 @@ body, ...@@ -114,7 +114,7 @@ body,
} }
#header, #header,
#footer-wrapper, #footer-wrapper,
#skip-link, .skip-link,
ul.contextual-links, ul.contextual-links,
ul.links, ul.links,
ul.primary, ul.primary,
...@@ -315,17 +315,18 @@ ul.tips { ...@@ -315,17 +315,18 @@ ul.tips {
} }
/* ------------------ Header ------------------ */ /* ------------------ Header ------------------ */
#skip-link { .skip-link,
.skip-link.visually-hidden.focusable {
left: 50%; left: 50%;
margin-left: -5.25em; margin-left: -5.25em;
margin-top: 0; margin-top: 0;
position: absolute; position: absolute !important;
width: auto; width: auto;
z-index: 50; z-index: 50;
} }
#skip-link a, .skip-link,
#skip-link a:link, .skip-link:link,
#skip-link a:visited { .skip-link:visited {
background: #444; background: #444;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
color: #fff; color: #fff;
...@@ -336,9 +337,9 @@ ul.tips { ...@@ -336,9 +337,9 @@ ul.tips {
text-decoration: none; text-decoration: none;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
} }
#skip-link a:hover, .skip-link:hover,
#skip-link a:active, .skip-link:active,
#skip-link a:focus { .skip-link:focus {
outline: 0; outline: 0;
} }
#logo { #logo {
......
...@@ -20,9 +20,9 @@ ...@@ -20,9 +20,9 @@
</head> </head>
<body class="{{ attributes.class }}"{{ attributes }}> <body class="{{ attributes.class }}"{{ attributes }}>
<div id="skip-link"> <a href="#main-content" class="visually-hidden focusable skip-link">
<a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a> {{ 'Skip to main content'|t }}
</div> </a>
<div id="page-wrapper"><div id="page"> <div id="page-wrapper"><div id="page">
......
...@@ -30,6 +30,20 @@ function seven_library_info() { ...@@ -30,6 +30,20 @@ function seven_library_info() {
return $libraries; return $libraries;
} }
/**
* Implements hook_preprocess_HOOK() for HTML document templates.
*/
function seven_preprocess_html(&$variables) {
// Add information about the number of sidebars.
if (!empty($variables['page']['sidebar_first'])) {
$variables['attributes']['class'][] = 'one-sidebar';
$variables['attributes']['class'][] = 'sidebar-first';
}
else {
$variables['attributes']['class'][] = 'no-sidebars';
}
}
/** /**
* Implements hook_preprocess_HOOK() for page templates. * Implements hook_preprocess_HOOK() for page templates.
*/ */
......
...@@ -158,7 +158,7 @@ pre { ...@@ -158,7 +158,7 @@ pre {
/** /**
* Skip link. * Skip link.
*/ */
#skip-link { .skip-link {
margin-top: 0; margin-top: 0;
position: absolute; position: absolute;
left: 50%; /* LTR */ left: 50%; /* LTR */
...@@ -166,13 +166,13 @@ pre { ...@@ -166,13 +166,13 @@ pre {
width: auto; width: auto;
z-index: 50; z-index: 50;
} }
[dir="rtl"] #skip-link { [dir="rtl"] .skip-link {
right: 50%; right: 50%;
margin-right: -5.25em; margin-right: -5.25em;
} }
#skip-link a, .skip-link,
#skip-link a:link, .skip-link:link,
#skip-link a:visited { .skip-link:visited {
display: inline-block; display: inline-block;
background: #444; background: #444;
color: #fff; color: #fff;
...@@ -181,14 +181,14 @@ pre { ...@@ -181,14 +181,14 @@ pre {
text-decoration: none; text-decoration: none;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
} }
[dir="rtl"] #skip-link a, [dir="rtl"] .skip-link,
[dir="rtl"] #skip-link a:link, [dir="rtl"] .skip-link:link,
[dir="rtl"] #skip-link a:visited { [dir="rtl"] .skip-link:visited {
padding: 1px 10px 2px 10px; padding: 1px 10px 2px 10px;
} }
#skip-link a:hover, .skip-link:hover,
#skip-link a:focus, .skip-link:focus,
#skip-link a:active { .skip-link:active {
outline: 0; outline: 0;
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment