Commit fc360e06 authored by webchick's avatar webchick

Issue #1912610 by amitgoyal, BryanCGreen24, lokapujya, Rajendar Reddy, echoz,...

Issue #1912610 by amitgoyal, BryanCGreen24, lokapujya, Rajendar Reddy, echoz, barraponto, LewisNyman, pixelwhip: Rename layout classes to follow the layout style naming convention.
parent e4802afe
......@@ -42,11 +42,11 @@ public function testListing() {
$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 @@ public function testListing() {
$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 @@ function testListUI() {
$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 @@ function testListUI() {
}
// 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;
}
}
......
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