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