Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

- Patch #1322794 by JohnAlbin, alanburke, jrbeeman, rupl, Tor Arne Thune: make Stark use a responsive layout.

8.0.x
Dries 2012-03-23 14:43:01 -06:00
parent 5d2dca6829
commit 5868d523c9
9 changed files with 224 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/modules/simpletest/tests/menu.test
View File

@ -282,7 +282,7 @@ class MenuRouterTestCase extends DrupalWebTestCase {
theme_enable(array('stark'));
$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->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.
$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->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."));
}
/**

2
core/modules/simpletest/tests/theme.test
View File

@ -499,7 +499,7 @@ class ThemeHookInitUnitTest extends DrupalWebTestCase {
$this->assertRaw('Themed output generated in hook_init()');
// Verify that the default theme's CSS still appears when the theme system
// is initialized in hook_init().
$this->assertRaw('stark/layout.css');
$this->assertRaw('stark/css/layout.css');
}
}

31
core/themes/stark/css/ie-rtl.css Normal file
View File

@ -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;
}

35
core/themes/stark/css/ie.css Normal file
View File

@ -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%;
}

52
core/themes/stark/css/layout-rtl.css Normal file
View File

@ -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;
}
}

90
core/themes/stark/css/layout.css Normal file
View File

@ -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%;
}
}

51
core/themes/stark/layout.css
View File

@ -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%;
}

2
core/themes/stark/stark.info
View File

@ -3,4 +3,4 @@ description = This theme demonstrates Drupal's default HTML markup and CSS style
package = Core
version = VERSION
core = 8.x
stylesheets[all][] = layout.css
stylesheets[all][] = css/layout.css

12
core/themes/stark/template.php Normal file
View File

@ -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));
}