Commit cc7c70e9 authored by alexpott's avatar alexpott

Issue #2011578 by mortendk, tlattimore, Cottser, soulston: Markup for Stark's...

Issue #2011578 by mortendk, tlattimore, Cottser, soulston: Markup for Stark's page.html.twig + maintenance-page.html.twig.
parent 40bc8bce
......@@ -2717,10 +2717,6 @@ function template_preprocess_page(&$variables) {
$variables['main_menu'] = array(
'#theme' =>'links__system_main_menu',
'#links' => $variables['main_menu'],
'#attributes' => array(
'id' => 'main-menu',
'class' => array('links', 'inline', 'clearfix'),
),
'#heading' => array(
'text' => t('Main menu'),
'class' => array('visually-hidden'),
......@@ -2731,10 +2727,6 @@ function template_preprocess_page(&$variables) {
$variables['secondary_menu'] = array(
'#theme' =>'links__system_secondary_menu',
'#links' => $variables['secondary_menu'],
'#attributes' => array(
'id' => 'secondary-menu',
'class' => array('links', 'inline', 'clearfix'),
),
'#heading' => array(
'text' => t('Secondary menu'),
'class' => array('visually-hidden'),
......
......@@ -166,11 +166,11 @@ function testListUI() {
$this->assertTitle('Test configuration | Drupal');
// Test for the table.
$element = $this->xpath('//div[@id="content"]//table');
$element = $this->xpath('//div[@class="l-content"]//table');
$this->assertTrue($element, 'Configuration entity list table found.');
// Test the table header.
$elements = $this->xpath('//div[@id="content"]//table/thead/tr/th');
$elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
$this->assertEqual(count($elements), 3, 'Correct number of table header cells found.');
// Test the contents of each th cell.
......@@ -180,7 +180,7 @@ function testListUI() {
}
// Check the number of table row cells.
$elements = $this->xpath('//div[@id="content"]//table/tbody/tr[@class="odd"]/td');
$elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
$this->assertEqual(count($elements), 3, 'Correct number of table row cells found.');
// Check the contents of each row cell. The first cell contains the label,
......
......@@ -63,7 +63,7 @@ function testSettingsUI() {
'settings[comment][comment_node_article][translatable]' => TRUE,
);
$this->assertSettings('comment', 'comment_node_article', FALSE, $edit);
$xpath_err = '//div[@id="messages"]//div[contains(@class, "error")]';
$xpath_err = '//div[contains(@class, "error")]';
$this->assertTrue($this->xpath($xpath_err), 'Enabling translation only for entity bundles generates a form error.');
// Test that the translation settings are not stored if a non-configurable
......
......@@ -190,7 +190,7 @@ protected function assertAuthoringInfo() {
'content_translation[created]' => '19/11/1978',
);
$this->drupalPost($path, $edit, $this->getFormSubmitAction($entity));
$this->assertTrue($this->xpath('//div[@id="messages"]//div[contains(@class, "error")]//ul'), 'Invalid values generate a list of form errors.');
$this->assertTrue($this->xpath('//div[contains(@class, "error")]//ul'), 'Invalid values generate a list of form errors.');
$this->assertEqual($entity->translation[$langcode]['uid'] == $values[$langcode]['uid'], 'Translation author correctly kept.');
$this->assertEqual($entity->translation[$langcode]['created'] == $values[$langcode]['created'], 'Translation date correctly kept.');
}
......
......@@ -423,7 +423,7 @@ function testUrlLanguageFallback() {
$this->assertTrue($fields[0] == $languages[$langcode_browser_fallback]->name, 'The browser language is the URL active language');
// Check that URLs are rewritten using the given browser language.
$fields = $this->xpath('//p[@id="site-name"]/strong/a[@rel="home" and @href=:url]', $args);
$fields = $this->xpath('//strong[@class="site-name"]/a[@rel="home" and @href=:url]', $args);
$this->assertTrue($fields[0] == 'Drupal', 'URLs are rewritten using the browser language.');
}
......
......@@ -115,7 +115,10 @@ function testThemeSettings() {
// Verify the actual 'src' attribute of the logo being output.
$this->drupalGet('');
$elements = $this->xpath('//*[@id=:id]/img', array(':id' => 'logo'));
$elements = $this->xpath('//header/a[@rel=:rel]/img', array(
':rel' => 'home',
)
);
$this->assertEqual((string) $elements[0]['src'], $expected['src']);
}
$unsupported_paths = array(
......@@ -163,7 +166,10 @@ function testThemeSettings() {
$uploaded_filename = 'public://' . $fields[0]['value'];
$this->drupalGet('');
$elements = $this->xpath('//*[@id=:id]/img', array(':id' => 'logo'));
$elements = $this->xpath('//header/a[@rel=:rel]/img', array(
':rel' => 'home',
)
);
$this->assertEqual($elements[0]['src'], file_create_url($uploaded_filename));
}
......
......@@ -12,80 +12,69 @@
* @ingroup themeable
*/
#}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ language.langcode }}" lang="{{ language.langcode }}" dir="{{ language.dir }}">
<head>
<title>{{ head_title }}</title>
<!DOCTYPE html>
<html>
{{ head }}
<title>{{ head_title }}</title>
{{ styles }}
{{ scripts }}
</head>
<body class="{{ attributes.class }}">
<div id="page">
<div id="header">
<div id="logo-title">
{% if logo %}
<a href="{{ base_path }}" title="{{ 'Home'|t }}" rel="home" id="logo">
<img src="{{ logo }}" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
<div id="name-and-slogan">
{% if site_name %}
<h1 id="site-name">
<a href="{{ base_path }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
</h1>
{% endif %}
{% if site_slogan %}
<div id="site-slogan">{{ site_slogan }}</div>
{% endif %}
</div> <!-- /name-and-slogan -->
</div> <!-- /logo-title -->
<div class="l-container">
{% if header %}
<div id="header-region">
{{ header }}
</div>
{% endif %}
<header role="banner">
{% if logo %}
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
<img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
</a>
{% endif %}
</div> <!-- /header -->
{% if site_name or site_slogan %}
<div class="name-and-slogan">
{% if site_name %}
<h1 class="site-name">
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</h1>
{% endif %}
<div id="container" class="clearfix">
{% if site_slogan %}
<div class="site-slogan">{{ site_slogan }}</div>
{% endif %}
</div>{# /.name-and-slogan #}
{% endif %}
{% if sidebar_first %}
<div id="sidebar-first" class="column sidebar">
{{ sidebar_first }}
</div> <!-- /sidebar-first -->
{% endif %}
</header>
<div id="main" class="column"><div id="main-squeeze">
<main role="main">
{% if title %}
<h1>{{ title }}</h1>
{% endif %}
<div id="content">
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
{% if messages %}{{ messages }}{% endif %}
<div id="content-content" class="clearfix">
{{ content }}
</div> <!-- /content-content -->
</div> <!-- /content -->
{{ messages }}
</div></div> <!-- /main-squeeze /main -->
{{ content }}
</main>
{% if sidebar_second %}
<div id="sidebar-second" class="column sidebar">
{{ sidebar_second }}
</div> <!-- /sidebar-second -->
{% endif %}
{% if page.sidebar_first %}
<aside class="l-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>{# /.l-sidebar-first #}
{% endif %}
</div> <!-- /container -->
{% if page.sidebar_second %}
<aside class="l-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>{# /.l-sidebar-second #}
{% endif %}
<div id="footer-wrapper">
<div id="footer">
{% if footer %}{{ footer }}{% endif %}
</div> <!-- /footer -->
</div> <!-- /footer-wrapper -->
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}
</div> <!-- /page -->
</div>{# /.l-container #}
</body>
</html>
......@@ -63,39 +63,36 @@
* @ingroup themeable
*/
#}
<div id="page">
<header id="header" role="banner" class="clearfix">
<div class="l-container">
<header role="banner">
{% if logo %}
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
<img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
</a>
{% endif %}
{% if site_name or site_slogan %}
<div id="name-and-slogan">
{% if site_name %}
{% if title %}
<p id="site-name"><strong>
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</strong></p>
{# Use h1 when the content title is empty #}
{% else %}
<h1 id="site-name">
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</h1>
{% endif %}
<div class="name-and-slogan">
{# Use h1 when the content title is empty #}
{% if title %}
<strong class="site-name">
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</strong>
{% else %}
<h1 class="site-name">
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</h1>
{% endif %}
{% if site_slogan %}
<p id="site-slogan">{{ site_slogan }}</p>
<div class="site-slogan">{{ site_slogan }}</div>
{% endif %}
</div><!-- /#name-and-slogan -->
{% endif %}
</div>{# ./name-and-slogan #}
{% endif %}
{{ page.header }}
</header>
{% if main_menu or secondary_menu %}
......@@ -107,41 +104,51 @@
{{ breadcrumb }}
{% if messages %}
<div id="messages">{{ messages }}</div>
{% endif %}
{{ messages }}
{{ page.help }}
<main role="main">
<a id="main-content"></a>{# link is in html.html.twig #}
<div id="main" role="main" class="clearfix">
<a id="main-content"></a>
<div class="l-content">
{{ page.highlighted }}
<div id="content" class="column">
{% if page.highlighted %}<div id="highlighted">{{ page.highlighted }}</div>{% endif %}
{{ title_prefix }}
{% if title %}<h1 class="title" id="page-title">{{ title }}</h1>{% endif %}
{% if title %}
<h1>{{ title }}</h1>
{% endif %}
{{ title_suffix }}
{% if tabs %}<div class="tabs">{{ tabs }}</div>{% endif %}
{{ page.help }}
{% if action_links %}<ul class="action-links">{{ action_links }}</ul>{% endif %}
{{ tabs }}
{% if action_links %}
<nav class="action-links">{{ action_links }}</nav>
{% endif %}
{{ page.content }}
{{ feed_icons }}
</div><!-- /#content -->
</div>{# /.l-content #}
{% if page.sidebar_first %}
<div id="sidebar-first" class="column sidebar">
<aside class="l-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</div><!-- /#sidebar-first -->
</aside>
{% endif %}
{% if page.sidebar_second %}
<div id="sidebar-second" class="column sidebar">
<aside class="l-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</div><!-- /#sidebar-second -->
</aside>
{% endif %}
</div><!-- /#main -->
</main>
<footer id="footer" role="contentinfo">
{{ page.footer }}
</footer>
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}
</div><!-- /#page -->
</div>{# /.l-container #}
......@@ -42,15 +42,15 @@ function testSecondaryMenu() {
// For a logged-in user, expect the secondary menu to have links for "My
// account" and "Log out".
$link = $this->xpath('//ul[@id=:menu_id]/li/a[contains(@href, :href) and text()=:text]', array(
':menu_id' => 'secondary-menu',
$link = $this->xpath('//ul[@class=:menu_class]/li/a[contains(@href, :href) and text()=:text]', array(
':menu_class' => 'links',
':href' => 'user',
':text' => 'My account',
));
$this->assertEqual(count($link), 1, 'My account link is in secondary menu.');
$link = $this->xpath('//ul[@id=:menu_id]/li/a[contains(@href, :href) and text()=:text]', array(
':menu_id' => 'secondary-menu',
$link = $this->xpath('//ul[@class=:menu_class]/li/a[contains(@href, :href) and text()=:text]', array(
':menu_class' => 'links',
':href' => 'user/logout',
':text' => 'Log out',
));
......
......@@ -40,6 +40,7 @@ function bartik_preprocess_page(&$variables) {
}
if (!empty($variables['secondary_menu'])) {
$variables['secondary_menu']['#attributes']['id'] = 'secondary-menu-links';
$variables['secondary_menu']['#attributes']['class'] = array('links', 'inline', 'clearfix');
}
$site_config = config('system.site');
......
......@@ -9,129 +9,133 @@
* This layout method works reasonably well, but shouldn't be used on a
* production site because it can break. For example, if an over-large image
* (one that is wider than 20% of the viewport) is in the left sidebar, the
* image will overlap with the #content to the right.
* image will overlap with the .l-content to the right.
*/
#content,
#sidebar-first,
#sidebar-second {
display: inline;
position: relative;
}
img {
height: auto;
max-width: 100%;
}
main:after {
content: "";
display: table;
clear: both;
}
.l-content,
.l-sidebar-first,
.l-sidebar-second {
display: inline;
position: relative;
}
@media all and (min-width: 480px) and (max-width: 959px) {
#content {
.l-content {
width: 100%;
}
body.sidebar-first #content,
body.two-sidebars #content {
.sidebar-first .l-content,
.two-sidebars .l-content {
width: 67%;
float: right; /* LTR */
}
[dir="rtl"] body.sidebar-first #content,
[dir="rtl"] body.two-sidebars #content {
[dir="rtl"] .sidebar-first .l-content,
[dir="rtl"] .two-sidebars .l-content {
float: left;
}
body.sidebar-second #content {
.sidebar-second .l-content {
width: 67%;
float: left; /* LTR */
}
[dir="rtl"] body.sidebar-second #content {
[dir="rtl"] .sidebar-second .l-content {
float: right;
}
#sidebar-first {
.l-sidebar-first {
width: 33%;
float: left; /* LTR */
}
[dir="rtl"] #sidebar-first {
[dir="rtl"] .l-sidebar-first {
float: right;
}
#sidebar-second {
.l-sidebar-second {
width: 33%;
float: right; /* LTR */
}
[dir="rtl"] #sidebar-second {
[dir="rtl"] .l-sidebar-second {
float: left;
}
body.two-sidebars #sidebar-second {
.two-sidebars .l-sidebar-second {
clear: both;
width: 100%;
}
[dir="rtl"] body.two-sidebars #sidebar-second {
[dir="rtl"] .two-sidebars .l-sidebar-second {
float: right;
clear: right;
}
body.two-sidebars #sidebar-second .block {
.two-sidebars .l-sidebar-second .block {
float: left; /* LTR */
width: 33%;
}
[dir="rtl"] body.two-sidebars #sidebar-second .block {
[dir="rtl"] .two-sidebars .l-sidebar-second .block {
float: right;
}
body.two-sidebars #sidebar-second .block:nth-child(3n+1) {
.two-sidebars .l-sidebar-second .block:nth-child(3n+1) {
clear: both;
}
}
@media all and (min-width: 960px) {
#content {
.l-content {
width: 100%;
float: left; /* LTR */
}
[dir="rtl"] #content {
[dir="rtl"] .l-content {
float: right;
}
body.sidebar-first #content {
.sidebar-first .l-content {
width: 80%;
left: 20%; /* LTR */
}
[dir="rtl"] body.sidebar-first #content {
[dir="rtl"] .sidebar-first .l-content {
left: 0;
right: 20%;
}
body.sidebar-second #content {
.sidebar-second .l-content {
width: 80%;
}
body.two-sidebars #content {
.two-sidebars .l-content {
width: 60%;
left: 20%; /* LTR */
}
[dir="rtl"] body.two-sidebars #content {
[dir="rtl"] .two-sidebars .l-content {
left: 0;
right: 20%;
}
#sidebar-first {
.l-sidebar-first {
width: 20%;
float: left; /* LTR */
left: -80%; /* LTR */
}
[dir="rtl"] #sidebar-first {
[dir="rtl"] .l-sidebar-first {
float: right;
left: 0;
right: -80%;
}
body.two-sidebars #sidebar-first {
.two-sidebars .l-sidebar-first {
left: -60%; /* LTR */
}
[dir="rtl"] body.two-sidebars #sidebar-first {
[dir="rtl"] .two-sidebars .l-sidebar-first {
left: 0;
right: -60%;
}
#sidebar-second {
.l-sidebar-second {
float: right; /* LTR */
width: 20%;
}
[dir="rtl"] #sidebar-second {
[dir="rtl"] .l-sidebar-second {
float: left;
}
}
......
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