- Patch #1322794 by JohnAlbin, alanburke, jrbeeman, rupl, Tor Arne Thune: make Stark use a responsive layout.
parent
5d2dca6829
commit
5868d523c9
|
@ -282,7 +282,7 @@ class MenuRouterTestCase extends DrupalWebTestCase {
|
||||||
theme_enable(array('stark'));
|
theme_enable(array('stark'));
|
||||||
$this->drupalGet('menu-test/theme-callback/use-stark-theme');
|
$this->drupalGet('menu-test/theme-callback/use-stark-theme');
|
||||||
$this->assertText('Custom theme: stark. Actual theme: stark.', t('The theme callback system uses an optional theme once it has been enabled.'));
|
$this->assertText('Custom theme: stark. Actual theme: stark.', t('The theme callback system uses an optional theme once it has been enabled.'));
|
||||||
$this->assertRaw('stark/layout.css', t("The optional theme's CSS appears on the page."));
|
$this->assertRaw('stark/css/layout.css', t("The optional theme's CSS appears on the page."));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -316,7 +316,7 @@ class MenuRouterTestCase extends DrupalWebTestCase {
|
||||||
// should be honored.
|
// should be honored.
|
||||||
$this->drupalGet('menu-test/no-theme-callback');
|
$this->drupalGet('menu-test/no-theme-callback');
|
||||||
$this->assertText('Custom theme: stark. Actual theme: stark.', t('The result of hook_custom_theme() is used as the theme for the current page.'));
|
$this->assertText('Custom theme: stark. Actual theme: stark.', t('The result of hook_custom_theme() is used as the theme for the current page.'));
|
||||||
$this->assertRaw('stark/layout.css', t("The Stark theme's CSS appears on the page."));
|
$this->assertRaw('stark/css/layout.css', t("The Stark theme's CSS appears on the page."));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -499,7 +499,7 @@ class ThemeHookInitUnitTest extends DrupalWebTestCase {
|
||||||
$this->assertRaw('Themed output generated in hook_init()');
|
$this->assertRaw('Themed output generated in hook_init()');
|
||||||
// Verify that the default theme's CSS still appears when the theme system
|
// Verify that the default theme's CSS still appears when the theme system
|
||||||
// is initialized in hook_init().
|
// is initialized in hook_init().
|
||||||
$this->assertRaw('stark/layout.css');
|
$this->assertRaw('stark/css/layout.css');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Right-to-left overrides for IE
|
||||||
|
*/
|
||||||
|
|
||||||
|
#content {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
body.sidebar-first #content {
|
||||||
|
left: 0;
|
||||||
|
right: 20%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #content {
|
||||||
|
left: 0;
|
||||||
|
right: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-first {
|
||||||
|
float: right;
|
||||||
|
left: 0;
|
||||||
|
right: -80%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-first {
|
||||||
|
left: 0;
|
||||||
|
right: -60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-second {
|
||||||
|
float: left;
|
||||||
|
}
|
|
@ -0,0 +1,35 @@
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Force IE 8 and lower to render in desktop layout.
|
||||||
|
*/
|
||||||
|
|
||||||
|
#content {
|
||||||
|
width: 100%;
|
||||||
|
float: left; /* LTR */
|
||||||
|
}
|
||||||
|
body.sidebar-first #content {
|
||||||
|
width: 80%;
|
||||||
|
left: 20%; /* LTR */
|
||||||
|
}
|
||||||
|
body.sidebar-second #content {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #content {
|
||||||
|
width: 60%;
|
||||||
|
left: 20%; /* LTR */
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-first {
|
||||||
|
width: 20%;
|
||||||
|
float: left; /* LTR */
|
||||||
|
left: -80%; /* LTR */
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-first {
|
||||||
|
left: -60%; /* LTR */
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-second {
|
||||||
|
float: right; /* LTR */
|
||||||
|
width: 20%;
|
||||||
|
}
|
|
@ -0,0 +1,52 @@
|
||||||
|
@media all and (min-width: 480px) and (max-width: 959px) {
|
||||||
|
body.sidebar-first #content,
|
||||||
|
body.two-sidebars #content {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
body.sidebar-second #content {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-first {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-second {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-second {
|
||||||
|
float: right;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-second .block {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 960px) {
|
||||||
|
#content {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
body.sidebar-first #content {
|
||||||
|
left: 0;
|
||||||
|
right: 20%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #content {
|
||||||
|
left: 0;
|
||||||
|
right: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-first {
|
||||||
|
float: right;
|
||||||
|
left: 0;
|
||||||
|
right: -80%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-first {
|
||||||
|
left: 0;
|
||||||
|
right: -60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-second {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,90 @@
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Stark layout method
|
||||||
|
*
|
||||||
|
* To avoid obscuring CSS added to the page by Drupal or a contrib module, the
|
||||||
|
* Stark theme itself has no styling, except just enough CSS to arrange the page
|
||||||
|
* in a traditional "Header, sidebars, content, and footer" layout.
|
||||||
|
*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
#content,
|
||||||
|
#sidebar-first,
|
||||||
|
#sidebar-second {
|
||||||
|
display: inline;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 480px) and (max-width: 959px) {
|
||||||
|
#content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
body.sidebar-first #content,
|
||||||
|
body.two-sidebars #content {
|
||||||
|
width: 67%;
|
||||||
|
float: right; /* LTR */
|
||||||
|
}
|
||||||
|
body.sidebar-second #content {
|
||||||
|
width: 67%;
|
||||||
|
float: left; /* LTR */
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-first {
|
||||||
|
width: 33%;
|
||||||
|
float: left; /* LTR */
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-second {
|
||||||
|
width: 33%;
|
||||||
|
float: right; /* LTR */
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-second {
|
||||||
|
clear: both;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.two-sidebars #sidebar-second .block {
|
||||||
|
float: left; /* LTR */
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-second .block:nth-child(3n+1) {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 960px) {
|
||||||
|
#content {
|
||||||
|
width: 100%;
|
||||||
|
float: left; /* LTR */
|
||||||
|
}
|
||||||
|
body.sidebar-first #content {
|
||||||
|
width: 80%;
|
||||||
|
left: 20%; /* LTR */
|
||||||
|
}
|
||||||
|
body.sidebar-second #content {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
body.two-sidebars #content {
|
||||||
|
width: 60%;
|
||||||
|
left: 20%; /* LTR */
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-first {
|
||||||
|
width: 20%;
|
||||||
|
float: left; /* LTR */
|
||||||
|
left: -80%; /* LTR */
|
||||||
|
}
|
||||||
|
body.two-sidebars #sidebar-first {
|
||||||
|
left: -60%; /* LTR */
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-second {
|
||||||
|
float: right; /* LTR */
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,51 +0,0 @@
|
||||||
|
|
||||||
/**
|
|
||||||
* @file
|
|
||||||
* Stark layout method
|
|
||||||
*
|
|
||||||
* To avoid obscuring CSS added to the page by Drupal or a contrib module, the
|
|
||||||
* Stark theme itself has no styling, except just enough CSS to arrange the page
|
|
||||||
* in a traditional "Header, sidebars, content, and footer" layout.
|
|
||||||
*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
#content,
|
|
||||||
#sidebar-first,
|
|
||||||
#sidebar-second {
|
|
||||||
float: left;
|
|
||||||
display: inline;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
body.sidebar-first #content {
|
|
||||||
width: 80%;
|
|
||||||
left: 20%; /* LTR */
|
|
||||||
}
|
|
||||||
body.sidebar-second #content {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
body.two-sidebars #content {
|
|
||||||
width: 60%;
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar-first {
|
|
||||||
width: 20%;
|
|
||||||
left: -80%; /* LTR */
|
|
||||||
}
|
|
||||||
|
|
||||||
body.two-sidebars #sidebar-first {
|
|
||||||
left: -60%; /* LTR */
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar-second {
|
|
||||||
float: right; /* LTR */
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
|
@ -3,4 +3,4 @@ description = This theme demonstrates Drupal's default HTML markup and CSS style
|
||||||
package = Core
|
package = Core
|
||||||
version = VERSION
|
version = VERSION
|
||||||
core = 8.x
|
core = 8.x
|
||||||
stylesheets[all][] = layout.css
|
stylesheets[all][] = css/layout.css
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Override or insert variables into the html template.
|
||||||
|
*
|
||||||
|
* @todo Based on outcome of http://drupal.org/node/1471382, revise this
|
||||||
|
* technique to use conditional classes vs. conditional stylesheets.
|
||||||
|
*/
|
||||||
|
function stark_preprocess_html(&$variables) {
|
||||||
|
// Add conditional CSS for IE8 and below.
|
||||||
|
drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'weight' => 999, 'preprocess' => FALSE));
|
||||||
|
}
|
Loading…
Reference in New Issue