Issue #1912610 by amitgoyal, BryanCGreen24, lokapujya, Rajendar Reddy, echoz, barraponto, LewisNyman, pixelwhip: Rename layout classes to follow the layout style naming convention.
parent
e4802afef9
commit
fc360e06de
|
@ -42,11 +42,11 @@ class BlockContentListTest extends WebTestBase {
|
|||
$this->assertTitle(t('Custom block library') . ' | Drupal');
|
||||
|
||||
// Test for the table.
|
||||
$element = $this->xpath('//div[@class="l-content"]//table');
|
||||
$element = $this->xpath('//div[@class="layout-content"]//table');
|
||||
$this->assertTrue($element, 'Configuration entity list table found.');
|
||||
|
||||
// Test the table header.
|
||||
$elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
|
||||
$elements = $this->xpath('//div[@class="layout-content"]//table/thead/tr/th');
|
||||
$this->assertEqual(count($elements), 2, 'Correct number of table header cells found.');
|
||||
|
||||
// Test the contents of each th cell.
|
||||
|
@ -72,7 +72,7 @@ class BlockContentListTest extends WebTestBase {
|
|||
$this->assertFieldByXpath('//td', $label, 'Label found for added block.');
|
||||
|
||||
// Check the number of table row cells.
|
||||
$elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
|
||||
$elements = $this->xpath('//div[@class="layout-content"]//table/tbody/tr[@class="odd"]/td');
|
||||
$this->assertEqual(count($elements), 2, 'Correct number of table row cells found.');
|
||||
// Check the contents of each row cell. The first cell contains the label,
|
||||
// the second contains the machine name, and the third contains the
|
||||
|
|
|
@ -153,11 +153,11 @@ class ConfigEntityListTest extends WebTestBase {
|
|||
$this->assertTitle('Test configuration | Drupal');
|
||||
|
||||
// Test for the table.
|
||||
$element = $this->xpath('//div[@class="l-content"]//table');
|
||||
$element = $this->xpath('//div[@class="layout-content"]//table');
|
||||
$this->assertTrue($element, 'Configuration entity list table found.');
|
||||
|
||||
// Test the table header.
|
||||
$elements = $this->xpath('//div[@class="l-content"]//table/thead/tr/th');
|
||||
$elements = $this->xpath('//div[@class="layout-content"]//table/thead/tr/th');
|
||||
$this->assertEqual(count($elements), 3, 'Correct number of table header cells found.');
|
||||
|
||||
// Test the contents of each th cell.
|
||||
|
@ -167,7 +167,7 @@ class ConfigEntityListTest extends WebTestBase {
|
|||
}
|
||||
|
||||
// Check the number of table row cells.
|
||||
$elements = $this->xpath('//div[@class="l-content"]//table/tbody/tr[@class="odd"]/td');
|
||||
$elements = $this->xpath('//div[@class="layout-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,
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="l-container">
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{% if site_name or site_slogan %}
|
||||
|
@ -35,15 +35,15 @@
|
|||
</main>
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="l-sidebar-first" role="complementary">
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>{# /.l-sidebar-first #}
|
||||
</aside>{# /.layout-sidebar-first #}
|
||||
{% endif %}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="l-sidebar-second" role="complementary">
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>{# /.l-sidebar-second #}
|
||||
</aside>{# /.layout-sidebar-second #}
|
||||
{% endif %}
|
||||
|
||||
{% if page.footer %}
|
||||
|
@ -52,4 +52,4 @@
|
|||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>{# /.l-container #}
|
||||
</div>{# /.layout-container #}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="l-container">
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{% if logo %}
|
||||
|
@ -47,15 +47,15 @@
|
|||
</main>
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="l-sidebar-first" role="complementary">
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>{# /.l-sidebar-first #}
|
||||
</aside>{# /.layout-sidebar-first #}
|
||||
{% endif %}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="l-sidebar-second" role="complementary">
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>{# /.l-sidebar-second #}
|
||||
</aside>{# /.layout-sidebar-second #}
|
||||
{% endif %}
|
||||
|
||||
{% if page.footer %}
|
||||
|
@ -64,4 +64,4 @@
|
|||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>{# /.l-container #}
|
||||
</div>{# /.layout-container #}
|
||||
|
|
|
@ -63,7 +63,7 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="l-container">
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{% if logo %}
|
||||
|
@ -111,7 +111,7 @@
|
|||
<main role="main">
|
||||
<a id="main-content"></a>{# link is in html.html.twig #}
|
||||
|
||||
<div class="l-content">
|
||||
<div class="layout-content">
|
||||
{{ page.highlighted }}
|
||||
|
||||
{{ title_prefix }}
|
||||
|
@ -129,16 +129,16 @@
|
|||
{{ page.content }}
|
||||
|
||||
{{ feed_icons }}
|
||||
</div>{# /.l-content #}
|
||||
</div>{# /.layout-content #}
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="l-sidebar-first" role="complementary">
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="l-sidebar-second" role="complementary">
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
@ -151,4 +151,4 @@
|
|||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>{# /.l-container #}
|
||||
</div>{# /.layout-container #}
|
||||
|
|
|
@ -22,18 +22,18 @@ function bartik_preprocess_page(&$variables) {
|
|||
$attributes = $page_object->getBodyAttributes();
|
||||
$classes = $attributes['class'];
|
||||
if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
|
||||
$classes[] = 'two-sidebars';
|
||||
$classes[] = 'layout-two-sidebars';
|
||||
}
|
||||
elseif (!empty($variables['page']['sidebar_first'])) {
|
||||
$classes[] = 'one-sidebar';
|
||||
$classes[] = 'sidebar-first';
|
||||
$classes[] = 'layout-one-sidebar';
|
||||
$classes[] = 'layout-sidebar-first';
|
||||
}
|
||||
elseif (!empty($variables['page']['sidebar_second'])) {
|
||||
$classes[] = 'one-sidebar';
|
||||
$classes[] = 'sidebar-second';
|
||||
$classes[] = 'layout-one-sidebar';
|
||||
$classes[] = 'layout-sidebar-second';
|
||||
}
|
||||
else {
|
||||
$classes[] = 'no-sidebars';
|
||||
$classes[] = 'layout-no-sidebars';
|
||||
}
|
||||
|
||||
if (!empty($variables['page']['featured'])) {
|
||||
|
|
|
@ -188,30 +188,30 @@ body,
|
|||
[dir="rtl"] .region-footer-fourthcolumn {
|
||||
float: right;
|
||||
}
|
||||
.two-sidebars #content {
|
||||
.layout-two-sidebars #content {
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
width: 50%;
|
||||
}
|
||||
.one-sidebar #content {
|
||||
.layout-one-sidebar #content {
|
||||
width: 75%;
|
||||
}
|
||||
.no-sidebars #content {
|
||||
.layout-no-sidebars #content {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-first #content {
|
||||
.layout-sidebar-first #content {
|
||||
margin-left: 25%; /* LTR */
|
||||
margin-right: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .sidebar-first #content {
|
||||
[dir="rtl"] .layout-sidebar-first #content {
|
||||
margin-left: 0;
|
||||
margin-right: 25%;
|
||||
}
|
||||
.sidebar-second #content {
|
||||
.layout-sidebar-second #content {
|
||||
margin-right: 25%; /* LTR */
|
||||
margin-left: 0; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .sidebar-second #content {
|
||||
[dir="rtl"] .layout-sidebar-second #content {
|
||||
margin-right: 0;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
|
|
@ -1564,13 +1564,13 @@ ul.vertical-tabs-list {
|
|||
.comment-form input.form-file {
|
||||
width: auto;
|
||||
}
|
||||
.no-sidebars .comment-form .form-text {
|
||||
.layout-no-sidebars .comment-form .form-text {
|
||||
width: 800px;
|
||||
}
|
||||
.one-sidebar .comment-form .form-text {
|
||||
.layout-one-sidebar .comment-form .form-text {
|
||||
width: 500px;
|
||||
}
|
||||
.two-sidebars .comment-form .form-text {
|
||||
.layout-two-sidebars .comment-form .form-text {
|
||||
width: 320px;
|
||||
}
|
||||
.comment-form .form-item .description {
|
||||
|
|
|
@ -102,19 +102,19 @@
|
|||
/**
|
||||
* Layout
|
||||
*/
|
||||
.l-container {
|
||||
.layout-container {
|
||||
background: #fff;
|
||||
width: auto;
|
||||
margin-left: 1.25em;
|
||||
margin-right: 1.25em;
|
||||
}
|
||||
.l-container:after { /* no reason for a clearfix in the markup */
|
||||
.layout-container:after { /* no reason for a clearfix in the markup */
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
@media all and (max-width: 48em) { /* 768px */
|
||||
.l-container {
|
||||
.layout-container {
|
||||
margin: 1.25em;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
@ -138,7 +138,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.l-container {
|
||||
.layout-container {
|
||||
margin: 0 auto;
|
||||
max-width: 770px;
|
||||
width: 75%;
|
||||
|
@ -165,11 +165,11 @@
|
|||
padding: 15px;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.l-sidebar-first {
|
||||
.layout-sidebar-first {
|
||||
float: left;
|
||||
width: 35%;
|
||||
}
|
||||
[dir="rtl"] .l-sidebar-first {
|
||||
[dir="rtl"] .layout-sidebar-first {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
|
@ -20,11 +20,11 @@ function seven_preprocess_page(&$variables) {
|
|||
// Add information about the number of sidebars.
|
||||
|
||||
if (!empty($variables['page']['sidebar_first'])) {
|
||||
$classes[] = 'one-sidebar';
|
||||
$classes[] = 'sidebar-first';
|
||||
$classes[] = 'layout-one-sidebar';
|
||||
$classes[] = 'layout-sidebar-first';
|
||||
}
|
||||
else {
|
||||
$classes[] = 'no-sidebars';
|
||||
$classes[] = 'layout-no-sidebars';
|
||||
}
|
||||
$attributes['class'] = $classes;
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
* @see template_preprocess_install_page()
|
||||
*/
|
||||
#}
|
||||
<div class="l-container">
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{% if site_name or site_slogan %}
|
||||
|
@ -25,9 +25,9 @@
|
|||
</header>
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="l-sidebar-first" role="complementary">
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>{# /.l-sidebar-first #}
|
||||
</aside>{# /.layout-sidebar-first #}
|
||||
{% endif %}
|
||||
|
||||
<main role="main">
|
||||
|
@ -39,9 +39,9 @@
|
|||
</main>
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="l-sidebar-second" role="complementary">
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>{# /.l-sidebar-second #}
|
||||
</aside>{# /.layout-sidebar-second #}
|
||||
{% endif %}
|
||||
|
||||
{% if page.page_bottom %}
|
||||
|
@ -50,4 +50,4 @@
|
|||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>{# /.l-container #}
|
||||
</div>{# /.layout-container #}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
* @see template_preprocess_maintenance_page()
|
||||
*/
|
||||
#}
|
||||
<div class="l-container">
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{% if site_name or site_slogan %}
|
||||
|
@ -25,9 +25,9 @@
|
|||
</header>
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="l-sidebar-first" role="complementary">
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>{# /.l-sidebar-first #}
|
||||
</aside>{# /.layout-sidebar-first #}
|
||||
{% endif %}
|
||||
|
||||
<main role="main">
|
||||
|
@ -44,4 +44,4 @@
|
|||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>{# /.l-container #}
|
||||
</div>{# /.layout-container #}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
* 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 .l-content to the right.
|
||||
* image will overlap with the .layout-content to the right.
|
||||
*/
|
||||
img {
|
||||
height: auto;
|
||||
|
@ -21,80 +21,80 @@ main:after {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.l-content,
|
||||
.l-sidebar-first,
|
||||
.l-sidebar-second {
|
||||
.layout-content,
|
||||
.layout-sidebar-first,
|
||||
.layout-sidebar-second {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media all and (min-width: 480px) and (max-width: 959px) {
|
||||
.l-content {
|
||||
.layout-content {
|
||||
width: 67%;
|
||||
float: right; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .l-content {
|
||||
[dir="rtl"] .layout-content {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.l-sidebar-first {
|
||||
.layout-sidebar-first {
|
||||
width: 33%;
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .l-sidebar-first {
|
||||
[dir="rtl"] .layout-sidebar-first {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.l-sidebar-second {
|
||||
.layout-sidebar-second {
|
||||
float: right; /* LTR */
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
[dir="rtl"] .l-sidebar-second {
|
||||
[dir="rtl"] .layout-sidebar-second {
|
||||
float: right;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.l-sidebar-second .block {
|
||||
.layout-sidebar-second .block {
|
||||
float: left; /* LTR */
|
||||
width: 33%;
|
||||
}
|
||||
[dir="rtl"] .l-sidebar-second .block {
|
||||
[dir="rtl"] .layout-sidebar-second .block {
|
||||
float: right;
|
||||
}
|
||||
.l-sidebar-second .block:nth-child(3n+1) {
|
||||
.layout-sidebar-second .block:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 960px) {
|
||||
.l-content {
|
||||
.layout-content {
|
||||
width: 60%;
|
||||
float: left; /* LTR */
|
||||
left: 20%; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .l-content {
|
||||
[dir="rtl"] .layout-content {
|
||||
float: right;
|
||||
left: 0;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.l-sidebar-first {
|
||||
.layout-sidebar-first {
|
||||
width: 20%;
|
||||
float: left; /* LTR */
|
||||
left: -60%; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .l-sidebar-first {
|
||||
[dir="rtl"] .layout-sidebar-first {
|
||||
float: right;
|
||||
left: 0;
|
||||
right: -60%;
|
||||
}
|
||||
|
||||
.l-sidebar-second {
|
||||
.layout-sidebar-second {
|
||||
float: right; /* LTR */
|
||||
width: 20%;
|
||||
}
|
||||
[dir="rtl"] .l-sidebar-second {
|
||||
[dir="rtl"] .layout-sidebar-second {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue